Rollup 插件学习：初学者指南-原创手记-慕课网

概述

本文主要介绍了Rollup插件学习的全过程，从Rollup的基本概念和用途开始，详细讲解了安装和配置Rollup，以及编写和使用Rollup插件的方法。文章还涵盖了常见的Rollup插件介绍及其配置，最后提供了Rollup运行和调试的指导。通过学习Rollup插件，你将深入了解如何优化和打包JavaScript模块。

Rollup 插件学习：初学者指南

1. Rollup 概述

什么是 Rollup

Rollup 是一个模块打包工具，主要用来处理和打包 JavaScript 模块。它支持各种模块系统（如 ES6、CommonJS 和 AMD），并且可以将这些模块合并成一个或多个文件。Rollup 主要用于前端应用开发，能够将模块化代码打包成适合在浏览器中运行的格式。

Rollup 的主要用途

Rollup 的主要用途包括：

将 ES6 模块转换为其他格式，如 CommonJS 或者 IIFE（立即执行函数表达式）
模块化代码的打包和优化，例如将多个小模块合并成一个较大的文件
代码压缩和混淆，减少文件大小，加快加载速度
处理和解析动态导入（import()）

Rollup 与其他打包工具的区别

与其他流行的打包工具（如 Webpack）相比，Rollup 主要关注于模块化代码的优化和打包，而 Webpack 则更注重构建复杂的前端应用。以下是主要区别：

模块化优先：Rollup 以模块化为主，支持 ES6 模块，而 Webpack 更侧重于通用的构建工具。
代码分割：Rollup 通过插件实现代码分割，而 Webpack 内置了代码分割支持。
性能优化：Rollup 的打包结果通常更小，因为它更强调模块的扁平化和优化。
插件机制：Rollup 通过插件机制实现功能扩展，而 Webpack 通过 loader 和 plugin 实现。

2. 安装 Rollup

使用 npm 安装 Rollup

首先，确保你已经安装了 Node.js。接下来，使用 npm（Node Package Manager）来全局安装 Rollup：

npm install -g rollup

验证安装是否成功

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

rollup -v

如果成功安装，该命令会输出 Rollup 的版本信息。

3. 基本配置

创建 Rollup 配置文件

创建一个名为 rollup.config.js 的配置文件。该文件将包含 Rollup 的配置选项。例如：

export default {
  input: 'src/main.js',  // 入口文件
  output: {
    file: 'dist/bundle.js',  // 输出文件路径
    format: 'iife'  // 输出格式，可以是 'iife'、'cjs'、'esm' 等
  },
  plugins: [
    // 插件配置
  ]
};

理解配置文件结构

配置文件中的主要字段包括：

input：指定入口文件
output：指定输出文件的路径和格式
plugins：插件配置列表，可以包含多个插件

添加基本插件

Rollup 通过插件机制扩展功能。常见的插件包括 rollup-plugin-node-resolve 和 rollup-plugin-commonjs。安装这些插件：

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

在配置文件中添加插件：

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'
  },
  plugins: [
    resolve(),
    commonjs()
  ]
};

4. 编写第一个 Rollup 插件

插件的基本结构

一个 Rollup 插件通常由一个导出对象组成，该对象包含 name 和 build 方法。name 用于标识插件，build 方法用于处理模块。

export default {
  name: 'myCustomPlugin',
  build: function (module) {
    // 执行插件逻辑
  }
};

插件的作用与应用

插件的主要作用包括：

修改模块代码：如修改导入、导出语句
处理特定文件类型：如加载非 JavaScript 文件
优化打包结果：如压缩代码、处理内联资源

实践编写简单的插件

下面是一个简单的插件示例，该插件将所有导入语句中的模块路径添加一个前缀。

export default {
  name: 'addPrefix',
  build: function (module) {
    module.imports = module.imports.map(importPath => `prefix/${importPath}`);
  }
};

在配置文件中使用该插件：

import addPrefix from './plugins/addPrefix.js';

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

处理特定文件类型的插件

下面是一个处理特定文件类型的插件示例，该插件将 JSON 文件转换为 JavaScript 对象。

export default {
  name: 'jsonToJs',
  build: function (module) {
    if (module.type === 'amd' && module.imports.includes('data.json')) {
      module.imports = module.imports.map(importPath => {
        if (importPath === 'data.json') {
          return 'require(\'./data.json\')';
        }
        return importPath;
      });
    }
  }
};

在配置文件中使用该插件：

import jsonToJs from './plugins/jsonToJs.js';

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

5. 常见插件介绍

ES6 模块转换

ES6 模块转换是 Rollup 的核心功能之一。通过 @rollup/plugin-commonjs 插件，可以将 CommonJS 模块转换为 ES6 模块。

安装插件：

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

配置插件：

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

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

其他实用插件介绍

@rollup/plugin-node-resolve：自动解析导入路径。
@rollup/plugin-babel：使用 Babel 转换代码。
@rollup/plugin-terser：压缩代码。
@rollup/plugin-sourcemaps：生成源映射文件，方便调试。

安装和配置这些插件：

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

配置示例：

import resolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';
import terser from '@rollup/plugin-terser';
import sourcemaps from '@rollup/plugin-sourcemaps';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    resolve(),
    babel({
      babelrc: false,
      presets: ['@babel/preset-env']
    }),
    terser(),
    sourcemaps()
  ]
};

更详细的插件配置

@rollup/plugin-babel：更详细的配置示例

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

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    babel({
      babelrc: false,
      presets: [
        ['@babel/preset-env', {
          targets: {
            ie: '11'
          }
        }]
      ],
      plugins: [
        '@babel/plugin-proposal-class-properties',
        '@babel/plugin-proposal-object-rest-spread'
      ]
    })
  ]
};

@rollup/plugin-terser：更详细的配置示例

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

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    terser({
      ecma: 5,
      compress: {
        drop_console: true,
        drop_debugger: true
      },
      mangle: true
    })
  ]
};

插件的选择与配置

选择插件时要考虑：

插件的功能是否符合项目需求
插件的性能和稳定性
插件的维护情况和社区支持

6. Rollup 运行与调试

运行 Rollup 项目

在配置好 Rollup 配置文件后，可以通过以下命令运行 Rollup：

rollup -c

这将执行配置文件中的打包任务。

常见错误及调试方法

常见的错误包括：

模块未找到：检查模块路径是否正确
语法错误：确保语法符合 ES6 或其他模块规范
插件配置错误：检查插件配置是否正确

调试方法：

查看编译输出的错误信息
使用 IDE 进行代码调试
逐行检查配置文件是否正确

使用命令行选项

Rollup 提供了一些命令行选项来方便调试和配置。例如：

-p 或 --plugin：指定插件
-i 或 --input：指定入口文件
-o 或 --output：指定输出文件

示例：

rollup -i src/main.js -o dist/bundle.js

通过这些选项，可以灵活地控制 Rollup 的行为，满足特定的打包需求。