webpack 打包库和组件,npm
发布组件和库
webpack 除了可以用来打包应用,还可以用来打包 js 库
实现一个大整数加法库的打包
-
需要打包压缩版和非压缩版本
-
支持 AMD/CJS/ESM 模块引入
要了解 AMD/CJD/ESM/CMD
可以看:
modules in browsers
-
支持 ES module
import * as largeNumber from "large-number";
largeNumber.add("999", "1");
-
支持 CJS
const largeNumber = require("large-number");
largeNumber.add("999", "1");
-
支持 AMD
require(["large-number"], function(largeNumber) {
largeNumber.add("999", "1");
});
-
可以直接通过 script 引入
<script src="https://unpkg.com/large-number"></script>
<script>
largeNumber.add("999", "1");
window.largeNumber.add("999", "1");
</script>
-
如何将库暴露出去?
sudo npm i webpack webpack-cli -D --unsafe-perm
sudo npm i terser-webpack-plugin -D
const TerserPlugin=require('terser-webpack-plugin');
module.exports = {
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$/
})
}
}
};
if ((process.env.NODE_ENV = "production")) {
module.exports = require("./dist/large-number.min.js");
} else {
module.exports = require("./dist/large-number.js");
}
"scripts": {
"prepublish": "webpack"
},
然后添加
npm publish