webpack 打包库和组件,npm 发布组件和库

webpack 除了可以用来打包应用，还可以用来打包 js 库

实现一个大整数加法库的打包

• 需要打包压缩版和非压缩版本

• 支持 AMD/CJS/ESM 模块引入

  要了解 AMD/CJD/ESM/CMD 可以看：

  • 前端模块化标准对比 iife amd cmd cjs umd es6
  • AMD/CMD/commonjs/ESM

  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

// webpack配置文件 根目录下:webpack.config.js
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$/
        })
        }
    }
};
//设置入口文件 根目录下：index.js
if ((process.env.NODE_ENV = "production")) {
    module.exports = require("./dist/large-number.min.js");
} else {
    module.exports = require("./dist/large-number.js");
}
//package.json
"scripts": {
    "prepublish": "webpack"
},

然后添加

npm publish