Rollup 插件入门：新手必读教程-原创手记-慕课网

概述

本文介绍了Rollup插件入门，包括Rollup的基本概念、主要功能和用途，以及如何安装和配置Rollup。此外，文章详细讲解了如何使用一些常用的Rollup插件，帮助开发者更好地进行模块打包和代码优化。

Rollup 概述

Rollup 是什么

Rollup 是一个 JavaScript 模块打包器，它能够将多个小模块组合成一个大的模块，以减少文件数量和加载时间。Rollup 通过静态分析模块，将它们打包成一个或多个文件，并优化这些文件的大小和加载顺序。

Rollup 的主要功能和用途

Rollup 的主要功能包括：

模块打包：将多个模块打包成一个文件或多个文件。
模块解析：解析导入和导出语句，根据它们生成一个依赖图。
代码分割：将代码分割成多个文件，以提高加载速度。
代码优化：通过压缩和混淆代码，减少文件大小。
环境适配：生成适合不同环境（如浏览器、Node.js）的代码。

Rollup 的用途包括：

前端开发：在前端项目中，可以将多个 JS 文件打包成一个，减少 HTTP 请求。
库开发：将库代码打包成适合不同环境的格式，方便其他开发者使用。
动态导入：支持动态导入，提高代码的灵活性和性能。
环境适配：生成适合不同环境的代码，如浏览器环境和 Node.js 环境。

为什么需要 Rollup

在现代前端开发中，模块化已经成为一种标准。通过将代码拆分成多个小模块，可以提高代码的可维护性和复用性。然而，当这些模块在生产环境中使用时，需要将它们打包成一个文件，以减少 HTTP 请求和加载时间。Rollup 正是为了解决这些问题而设计的。

模块打包的好处

减少 HTTP 请求：将多个模块打包成一个文件可以减少 HTTP 请求，提高页面加载速度。
优化加载顺序：通过静态分析依赖关系，优化文件的加载顺序，减少加载时间。
代码压缩：通过压缩代码，减少文件大小，进一步提高加载速度。
环境适配：生成适合不同环境的代码，如浏览器环境和 Node.js 环境。

安装 Rollup

使用 npm 或 yarn 安装 Rollup

安装 Rollup 可以通过 npm 或 yarn 进行。以下是安装步骤：

使用 npm 安装

npm install --save-dev rollup

使用 yarn 安装

yarn add rollup --dev

验证安装是否成功

安装完成后，可以通过以下命令检查 Rollup 是否安装成功：

rollup -v

如果安装成功，会显示 Rollup 的版本信息。

配置 Rollup

创建 Rollup 配置文件

Rollup 默认使用 rollup.config.js 文件作为配置文件。你可以通过以下步骤创建该文件：

在项目根目录下创建 rollup.config.js 文件。
在该文件中编写配置选项。

下面是一个简单的配置示例：

// rollup.config.js
import { fileURLToPath, URL } from 'node:url';

export default {
  input: 'src/main.js', // 入口文件
  output: {
    dir: 'dist', // 输出目录
    format: 'esm', // 输出格式，如 'esm' 或 'cjs'
  },
  plugins: [], // 插件配置
};

基本的配置选项解释

Rollup 的配置文件包含多个选项，每个选项都有其特定的作用：

input：指定入口文件，即包含 import 和 export 语句的文件。
output：指定输出配置：
- dir：指定输出目录。
- format：指定输出格式，如 esm（ES 模块格式）或 cjs（CommonJS 格式）。
plugins：指定使用插件，插件可以扩展 Rollup 的功能。

插件简介及其作用

Rollup 插件可以扩展 Rollup 的功能，例如处理不同类型的文件、转换代码等。以下是一些常用的 Rollup 插件：

@rollup/plugin-node-resolve：解析 Node.js 模块，允许你导入非 JS 文件，如 .cjs、.mjs、.json、.node。
@rollup/plugin-commonjs：将 CommonJS 模块转换为 ES 模块。
@rollup/plugin-babel：将 ES6+ 代码转换为 ES5 代码。
@rollup/plugin-terser：压缩和优化代码。

插件的具体配置

下面是一个使用 @rollup/plugin-babel 插件的示例：

安装插件：

npm install --save-dev @rollup/plugin-babel @babel/core @babel/preset-env

配置插件：

// rollup.config.js
import babel from '@rollup/plugin-babel';

export default {
  input: 'src/main.js',
  output: {
    dir: 'dist',
    format: 'esm',
  },
  plugins: [
    babel({
      babelHelpers: 'runtime',
      presets: [
        ['@babel/preset-env', { targets: { node: 'current' } }],
      ],
    }),
  ],
};

创建第一个 Rollup 项目

创建项目结构

创建一个简单的 Rollup 项目，首先需要设置好项目的目录结构。假设你的项目目录如下：

rollup-project/
├── rollup.config.js
├── src/
│   └── main.js
└── package.json

编写简单的 JavaScript 文件

在 src/main.js 文件中编写一个简单的 JavaScript 文件：

// src/main.js
const message = 'Hello Rollup!';

export function greet() {
  console.log(message);
}

使用 Rollup 打包文件

在项目根目录下，运行以下命令来打包文件：

rollup -c

