查看源码,觉得有帮助反手给个star吧
概要:
- 创建一个叫biu-function的javascript函数库
- 使用wepback构建umd形式的包
- 使用npm发布上线
一. npm注册、登陆
- 注册账户网站: 前往npm官网
- 登陆:
npm login
// 然后输入账号密码
二. webpack构建项目架子
2.1 创建目录
mkdir biu-function
cd biu-function
2.2 初始化
// 配置函数库名、版本号、作者......
npm init
2.3 webpack安装
webpack中文网
// 以开发依赖的形式安装
npm install --save-dev webpack
npm install --save-dev webpack-cli
webpack-cli可以用于在命令行直接执行webpack命令
2.4 webpack配置
在根目录创建webpack.config.js
npm install --save-dev clean-webpack-plugin
// node 核心模块,处理路径相关
const path = require('path')
// webpack插件,新版本用法发与webpack中文网上写的有点出入,需要注意
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// 引入模板文件, 看你需不需要
// const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js',
libraryTarget: 'umd',
library: 'Biu', // Peanut 可以随便更换,不是固定值,是函数库名字,类似Jquery
},
plugins: [
new CleanWebpackPlugin(),
// new HtmlWebpackPlugin({ template: './src/index.html' }),
],
}
扩展阅读:
// TODO
2.5 支持es6语法, 可以跳过
前往Babel中文网
将 ES2015+ 语法的 JavaScript 代码编译为能在当前浏览器上工作的代码。这将涉及到新语法的转换和缺失特性的修补。这里需要使用babel
2.5.1 安装babel依赖包
npm install --save-dev babel-loader @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill
2.5.2 babel预设配置在根目录下创建配置文件babel.config.js或者.babelrc
- babel.config.js
const presets = [
[
"@babel/env",
{
targets: {
edge: "17",
firefox: "60",
chrome: "67",
safari: "11.1",
},
useBuiltIns: "usage",
},
],
];
module.exports = { presets };
- .babelrc
{
"presets": [
[
"@babel/env",
{
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1",
},
"useBuiltIns": "usage",
},
],
],
"plugins": []
}
2.5.3 webpack配置babel-loader解析es6
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
三. 函数库编写
mkdir src
touch src/index.js
// index.js
function add(a, b) {
return a + b
}
export default {add}
函数导出可以直接export或者export default导出变量、对象,这个会影响import。
例如:
export default { add }
// 使用import引入 import Biu from 'biu-function'
// 这个Biu就是导出的default对象
// 使用 script标签引入,则需要使用Biu.default.add()
// Biu实在webpack.config.js定义的library的名字
四. 构建与发布
- 在package.json文件修改srcipt,增加webpack构建,可以增加额外webpack配置
"build": "webpack"
// "build": "webpack --config webpack.config.js"
- 将package.json文件的main(入口),改成对应构建的结果,便于函数库引入
"main": "dist/index.js"
npm run build // 相当于执行 webpck进行打包
npm publish // 直接发布
发布成功可以在npm官网找到上传的包
五. 安装与引入使用
npm install biu-funciton
在文件中的引入,使用
import Biu from 'biu-function';
console.log(Biu.add(1,2), 'Biu'); // 3 Biu
六. 源码
前往查看源码,觉得有帮助反手给个star吧
_
参考资料:
- webpack中文网
- Babel中文网
- github仓库clean-webpack-plugin