Rollup 插件项目实战：新手入门教程

本文将详细介绍如何使用Rollup插件项目实战，从插件的基本概念到具体的应用场景，帮助读者全面了解Rollup的功能和使用方法。通过安装必要的工具和配置文件，读者可以掌握Rollup的基本配置技巧。此外，文章还将引导读者实操自定义Rollup插件，并解决常见的构建问题，最终部署和发布项目。

Rollup 的基本概念

Rollup 是一个模块打包工具，用于将小模块组合成更大的模块，以优化和简化 Web 应用程序的构建过程。它支持 ES 模块，并且可以生成符合各种使用场景的输出，例如 CommonJS、AMD 或直接输出到浏览器中使用的 JavaScript 文件。

Rollup 的应用场景

Rollup 适用于需要将多个小模块打包成一个或多个大型模块的应用程序。例如，前端框架如 Vue.js 和 React.js 常用 Rollup 作为其构建工具，以确保高效的模块化开发和部署。

Rollup 插件的作用

Rollup 插件可以扩展 Rollup 的功能，允许自定义处理代码，例如代码压缩、树摇（Tree Shaking）、代码转译等。通过插件，开发者能够更灵活地控制构建流程，满足各种复杂的需求。

安装 Node.js 和 npm

确保已安装 Node.js 和 npm。可以通过其官方网站下载并安装最新版本的 Node.js，npm 会随 Node.js 一起安装。

# 检查 Node.js 和 npm 是否已安装
node -v
npm -v

创建项目并初始化

创建一个新的文件夹并初始化一个新的 npm 项目。

# 创建项目文件夹
mkdir my-rollup-project
cd my-rollup-project

# 初始化 npm 项目
npm init -y

安装 Rollup 和相关插件

使用 npm 安装 Rollup 以及一些常用的插件，例如 @rollup/plugin-node-resolve 和 @rollup/plugin-commonjs。

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

编写 Rollup 配置

Rollup 配置文件通常命名为 rollup.config.js。此文件用于指定输入文件、输出文件以及任何插件设置。

// 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: 'esm', // 输出格式
  },
  plugins: [
    resolve(),
    commonjs(),
  ],
};

配置输出和输入模块

在 Rollup 配置文件中，input 属性指定要打包的源代码文件，而 output 属性定义输出文件的位置和格式。例如，可以将输出文件的格式设置为 iife，以生成立即执行的函数：

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(),
  ],
};

简单的插件配置示例

以上配置文件使用了两个插件，分别是 resolve 和 commonjs。resolve 插件允许 Rollup 解析 Node.js 模块，而 commonjs 插件可以处理 CommonJS 模块。例如，可以配置 resolve 插件的 preferConfig 参数：

// 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: 'esm',
  },
  plugins: [
    resolve({
      preferConfig: true,
    }),
    commonjs({
      include: /node_modules/,
    }),
  ],
};

插件的基本结构

自定义 Rollup 插件通常是一个返回对象的函数，该对象包含一个或多个处理函数，如 resolveId、load 和 transform。这些函数允许插件在不同的构建阶段处理代码。

插件的注册和使用

自定义插件可以像其他插件一样在 Rollup 配置文件中注册和使用。

// custom-plugin.js
export default function customPlugin() {
  return {
    transform(code, id) {
      if (id.includes('custom-module')) {
        return {
          code: `console.log('Custom Plugin: ${code}');`,
          map: null,
        };
      }
    },
  };
}

// rollup.config.js
import customPlugin from './custom-plugin.js';

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

常见插件功能实现

常见的插件功能包括代码压缩、代码转译、ES 模块转 CommonJS 或 AMD 等。

代码压缩

使用 terser 插件进行代码压缩。

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

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

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

ES 模块转 CommonJS

使用 rollup-plugin-commonjs 插件将 ES 模块转为 CommonJS。

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

运行和测试 Rollup 配置

使用 rollup 命令行工具运行和测试配置文件。

npx rollup -c

常见错误及解决方法

1. 模块未找到错误

   Error: Could not resolve 'package-name'

   解决方法：确保已安装所需的模块，并且路径配置正确。

2. 输出格式错误

   Error: Invalid output format 'xxx'

   解决方法：检查输出配置中的 format 属性是否正确。

调试技巧

1. 使用 console.log

   在自定义插件中添加 console.log 语句来输出调试信息。

   export default function customPlugin() {
    return {
      transform(code, id) {
        console.log(id);
        if (id.includes('custom-module')) {
          console.log(code);
          return {
            code: `console.log('Custom Plugin: ${code}');`,
            map: null,
          };
        }
      },
    };
   }

2. 启用源代码映射

   在 Rollup 配置文件中启用源代码映射，以便调试时能够查看原始代码。

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

打包项目

使用 Rollup 打包项目，生成最终的输出文件。

npx rollup -c

发布到 npm

将项目发布到 npm。

1. 注册或登录 npm 账号。

2. 登录 npm 账号。

   npm login

3. 发布项目。

   npm publish

使用与维护

1. 版本管理

   每次发布新版本时，更新 package.json 文件中的 version 字段。

   {
    "name": "my-rollup-project",
    "version": "1.0.0",
    ...
   }

2. 更新依赖

   根据需要更新项目依赖和开发依赖。

   npm install <dependency>@<version> --save
   npm install <dependency>@<version> --save-dev

3. 持续集成

   配置持续集成（CI）工具，如 GitHub Actions 或 GitLab CI，确保每次更改都能自动运行测试和构建。

   # .github/workflows/rollup.yml
   name: Rollup Build
   
   on:
    push:
      branches: [ main ]
    pull_request:
      branches: [ main ]
   
   jobs:
    build:
      runs-on: ubuntu-latest
   
      steps:
      - uses: actions/checkout@v2
      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14.x'
      - name: Install dependencies
        run: npm ci
      - name: Build with Rollup
        run: npx rollup -c