本文详细介绍了Rollup 插件教程，从基本概念到安装配置，再到插件使用和实战演练，帮助读者全面了解Rollup的功能和应用场景。文章还涵盖了常见问题的排查和解决方案，确保读者能够顺利使用Rollup进行模块打包。通过丰富的示例和详细解释，读者可以快速上手Rollup插件。

1. Rollup 插件简介

什么是 Rollup

Rollup 是一个模块打包器，主要用于将小的模块组合成大文件。它支持多种模块格式，如 ES6 模块和 CommonJS 模块。Rollup 的主要优势在于其支持面向未来的 ECMAScript 模块 (ESM) 语法，可以将代码优化为更小和更高效的格式，使得代码更加易于维护和理解。

Rollup 的主要功能和应用场景

Rollup 的主要功能包括：

• 模块打包：将多个小模块打包成一个或多个大文件。
• 代码优化：对代码进行压缩和优化，减少文件体积。
• 模块解析：支持多种模块格式，如 ESM 和 CommonJS。
• 代码分割：将代码分割成多个小文件，以实现按需加载。

Rollup 的应用场景包括：

• 库开发：为库提供高质量的模块打包解决方案。
• 应用开发：将多个模块打包成一个或多个文件，减少页面的加载时间。
• 静态站点生成：将静态站点的 JavaScript 代码进行打包优化。

为什么使用 Rollup

• ESM 支持：Rollup 专为 ESM 设计，支持未来的模块化标准。
• 模块化开发：轻松实现模块化开发，使代码更易维护。
• 高性能：优化后的代码体积更小，加载更快。
• 灵活性：支持多种配置和插件，提高打包的灵活性。

2. 安装和配置 Rollup

安装 Node.js 和 npm

首先，你需要安装 Node.js。Node.js 附带了 npm (Node Package Manager)，可以用来安装和管理软件包。你可以从 Node.js 官方网站下载最新版本的 Node.js：

https://nodejs.org/en/download/

安装完成后，检查安装是否成功：

node -v
npm -v

创建一个新的项目

创建一个新的文件夹，进入该文件夹，初始化一个新的 Node.js 项目：

mkdir my-rollup-project
cd my-rollup-project
npm init -y

这将创建一个 package.json 文件，并初始化项目。以下是一个示例 package.json 文件：

{
  "name": "my-rollup-project",
  "version": "1.0.0",
  "main": "dist/bundle.js",
  "scripts": {
    "build": "rollup -c"
  },
  "devDependencies": {
    "rollup": "^2.38.0",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-commonjs": "^10.0.0"
  }
}

初始化 Rollup 项目

安装 Rollup，并将其作为项目中的一个开发依赖：

npm install --save-dev rollup

安装并配置 Rollup 插件和依赖

安装 rollup-plugin-node-resolve 和 rollup-plugin-commonjs 插件：

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

在项目根目录下创建 rollup.config.js 文件，配置 Rollup：

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

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
    name: 'app'
  },
  plugins: [
    resolve(),
    commonjs()
  ]
};

3. 基本使用方法

创建和导入模块

创建 src/main.js 文件：

// src/main.js
import utils from './utils';

console.log('App started');
utils.log('Hello from main.js');

创建 src/utils.js 文件：

// src/utils.js
export function log(message) {
  console.log(message);
}

如何打包代码

使用 rollup 命令打包代码：

npx rollup -c

这将根据 rollup.config.js 配置文件将代码打包到 dist/bundle.js。打包后的 dist/bundle.js 文件内容如下：

(function (app) {
  'use strict';

  var utils = app.utils || {};

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

  utils.log = log;

  console.log('App started');
  utils.log('Hello from main.js');
})(typeof global !== 'undefined' ? global : (typeof window !== 'undefined' ? window : {}));

基本配置文件的编写

rollup.config.js 文件通常包含以下配置项：

• input：指定入口文件。
• output：定义输出文件的路径、格式和名称。
• plugins：配置使用的插件。

例如：

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

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
    name: 'app'
  },
  plugins: [
    resolve(),
    commonjs()
  ]
};

