webpack | 进阶用法 3：如果将代码打包成一个通用 JS 库。

梁龙先森

关注

发布于: 2021 年 02 月 02 日

需求：

需要打包压缩和非压缩两版本
支持 AMD/CJS/ESM 模块导入

1. 打包的库使用方式

ES module

import * as largeNumber from 'large-number.js'var v = largeNumber.add(1,1)

复制代码

CommonJS

var largeNumber = require('large-number.js')var v = largeNumber.add(1,1)

复制代码

require(['large-number.js'],function(largeNumber){  var v = largeNumber.add(1,1)})

复制代码

script 标签加载使用库

<script src="large-number.js"></script><script>	var v = largeNumber.add(1,1)</script>

复制代码

2. 构建配置

const TerserPlugin = require('terser-webpack-plugin')module.exports = {  mode:'production',	entry:{  	'math':'./src/index.js',    'math.min':'./src/index.js'  },  output:{  	filename:'[name].js',    library:'largeNumber', // 执行库的全局变量    libraryTarget:'umd',   // 支持库的引用方式    libraryExport:'default'  }，  optimization:{		minize:true,  	minimizer:[  		new TerserPlugin({ // 压缩打包				include:/\.min\.js$/,			})  	]	}}

复制代码

暴露库的方式有以下几种：

变量：作为一个全局变量，通过 script 标签来访问（libraryTarget:'var'）。
this：通过 this 对象访问（libraryTarget:'this'）。
window：通过 window 对象访问，在浏览器中（libraryTarget:'window'）。
UMD：在 AMD 或 CommonJS 的 require 之后可访问（libraryTarget:'umd'）。

如果设置了 library 但没设置 libraryTarget，则 libraryTarget 默认为 var.

3. 配置 package.json

包的引用入口文件，配置 package.json 的 main 字段为 index.js，并书写代码如下：

if(process.env.NODE_ENV === 'production'){  module.exports = require('./dist/large-number.min.js')}else{  module.exports = require('./dist/large-number.js')}

复制代码