Webpack系列——库的打包

webpack 除了能够打包项目应用以外，还可以用来打包 JS 库。

当其他人安装我们的库时，他们可能会在不同的环境中去引入，例如：

import lib from 'lib' // ESM 的引入方式
​
const lib = require('lib') // CommonJS 的引入方式
​
require(['lib'], function () {})  // AMD 的引入方式

二、步骤

2.1 库代码

假设设计了一个这样一个简单的库：

// math.js
const add = function (a, b) {
    return a + b;
}
export { add };
​
// string.js
import _ from 'lodash';
const join = function (a, b) {
    return _.join([a, b], ' ');
}
export { join };

注意：第二个函数用到了外部的库 —— lodash。

在 index.js 中统一引入导出：

// index.js
import * as math from './math';
import * as string from './string';
​
export { math, string }

2.2 配置

webpack.config.js 文件进行配置：

const path = require('path');
​
module.exports = {
    mode: 'production',
    entry: './src/index.js',
    externals: ['lodash'],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'library.js',
        library: 'library',
        libraryTarget: 'umd'
    }
    // ...
}

注意：

1. externals 可以将添加一些不想被webapck打包输出的文件，例如上面的 lodash 库在 string.js 中被引入，如果每次都吧它打包出去，打包文件的体积就会显得非常臃肿，且也不能保证用户是否在引入这个库之外，是否又有单独的引入 lodash 库，设置 external 后，打包时 lodash 不会被包含，用户使用我们这个库前需先引入 lodash 库。

2. output.library这个选项是专门用于库的设置的，可以设置名称name，此项设置后，如果用户是使用<script>标签脚本式引入时，可以通过该变量名进行使用

3. output.libraryTarget这个选项用于设置库的环境类型type，这个环境类型是指未来当前这个库可以以何种方式被使用（如ESM、CommonJS、AMD等），'var', 'module', 'assign', 'assign-properties', 'this', 'window', 'self', 'global', 'commonjs', 'commonjs2', 'commonjs-module', 'amd', 'amd-require', 'umd', 'umd2', 'jsonp' and 'system'，这里我们设置 'umd' 就可以了，代表通用。

2.3 主文件位置设置

package.json

{
    ...
    "main": "./dist/library.js"
    ...
}

main:以后我们安装这个库时，引用的位置

2.4 发布到npm社区

1.npm 官网注册账号

2.项目命令行 npm adduser添加账号信息

npm login命令进行账号登录，npm logout账号退出

3.npm public发布

教程可参考：NPM 入门使用 - 掘金