Rollup 如何搭建高效的公共组件库

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 插件来可视化打包结果，帮助识别和优化包体积。

发布

1. 准备 package.json：确保 package.json 包含适当的 main 和 module 字段，指向构建输出的文件。

2. 发布到 npm：登录 npm 账户并发布：

"main": "dist/index.cjs.js",
"module": "dist/index.esm.js",

npm login
npm publish