概要
在大型 Web 前端项目中，构建独立的 UI 组件库能提高代码的可复用性、可维护性，提高团队协作效率。
本文对 Rollup 构建组件库进行概括总结，不涉及具体实施。
前端打包工具概况
在前端工程化中，打包工具是最基础、最常用的工具。
下面是几个较为流行的打包工具对比：
| Webpack | Parcel | Rollup | |
|---|---|---|---|
| 优势 | 高度可扩展，社区生态完善，适用于大型 Web 前端项目 | 轻量级和零配置，适合快速启动一个 Web 前端项目 | 对 tree-shaking，code splitting 有很好的支持，更为轻量，适合构建组件库 |
| 缺点 | 配置较为复杂 | 有限的扩展性 | 原生不支持HMR |
对比可看出，Rollup 更适合构建组件库。
使用 Rollup
配置
通常，使用 Rollup 的步骤为：
- 安装 Rollup 依赖；
- 配置 Rollup config；
- 构建；
- 发布到 NPM 仓库。
关于 Rollup 的配置，参考 Rollup Tutorial 。
Rollup config 文件相较于 Webpack 简洁，配置起来更为简单：
// rollup.config.js
export default {
input: [
// 入口文件
],
output: {
// 输出配置
},
plugins: [
// 插件配置
],
external: [
// 外部依赖声明，声明项将不会被打包。
],
};
利用好插件
通过 Rollup 丰富的插件，可以使组件构建更轻松。
常用的插件如：
@rollup/plugin-node-resolve：用于解析第三方模块；@rollup/plugin-commonjs：将 CommonJS 模块转换为 ES6 模块；rollup-plugin-terser：压缩代码；- ···
基于不同项目需求，选择合适的插件即可，参考 Rollup Plugins。
其他工具
在 UI 组件库中，我们还会结合一些其他工具来规范项目，提高工作效率。以下是一些推荐：
storybook：生成交互式的组件库文档；jest：跑 unit tests，可结合@testing-library使用；eslint：配合eslint-config-airbnb等工具，统一代码风格；husky：配置 git hooks 跑 eslint、unit tests 等；changesets：创建和管理 CHANGELOG 文件。
