Rollup 插件入门教程：轻松配置和使用

本文介绍了Rollup插件的多种功能和用途，从代码转换到文件输出，帮助开发者更高效地处理JavaScript项目。文章详细讲解了如何安装和配置常用的Rollup插件，并提供了具体的配置示例和调试方法。通过使用Rollup插件，可以轻松实现复杂的模块打包需求。

Rollup 插件的作用和意义

Rollup 是一个用于 JavaScript 模块打包的工具，它能将复杂的模块结构打包成一个或多个小型化的文件。Rollup 插件是为 Rollup 提供额外功能的库或工具，它们可以用于代码转换、代码优化、代码拆分、文件输出等多种任务。通过使用插件，开发者能够更高效、更便捷地处理复杂的 JavaScript 项目。

常见的 Rollup 插件分类

Rollup 插件种类繁多，根据它们的功能和用途，可以大致分为以下几类：

1. 代码转换插件：这类插件主要用于将现代 JavaScript 代码转换成兼容性更好的旧版代码，例如 Babel 插件。
2. 代码优化插件：这类插件可以对 JavaScript 代码进行优化，如压缩代码、去除死代码等，例如 terser 插件。
3. 模块处理插件：这类插件主要用于处理模块化的代码，如 CommonJS、AMD 等，例如 commonjs 插件。
4. 文件输出插件：这类插件可以自定义输出文件的格式和位置，例如 node-resolve 插件。
5. 代码分析插件：这类插件可以分析代码，提供代码覆盖率、性能分析等功能，例如 rollup-plugin-coverage。

如何使用 npm 或 yarn 安装 Rollup 插件

在安装 Rollup 插件之前，需要确保已经安装了 Rollup 本身。可以通过以下命令安装 Rollup：

npm install --save-dev rollup
# 或者使用 yarn
yarn add --dev rollup

安装好 Rollup .之后，可以开始安装各种插件。以下是如何使用 npm 和 yarn 安装插件的示例：

# 使用 npm 安装插件
npm install --save-dev @rollup/plugin-node-resolve

# 使用 yarn 安装插件
yarn add --dev @rollup/plugin-node-resolve

常用的 Rollup 插件列表

以下是一些常用的 Rollup 插件，它们可以帮助你更好地处理 JavaScript 项目：

• @rollup/plugin-node-resolve：处理模块路径解析。
• @rollup/plugin-commonjs：将 CommonJS 模块转换为 ES 模块。
• @rollup/plugin-babel：使用 Babel 转换代码。
• rollup-plugin-terser：压缩和优化代码。
• @rollup/plugin-json：处理 JSON 文件。
• @rollup/plugin-replace：替换代码中的某些字符串。
• @rollup/plugin-typescript：处理 TypeScript 文件。
• @rollup/plugin-image：处理图像文件。

Rollup 配置文件的基本结构

Rollup 的配置文件通常是一个名为 rollup.config.js 的 JavaScript 文件，它定义了 Rollup 的输入、输出、外部依赖等配置信息。一个基本的 Rollup 配置文件结构如下：

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

export default {
  input: 'src/index.js', // 入口文件
  output: {
    file: 'dist/bundle.js', // 输出文件路径
    format: 'iife', // 输出格式
    sourcemap: true // 是否生成源映射文件
  },
  plugins: [
    resolve(), // 处理模块路径
    commonjs() // 处理 CommonJS 模块
  ],
  external: ['lodash'] // 外部依赖
};

如何在 Rollup 配置文件中添加插件

在 Rollup 的配置文件中，插件是通过 plugins 数组来添加的。每个插件通常需要调用其构建函数，并将需要的选项传递给它。以下是一个添加 @rollup/plugin-babel 插件的示例：

import babel from '@rollup/plugin-babel';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm',
    sourcemap: true
  },
  plugins: [
    resolve(),
    commonjs(),
    babel({
      babelrc: false,
      presets: ['@babel/preset-env'],
      plugins: ['@babel/plugin-transform-runtime']
    })
  ],
  external: ['lodash']
};

使用 commonjs 插件处理模块化代码

@rollup/plugin-commonjs 插件可以将 CommonJS 模块转换为 ES 模块。以下是配置文件示例：

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

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm',
    sourcemap: true
  },
  plugins: [
    resolve(),
    commonjs({
      include: /node_modules\/(.*)\.js$/
    })
  ],
  external: ['lodash']
};

如何查看 Rollup 插件错误信息

当你在使用 Rollup 插件时，如果发生错误，Rollup 通常会输出详细的错误信息。这些错误信息通常会包含错误的类型、错误的所在文件、错误发生的行号等信息。你可以在终端或命令行工具中查看这些错误信息。

常见错误及解决方法

1. 插件未正确安装

   错误信息： Error: Plugin "@rollup/plugin-node-resolve" is not available.

   解决方法： 确保插件已正确安装。使用 npm install 或 yarn add 命令安装插件。

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

2. 配置文件语法错误

   错误信息： SyntaxError: Unexpected token

   解决方法： 检查配置文件的语法是否正确。确保没有语法错误，例如缺少逗号、花括号等。

   import resolve from '@rollup/plugin-node-resolve';
   
   export default {
    input: 'src/index.js',
    output: {
      file: 'dist/bundle.js',
      format: 'esm',
      sourcemap: true
    },
    plugins: [
      resolve()
    ],
    external: ['lodash']
   };

3. 输出文件格式不匹配

   错误信息： TypeError: Cannot read property 'length' of undefined

   解决方法： 确保输出文件的格式与配置文件中的 format 字段匹配。例如，如果你指定输出格式为 iife，则输出的文件将是一个立即执行的函数表达式。

   export default {
    input: 'src/index.js',
    output: {
      file: 'dist/bundle.js',
      format: 'iife',
      sourcemap: true
    },
    plugins: [
      resolve()
    ],
    external: ['lodash']
   };

4. 外部依赖未正确配置

   错误信息： Error: Could not resolve dependency

   解决方法： 确保外部依赖已正确配置。将依赖项添加到 external 数组中。

   export default {
    input: 'src/index.js',
    output: {
      file: 'dist/bundle.js',
      format: 'esm',
      sourcemap: true
    },
    plugins: [
      resolve()
    ],
    external: ['lodash']
   };

5. 模块路径解析错误

   错误信息： Error: Could not resolve entry from 'src/index.js'

   解决方法： 确保模块路径解析正确。使用 @rollup/plugin-node-resolve 插件来处理模块路径。

   import resolve from '@rollup/plugin-node-resolve';
   
   export default {
    input: 'src/index.js',
    output: {
      file: 'dist/bundle.js',
      format: 'esm',
      sourcemap: true
    },
    plugins: [
      resolve({
        preferBuiltins: true
      })
    ],
    external: ['lodash']
   };