5-1 library 的打包
5-1 library 的打包
1. 简介
我们开发一个库，供别人使用 npm 下载使用时，为了保证兼容性和体积，应该将其打包。本节介绍如何打包一个库进行发布。
2. 初始化项目
首先，我们新建一个目录，叫 library-demo，进入该目录，运行命令：
npm init -y这样我们就初始化了一个项目，并为其自动创建了一个 package.json 如下：
{
"name": "library-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}这个package.json 很简单，介绍了一些项目信息，以及入口文件。
3. 实现库逻辑
我们实现以下库逻辑，新建目录 src， 然后在其下新建三个文件：
// math.js
export const add = (a, b) => a + b;
export const minus = (a, b) => a - b;// string.js
export const join = (a, b) => a + ' ' + b;// index.js
import * as math from './math';
import * as string from './string';
export default {
math,
string
}4. 使用 webpack 进行打包
首先，安装 webpack，如下：
npm i webpack webpack-cli -D然后新建一个配置文件：
// webpack.config.js
const path = require('path');
module.exports= {
mode: 'production',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'library-demo.js'
}
};修改 package.json 如下部分：
"main": "dist/index.js",
"scripts": {
"build": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},然后运行打包命令如下：
npm run build
image.png
5. umd
库文件打包后，使用者在引入时，可能有多种方法，比如 amd，cmd，commonjs，甚至是直接使用 script 引入。所以我们可以将库导出为一个 umd 模块，支持以上所有的使用场景，如下：
library: "libraryDemo", // the name of the exported library
libraryTarget: "umd", // universal module definition6. externals
假设我们开发的库文件中本身引用了一个三方库，如下：
// string.js
import _ from 'lodash'
export const join = (a, b) => _.join([a, b], ' ');我们安装 loadash 后打包：
npm i lodash -S
image.png
可以看到 lodash 被打入进来，大大增加了包体，且拖慢了打包速度。lodash 这类三方库其实一般都很稳定，可以单独拿出来加载并缓存。如下：
externals: {
_: 'lodash'
}打包后，发现没有引入 lodash，包体大大减小：
image.png
用户使用的时候需要自己手动引入 lodash。
7. 发布
发布前我们首先需要注册一个 npm 账号，https://www.npmjs.com/ 然后使用 npm adduser 或者 npm login 来登录，记得在此之前将 npm 的源切换到 npm 而不是 cnpm 或者其他源，除非你本意是在其他源上进行发布。 然后 npm publish 发布即可。
参考
https://webpack.js.org/configuration/ 可能是最详细的UMD模块入门指南 JS通用模块模式 UMD 模块化之AMD、CMD、UMD、commonJS webpack 的externals配置 https://webpack.js.org/configuration/externals/