Rollup 打造 React 组件，一文解锁核心诀窍

Rollup 是一个 JavaScript 模块打包器，它可以帮助开发者将多个 JavaScript 模块打包成一个或多个文件，以便在 Web 浏览器或 Node.js 中使用。Rollup 对于打包 React UI 组件非常有用，因为它可以将组件及其依赖项打包成一个单独的文件，从而可以轻松地将其包含在其他项目中。

依赖项配置

要使用 Rollup 打包 React 组件，你需要安装以下依赖项：

npm install --save-dev rollup rollup-plugin-commonjs rollup-plugin-node-resolve rollup-plugin-babel

Rollup 配置

接下来，你需要创建一个 Rollup 配置文件。此文件告诉 Rollup 如何打包组件。以下是一个示例配置文件：

import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import nodeResolve from 'rollup-plugin-node-resolve';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/index.js',
    format: 'umd',
    name: 'IconSelect',
  },
  plugins: [
    nodeResolve(),
    commonjs(),
    babel({
      exclude: 'node_modules/**',
      presets: ['@babel/preset-react'],
    }),
  ],
};

此配置告诉 Rollup 从 src/index.js 文件中获取输入，并将输出打包成 dist/index.js 文件。它还指定输出格式为 UMD（通用模块定义），并为组件指定名称 IconSelect。

脚本

最后，你需要创建一个脚本来运行 Rollup。以下是一个示例脚本：

npm run build:rollup

此脚本将运行 Rollup 并生成打包后的组件。

实战范例：IconSelect 组件

现在，让我们通过一个实际范例来了解如何使用 Rollup 打包 React 组件。我们将使用一个名为 IconSelect 的组件，该组件允许用户从一组图标中选择一个图标。

安装依赖项

npm install --save react react-dom

创建组件

在 src 目录中创建一个名为 IconSelect.js 的文件，并添加以下代码：

import React from 'react';

const IconSelect = ({ options, onChange }) => {
  return (
    <select onChange={e => onChange(e.target.value)}>
      {options.map(option => (
        <option key={option.value} value={option.value}>
          {option.label}
        </option>
      ))}
    </select>
  );
};

export default IconSelect;

打包组件

在 package.json 文件中添加以下脚本：

"scripts": {
  "build:rollup": "rollup -c"
}

运行以下命令来打包组件：

npm run build:rollup

这将生成一个名为 dist/index.js 的打包文件。

结论

通过使用 Rollup 打包 React UI 组件，你可以轻松地将其包含在其他项目中。通过遵循本文中概述的步骤，你可以配置 Rollup 并创建自己的可复用组件。