实现一个大整数加法库的打包
要求
- 需要打包压缩版本和非压缩版本
- 支持AMD/CJS/ESM 模块引入,也可以通过script标签引入
库的目录
截屏2020-03-25上午6.55.30.png
如何把库暴露出去
截屏2020-03-25上午6.57.13.png
- library是指定库的全局变量
- libraryTarget是支持库的引入方式
- libraryExport要设置成default,否则引入就要使用xx.default,这样比较不方便
正式操作
生成项目,安装webpack
npm init -y
npm i webpack webpack-cli -D
npm i terser-webpack-plugin -D
创建文件目录
截屏2020-03-25上午7.10.12.png
编写代码逻辑
function add(a, b) {
let i = a.length - 1;
let j = b.length - 1;
let carry = 0;
let ret = '';
while (i >= 0 || j >= 0) {
let x = 0;
let y = 0;
let sum;
if (i >= 0) {
x = a[i] - 0;
i--;
}
if (j >= 0) {
y = b[j] - 0;
j--;
}
sum = x + y + carry;
if (sum >= 10) {
carry = 1;
sum -= 10;
} else {
caryy = 0;
}
ret = sum + ret;
}
if (carry) {
ret = carry + ret;
}
return ret;
}
编写webpack.config.js
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
// 如果为production会默认启用TerserPlugin压缩
mode: "none",
entry: {
'large-number': './src/index.js',
'large-number.min': './src/index.js'
},
output: {
filename: '[name].js',
library: 'largeNumber',
libraryTarget: 'umd',
libraryExport: 'default'
},
optimization:{
minimize:true,
minimizer:[
new TerserPlugin({
include:/\.min\.js$/
})
]
}
}
在根目录上新建一个index.js,判断引入的包
截屏2020-03-25上午7.34.02.png
if (process.env.NODE_ENV = 'production') {
module.exports = require('./dist/large-number.min.js');
} else {
module.exports = require('./dist/large-number.js');
}
发布到npm
前提是你要有npm的账号,然后登陆
npm publish