这将根据 rollup.config.js 文件中的配置，将 src/main.js 文件打包到 dist 目录下。

打包后的目录结构如下：

dist/
├── main.js
└── main.js.map

使用 Rollup 插件

引入和使用常用的 Rollup 插件

Rollup 插件可以扩展 Rollup 的功能，例如处理不同类型的文件、转换代码等。以下是一些常用的 Rollup 插件及其使用方法：

@rollup/plugin-node-resolve

@rollup/plugin-node-resolve 插件可以解析 Node.js 模块，允许你导入非 JS 文件，如 .cjs、.mjs、.json、.node。

安装插件

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

配置插件

// rollup.config.js
import resolve from '@rollup/plugin-node-resolve';

export default {
  input: 'src/main.js',
  output: {
    dir: 'dist',
    format: 'esm',
  },
  plugins: [
    resolve(),
  ],
};

@rollup/plugin-commonjs

@rollup/plugin-commonjs 插件可以将 CommonJS 模块转换为 ES 模块。

安装插件

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

配置插件

// rollup.config.js
import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'src/main.js',
  output: {
    dir: 'dist',
    format: 'esm',
  },
  plugins: [
    commonjs({
      include: /node_modules\/(.*)/,
    }),
  ],
};

@rollup/plugin-babel

@rollup/plugin-babel 插件可以将 ES6+ 代码转换为 ES5 代码。

安装插件

npm install --save-dev @rollup/plugin-babel @babel/core @babel/preset-env

配置插件

// rollup.config.js
import babel from '@rollup/plugin-babel';

export default {
  input: 'src/main.js',
  output: {
    dir: 'dist',
    format: 'esm',
  },
  plugins: [
    babel({
      babelHelpers: 'runtime',
      presets: [
        ['@babel/preset-env', { targets: { node: 'current' } }],
      ],
    }),
  ],
};

@rollup/plugin-terser

@rollup/plugin-terser 插件可以压缩和优化代码。

安装插件

npm install --save-dev @rollup/plugin-terser

配置插件

// rollup.config.js
import terser from '@rollup/plugin-terser';

export default {
  input: 'src/main.js',
  output: {
    dir: 'dist',
    format: 'esm',
  },
  plugins: [
    terser(),
  ],
};

插件的具体配置及应用案例

以下是一些插件的具体配置案例：

使用 @rollup/plugin-node-resolve 和 @rollup/plugin-commonjs

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

export default {
  input: 'src/main.js',
  output: {
    dir: 'dist',
    format: 'esm',
  },
  plugins: [
    resolve(),
    commonjs(),
  ],
};

使用 @rollup/plugin-babel

// rollup.config.js
import babel from '@rollup/plugin-babel';

export default {
  input: 'src/main.js',
  output: {
    dir: 'dist',
    format: 'esm',
  },
  plugins: [
    babel({
      babelHelpers: 'runtime',
      presets: [
        ['@babel/preset-env', { targets: { node: 'current' } }],
      ],
    }),
  ],
};

使用 @rollup/plugin-terser

// rollup.config.js
import terser from '@rollup/plugin-terser';

export default {
  input: 'src/main.js',
  output: {
    dir: 'dist',
    format: 'esm',
  },
  plugins: [
    terser(),
  ],
};

Rollup 的常见问题及解决方法

常见错误及解决办法

在使用 Rollup 进行打包时，可能会遇到一些常见错误，以下是一些常见的错误及解决办法：

1. `Unresolved dependencies`

错误信息：Unresolved dependencies [some-module]

解决办法：确保你已经安装了所有依赖的模块，并且这些模块在 package.json 中有正确的 dependencies 或 devDependencies。

2. `Invalid value`

错误信息：Invalid value [some-value]

解决办法：检查配置文件中的值是否正确。例如，format 选项只能是 esm、cjs、iife 等有效值。

3. `SyntaxError`

错误信息：SyntaxError: Unexpected token [some-token]

解决办法：确保代码符合 ES6+ 语法规范。使用 @rollup/plugin-babel 插件可以将代码转换为 ES5 语法。

4. `Cannot find module`

错误信息：Cannot find module [some-module]

解决办法：确保已安装模块，并且 rollup.config.js 中的 plugins 配置正确。

性能优化技巧

以下是一些优化 Rollup 性能的技巧：

1. 精简配置文件

确保配置文件中的选项是最小化和合理的。避免使用不必要的插件和配置选项。

2. 减少重新构建次数

使用 output.moduleIds 或 output.preserveModules 选项来减少重新构建的次数，从而提高性能。

3. 使用缓存

Rollup 支持缓存，可以显著提高构建速度。可以通过 rollup-plugin-cache 插件启用缓存。

4. 并行构建

如果项目中有多个入口文件，可以使用 rollup-plugin-multi-entry 插件并行构建多个入口文件。

资源推荐

以下是一些有用的资源，可以帮助你更好地理解和使用 Rollup：

官方文档：Rollup 官方文档
Rollup 社区：Rollup 社区
慕课网：慕课网提供了许多关于前端开发和 Rollup 的教程。
插件列表：Rollup 插件列表

通过这些资源，你可以进一步深入学习和应用 Rollup，提升你的开发效率和质量。