概要
在大型 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:压缩代码;
- ···
其他工具
在 UI 组件库中,我们还会结合一些其他工具来规范项目,提高工作效率。以下是一些推荐:
- storybook:生成交互式的组件库文档;
- jest:跑 unit tests,可结合 @testing-library 使用;
- eslint:配合 eslint-config-airbnb 等工具,统一代码风格;
- husky:配置 git hooks 跑 eslint、unit tests 等;
- changesets:创建和管理 CHANGELOG 文件。
评论
发表评论