-
webpack 打包库和组件
webpack 除了可以用来打包应用,还可以用来打包 js 库
-
需要打包压缩版和非压缩版本
-
支持 AMD/CJS/ESM 模块引入
要了解 AMD/CJD/ESM/CMD 可以看:
-
支持 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
-
large-number-fangcao
1.0.0 • Public • PublishedReadme
Keywords
nonePackage Sidebar
Install
npm i large-number-fangcao
Weekly Downloads
1
Version
1.0.0
License
ISC
Unpacked Size
5.45 kB
Total Files
6