NPM 组件你应该知道的事

亦凉 2022-12-11 09:25 361阅读 0赞

开发一个 npm 组件， 你是否了解需要对外导出什么格式的代码？如何让 npm 组件体积尽可能小？

整篇文章按照如下目录进行讲解：

*  为何需要打包
 *  组件打包输出格式
 *  如何打包 esm 模式代码（感兴趣选读）
 *  减少组件打包体积的最佳实践

## 为何需要打包 ##

首先，这里的打包概念解释一下， 只要有输出到新目录，就称为打包（免得大家对打包理解概念不一致）。

*  一份代码，多种消费方式
 *  使用新特性语法，由于一般项目中，会默认不对 node\_module 中的库进行编译以提高整个项目的编译速度，所以作为 npm 包，要转换成 es5 ，免得消费方吐槽……

## 打包格式 ##

按照目前主流的模块系统来区分，可以先看一张图片宏观了解一下：![format_png][]

### esm ###

如果是用 npm 组件来使用， 都推荐使用这种导出模式。

##### 产生方式： #####

*  rollup 声明 target 为 esm 或者 babel 编译之后生成一个新的目录 （iceworks 的做法）
 *  package.json 中声明 module，指向 esm

##### 使用方式： #####

*  浏览器通过 `<script type="module" />` 引入
 *  作为 npm 使用

##### 特性 #####

由于是静态的，所以可以使用 tree-shaking

### umd ###

##### 使用方式 #####

*  浏览器通过 `<script />` 引入
 *  浏览器通过 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

![format_png 1][]

jsx.png

*  使用 babel-plugin-import 处理第三方依赖的组件库，且兼容没有 es 模块的第三方组件

![format_png 2][]

ba.png

*  将 ts 解析生成 d.ts 文件

![format_png 3][] d.png

*  bable 7 （@babel/preset-env ），若为 esm 模块， 则关闭 module 选项

![format_png 4][]

![format_png 5][]

其实它实现的很简单， 如果是 es 模块， 只是用 babel 将对应的 es6 语法编译成 es5 语法（且不选择modlue）， 然后 copy 到新目录 es 下， 对于里面使用到的第三方依赖组件， 用 babel-plugin-import 做一下兼容处理。

## 组件打包体积的最佳实践 ##

首先，尽可能提供 esm 的格式， 因为它可以走 tree-shaking ，摇掉不必要的文件。【webpack 只要开启 production 模式，就默认有 tree-shaking 功能】

#### tree-shaking ####

![format_png 6][] tree.png

##### 定义 #####

如果被标记为无副作用的模块没有被直接导出使用，打包工具会跳过进行模块的副作用分析评估。由此安全地删除文件中未使用的部分。

在打包阶段，webpack无法准确判断某个文件是否有副作用，所以默认认为所有文件都是有副作用的。也就是说这里sideEffects默认是true。

> 副作用：一个函数会、或者可能会对函数外部变量产生影响的行为。

*  模块作用域

将package.json 中sideEffects 设置为 false ，则表示改模块全部忽略副作用

*  局部文件

package.json 中 sideEffects 数组写对应文件，比如常见的写上 css 文件， 如 antd 的配置![format_png 7][]

*  函数级别

`/*@__PURE__*/` 声明函数无副作用

**只要我们基本保证这个组件包没有对外部对象产生影响，就能设置 sideEffects: false 了**

举个栗子：设置了 sideEffects: false 和 未设置 sideEffects: false 的情况如下， 可以看到体积确实减少了不少

![format_png 8][]

![format_png 9][]

image.png

更深入的 sideEffect 可以看看这篇文章\[2\]：

#### peerDependency ####

对于消费方可能也用到的组件，写到 peerDependency 中。看下面一张图就可以理解。这样可以减少重复打包。![format_png 10][]

举一个栗子：

"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 剔除对应依赖。

### 参考资料 ###

\[1\]

源码地址: *https://github.com/ice-lab/iceworks*

\[2\]

文章: *https://zhuanlan.zhihu.com/p/40052192*

## 关于奇舞周刊 ##

《奇舞周刊》是360公司专业前端团队「奇舞团」运营的前端技术社区。关注公众号后，直接发送链接到后台即可给我们投稿。

![format_png 11][]

[format_png]: /images/20221123/b7b06d644b504a14b40035a03db2f80d.png
[format_png 1]: /images/20221123/6c3276c6e5054174bcf9fb17404cd41c.png
[format_png 2]: /images/20221123/57ac73fb773f4e3d9faf9cadaf60120a.png
[format_png 3]: /images/20221123/cd664a09c6bf4d24acceb359fc1c84fe.png
[format_png 4]: /images/20221123/6cdefb75d59a47b89274798695d0baef.png
[format_png 5]: /images/20221123/691f99e445864900980661d4adbf2fd6.png
[format_png 6]: /images/20221123/f5f8df71190243c5b3518d89c2af00a5.png
[format_png 7]: /images/20221123/e9f87ee71638408da3c1076774540988.png
[format_png 8]: /images/20221123/73bf9fdf852147f19d97920ae5055416.png
[format_png 9]: /images/20221123/c98d2b7fd5544788af6cba550356ae81.png
[format_png 10]: /images/20221123/0236a5a9cfc243b2af0be7be0d170ae3.png
[format_png 11]: /images/20221123/528d14cab4c74ac182d8ed6e7df27d61.png