4. 常用插件介绍

插件的作用和使用场景

• rollup-plugin-node-resolve：解析模块路径，支持从 npm 安装的包中导入模块。
• rollup-plugin-commonjs：将 CommonJS 模块转换为 ES 模块。
• rollup-plugin-babel：将 ES6+ 代码转换为 ES5 代码。
• rollup-plugin-terser：压缩和优化代码。

安装和配置示例

安装 rollup-plugin-babel 和 @babel/core 插件：

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

配置 rollup-plugin-babel：

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: 'dist/bundle.js',
    format: 'iife',
    name: 'app'
  },
  plugins: [
    resolve(),
    commonjs(),
    babel({
      exclude: 'node_modules/**'
    })
  ]
};

常见问题解答

• 模块找不到：检查模块路径是否正确，确保使用正确的插件解析路径。
• 代码格式不匹配：确保所有模块都使用相同的格式（ESM 或 CommonJS）。
• 打包文件过大：可以尝试使用 rollup-plugin-terser 进行代码压缩。

5. 实战演练：打包一个简单的应用

准备项目结构

项目结构如下：

my-rollup-project/
├── dist/
├── node_modules/
├── package.json
├── rollup.config.js
└── src/
    ├── main.js
    ├── utils.js

编写模块代码

src/main.js：

// src/main.js
import utils from './utils';

console.log('App started');
utils.log('Hello from main.js');

src/utils.js：

// src/utils.js
export function log(message) {
  console.log(message);
}

配置 Rollup 打包设置

rollup.config.js：

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

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
    name: 'app'
  },
  plugins: [
    resolve(),
    commonjs()
  ]
};

调试和优化打包输出

运行打包命令：

npx rollup -c

生成的 dist/bundle.js 文件内容如下：

(function (app) {
  'use strict';

  var utils = app.utils || {};

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

  utils.log = log;

  console.log('App started');
  utils.log('Hello from main.js');
})(typeof global !== 'undefined' ? global : (typeof window !== 'undefined' ? window : {}));

可以通过添加更多的插件和配置来进一步优化打包输出，例如：

• 使用 rollup-plugin-terser 进行代码压缩。
• 使用 rollup-plugin-cleanup 删除未使用的代码。

6. 常见问题和解决方案

常见错误和警告解释

• 解析错误：模块路径解析不正确，使用 rollup-plugin-node-resolve 插件。
• 转换错误：代码不兼容或格式不匹配，检查模块格式并确保使用正确的插件。
• 构建失败：配置文件错误或依赖缺失，检查 rollup.config.js 和 package.json 文件。

如何排查和解决 Rollup 的问题

1. 检查配置文件：
   • 确保 rollup.config.js 文件配置正确。
   • 检查 input 和 output 配置是否合理。
2. 检查模块路径：
   • 确认模块路径正确。
   • 使用 rollup-plugin-node-resolve 插件解析路径。
3. 检查依赖安装：
   • 确保所有依赖都已安装。
   • 使用 npm install 命令重新安装依赖。
4. 使用调试工具：
   • 使用 rollup --environment DEBUG:rollup 命令查看详细的调试信息。
   • 查看错误日志并根据提示解决问题。

维护和更新 Rollup 项目的建议

• 定期更新依赖：

  • 定期检查并更新项目中的依赖。
  • 使用 npm outdated 命令查看过时的依赖。
  • 更新依赖时，确保不会破坏现有的功能。

• 代码规范：

  • 使用代码检查工具（如 ESLint）确保代码一致性和规范性。
  • 配置 ESLint 规则，确保代码符合项目标准。
• 持续集成：
  • 配置 CI/CD 工具（如 GitHub Actions 或 Jenkins）自动打包和测试。
  • 确保每次提交代码后自动运行 Rollup 和测试。
  • 使用 npm test 命令进行测试，确保代码质量。

以上内容涵盖了 Rollup 插件从入门到实践的各个方面，帮助你更好地理解和使用 Rollup 进行模块打包。通过实践示例和常见问题解答，希望你能更好地掌握 Rollup 的使用技巧。