Rollup 构建前端 UI 组件库

概要

在大型 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 简洁，配置起来更为简单：

js
// 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 文件。