NPM 组件你应该知道的事
共 3073字，需浏览 7分钟
· 2020-09-27
开发一个 npm 组件， 你是否了解需要对外导出什么格式的代码？如何让 npm 组件体积尽可能小？
整篇文章按照如下目录进行讲解：
为何需要打包 组件打包输出格式 如何打包 esm 模式代码（感兴趣选读） 减少组件打包体积的最佳实践
为何需要打包
首先，这里的打包概念解释一下， 只要有输出到新目录，就称为打包（免得大家对打包理解概念不一致）。
一份代码，多种消费方式 使用新特性语法，由于一般项目中，会默认不对 node_module 中的库进行编译以提高整个项目的编译速度，所以作为 npm 包，要转换成 es5 ，免得消费方吐槽……
打包格式
按照目前主流的模块系统来区分，可以先看一张图片宏观了解一下：
esm
如果是用 npm 组件来使用， 都推荐使用这种导出模式。
产生方式：
rollup 声明 target 为 esm 或者 babel 编译之后生成一个新的目录 （iceworks 的做法） package.json 中声明 module，指向 esm
使用方式：
浏览器通过 引入作为 npm 使用
特性
由于是静态的，所以可以使用 tree-shaking
umd
使用方式
浏览器通过 引入浏览器通过 requirejs 或 seajs 引入 【目前这个已经很少使用了】
如何产生
rollup 或者 webpack 声明 target 为 umd package.json 中声明 unpkg，指向对应文件
commonjs
使用方式
node 端， npm 方式
如何产生
rollup 或者 webpack 声明 target 为 commonjs package.json 中声明 main，指向对应文件 。
package.json 中引用优先级如下：target 为 web 时， 依次查找 browser、module 和 main。其他 target ， 依次找 module 和 main。因此如果声明了 module， 会优先读取 module 中的路径。
因此， 在导出的时候，同时设置好 main 和 module 字段，这样就可以二者兼具了，在node端，浏览器端都可以正常使用。
webpack 如何打包 esm 模式
这里不讲 rollup ， 毕竟写一个 target 就可以解决了。
大家都知道，webpack 的 target 没有支持 esm 模式， 而 rollup 提供了， 为此很多人也在吐槽，为什么 webpack 不做……
我们这使用的是 iceworks ， 源码地址[1]，它默认支持导出 esm 模式， 那就一起看看它的源码是怎么做的。它是用 build-plugin-component 这个来实现的。【贴部分源码，感兴趣的可以看看】
如果不是 jsx 或 tsx 文件， 则直接 copy 到目标目录，否则经过 bable 处理， 并将后缀改成 js
使用 babel-plugin-import 处理第三方依赖的组件库，且兼容没有 es 模块的第三方组件
将 ts 解析生成 d.ts 文件
bable 7 （@babel/preset-env ），若为 esm 模块， 则关闭 module 选项
其实它实现的很简单， 如果是 es 模块， 只是用 babel 将对应的 es6 语法编译成 es5 语法（且不选择modlue）， 然后 copy 到新目录 es 下， 对于里面使用到的第三方依赖组件， 用 babel-plugin-import 做一下兼容处理。
组件打包体积的最佳实践
首先，尽可能提供 esm 的格式， 因为它可以走 tree-shaking ，摇掉不必要的文件。【webpack 只要开启 production 模式，就默认有 tree-shaking 功能】
tree-shaking
定义
如果被标记为无副作用的模块没有被直接导出使用，打包工具会跳过进行模块的副作用分析评估。由此安全地删除文件中未使用的部分。
在打包阶段，webpack无法准确判断某个文件是否有副作用，所以默认认为所有文件都是有副作用的。也就是说这里sideEffects默认是true。
副作用：一个函数会、或者可能会对函数外部变量产生影响的行为。
模块作用域
将package.json 中sideEffects 设置为 false ，则表示改模块全部忽略副作用
局部文件
package.json 中 sideEffects 数组写对应文件，比如常见的写上 css 文件， 如 antd 的配置
函数级别
/*@__PURE__*/ 声明函数无副作用
只要我们基本保证这个组件包没有对外部对象产生影响，就能设置 sideEffects: false 了
举个栗子：设置了 sideEffects: false 和 未设置 sideEffects: false 的情况如下， 可以看到体积确实减少了不少
更深入的 sideEffect 可以看看这篇文章[2]：
peerDependency
对于消费方可能也用到的组件，写到 peerDependency 中。看下面一张图就可以理解。这样可以减少重复打包。
举一个栗子：
"peerDependencies": {
"react": ">=16.12.0",
"react-dom": ">=16.12.0"
}
如上的配置，可以让组件库下的 node_modules 不安装 react，同时指定组件库使用方需安装的 react/reactDOM 的版本。
external
对于打包成 umd 的文件，由于它无法分析是否存在 peerDependencies， 所以如果使用方已有 react、 react-dom 等库，需要在webpack打包时，将 external 剔除掉对应依赖。
wepack5 模块联邦
external 还是静态的，如果项目支持， 还可以使用 wepack5 Module Federation 方式，由使用方动态决定是否下载依赖。
总结
1. 对外提供组件时，同时提供 esm ，commonjs， umd 这3种方式，并且在package 中对应的字段进行声明，以确保这个包可以兼容多环境。
2. 尽可能提供 esm 模式，并且如果这个组件没有影响外部变量时，设置 sideEffect 为 false， 让使用方可以最大的 tree-shaking 。对于公用的依赖包，将其写入 peerDependencies 中。
3. 若要提供 umd 模式， 在打包时， 将对应公用依赖写入 external 剔除对应依赖。
参考资料
源码地址: https://github.com/ice-lab/iceworks
[2]文章: https://zhuanlan.zhihu.com/p/40052192
推荐阅读
2、你不知道的 TypeScript 泛型（万字长文，建议收藏）
3、尤大 3 天前发在 GitHub 上的 vue-lit 是啥？
如果觉得文章不错，帮忙点个在看呗