前端组件库开发之Rollup：从入门到发布

2023-11-24 23:08:29

Rollup简介及优势

Rollup是一款模块打包器，尤其适用于JavaScript ES6模块。与Webpack或Parcel相比，Rollup专注于模块转换和优化，这使得它在构建前端组件库时具有明显的优势：更小的体积、更好的性能以及更为简洁清晰的代码结构。

安装与初始化项目

开发前端组件库的第一步是创建一个空的npm项目，并安装必要的依赖。打开命令行工具，在项目的根目录下执行以下命令：

mkdir my-component-library
cd my-component-library
npm init -y

接着，安装Rollup及其插件，用于构建和优化代码。

npm install --save-dev rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs

Rollup配置文件

创建一个名为rollup.config.js的配置文件，并在其中设置基本的Rollup配置。此配置将指定入口文件、输出格式以及使用的插件。

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'src/index.js', // 指定源代码的入口点
  output: {
    file: 'dist/bundle.js', // 输出文件位置
    format: 'esm',          // 模块格式，可以是umd、cjs等
  },
  plugins: [
    resolve(),   // 解析非ES6模块（如node_modules中的库）
    commonjs()   // 将CommonJS代码转换为ES6模块
  ]
};

开发组件

在src/目录下开始编写组件。这里以一个简单的按钮组件为例，创建一个名为Button.js的文件。

export default function Button({ text }) {
  return `
    <button>${text}</button>
  `;
}

确保在入口文件index.js中导出这个组件：

import Button from './Button';

export { Button };

构建与打包

使用Rollup将源代码转换为浏览器可以使用的格式，执行以下命令即可完成构建过程。

npx rollup -c

这会根据rollup.config.js中的配置生成一个位于dist/bundle.js的文件。该文件包含了所有的组件和依赖，并且优化了输出以确保最佳性能。

测试

在发布前，需要对构建好的组件进行测试。可以使用Jest或Mocha等工具来编写测试用例。例如：

npm install --save-dev jest

配置package.json文件，在scripts中添加一条测试命令：

"scripts": {
  "test": "jest"
}

然后在项目根目录下创建一个名为__tests__/Button.test.js的测试文件，内容如下：

import { Button } from '../src/index';

test('renders correctly', () => {
  expect(Button({ text: 'Click Me' })).toBe('<button>Click Me</button>');
});

执行测试命令以验证组件功能。