Rollup 中如何配置 plugins 选项？

推荐答案

在 Rollup 中配置 plugins 选项时，通常需要在 rollup.config.js 文件中进行设置。以下是一个基本的配置示例：

// www.javascriptcn.com code example
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';

export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs'
  },
  plugins: [
    resolve(),  // 解析 node_modules 中的模块
    commonjs(), // 将 CommonJS 模块转换为 ES6 模块
    babel({     // 使用 Babel 转换代码
      exclude: 'node_modules/**', // 排除 node_modules 目录
      presets: ['@babel/preset-env']
    })
  ]
};

在这个配置中，plugins 选项是一个数组，包含了多个插件。每个插件都是一个函数调用，通常是从某个插件包中导入的。

本题详细解读

1. 插件的作用

Rollup 插件用于扩展 Rollup 的功能。常见的插件包括：

• @rollup/plugin-node-resolve: 用于解析 node_modules 中的模块。
• @rollup/plugin-commonjs: 将 CommonJS 模块转换为 ES6 模块，以便 Rollup 可以处理。
• @rollup/plugin-babel: 使用 Babel 转换代码，通常用于将 ES6+ 代码转换为兼容性更好的 ES5 代码。

2. 插件的配置

每个插件都可以接受一个配置对象作为参数。例如，@rollup/plugin-babel 插件可以配置 exclude 选项来排除某些文件或目录，以及 presets 选项来指定 Babel 的预设。

3. 插件的顺序

插件的顺序非常重要，因为它们会按照数组中的顺序依次执行。例如，通常需要先使用 @rollup/plugin-node-resolve 解析模块，然后再使用 @rollup/plugin-commonjs 转换模块格式。

4. 自定义插件

除了使用现有的插件，你还可以编写自定义插件。自定义插件是一个函数，接收一个选项对象作为参数，并返回一个插件对象。插件对象通常包含 name 属性和一些生命周期钩子函数，如 transform、buildStart 等。

// www.javascriptcn.com code example
export default function myPlugin(options = {}) {
  return {
    name: 'my-plugin',
    transform(code, id) {
      // 自定义转换逻辑
      return code.replace(/foo/g, 'bar');
    }
  };
}

5. 插件的安装

大多数 Rollup 插件都可以通过 npm 安装。例如：

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

安装完成后，可以在 rollup.config.js 中导入并使用这些插件。