Rollup 作为一个高效的 JavaScript 模块打包器,为构建组件库提供了极大的便利。本文将给大家详细介绍如何使用 Rollup 搭建一个公共组件库,包括从配置到优化的全过程。
为什么选择Rollup?
Rollup 是一个 JavaScript 模块打包工具,特别适用于构建库和组件。与 Webpack 等工具相比,Rollup 的核心优势在于其对 ES6 模块的支持,以及更小的输出文件体积和更快的构建速度。这使得 Rollup 成为构建组件库的理想选择。
搭建公共组件库的步骤
1. 初始化项目
首先,创建一个新的项目文件夹,并初始化一个 npm 项目:
mkdir my-component-library
cd my-component-library
npm init -y
安装需要的开发依赖
npm install --save-dev rollup rollup-plugin-peer-deps-external rollup-plugin-commonjs rollup-plugin-node-resolve rollup-plugin-terser @rollup/plugin-typescript typescript
rollup-plugin-peer-deps-external
:自动将 peer 依赖排除在打包外,以避免重复安装。rollup-plugin-commonjs
和rollup-plugin-node-resolve
:使 Rollup 能够处理 CommonJS 模块和 Node.js 核心模块。rollup-plugin-terser
:压缩代码以减小输出体积。@rollup/plugin-typescript
:支持 TypeScript 文件的编译。typescript
:TypeScript 编译器。
2. 配置 Rollup
在项目根目录下创建一个 rollup.config.js
文件,添加如下基本配置:
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';
import typescript from '@rollup/plugin-typescript';
import { terser } from 'rollup-plugin-terser';
export default {
input: 'src/index.ts', // 组件库的入口文件
output: [
{
format: 'cjs',
file: 'dist/index.cjs.js', // CommonJS 格式
},
{
format: 'esm',
file: 'dist/index.esm.js', // ES Module 格式
},
],
plugins: [
peerDepsExternal(),
resolve(),
commonjs(),
typescript({ tsconfig: './tsconfig.json' }),
terser(),
],
};
3. 配置 TypeScript
创建一个 tsconfig.json
文件,配置 TypeScript 编译选项:
{
"compilerOptions": {
"target": "es5",
"module": "es6",
"declaration": true,
"outDir": "./dist",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true
},
"include": ["src/**/*"],
"exclude": ["node_modules"]
}
4. 构建组件库
在 package.json
中添加构建脚本:
"scripts": {
"build": "rollup -c"
}
运行构建命令:
npm run build
构建完成后,你会在 dist
目录中看到 index.cjs.js
和 index.esm.js
文件,它们分别是 CommonJS 和 ES Module 格式的打包文件。
优化与发布
优化
- 代码分割:可以通过 Rollup 插件进行代码分割,以进一步优化构建输出。
- 性能监控:使用
rollup-plugin-visualizer
插件来可视化打包结果,帮助识别和优化包体积。
发布
-
准备
package.json
:确保package.json
包含适当的main
和module
字段,指向构建输出的文件。 -
发布到 npm:登录 npm 账户并发布:
"main": "dist/index.cjs.js",
"module": "dist/index.esm.js",
npm login
npm publish