Rollup入门教程：轻松掌握前端打包技巧

Rollup 是一个模块打包器，它能够合并多个小模块，优化和压缩文件以提高前端性能。Rollup 支持 ES6 模块语法，具备代码分割和 Tree Shaking 等功能，同时拥有强大的插件系统，能够添加各种附加功能。本文详细介绍了 Rollup 的安装、配置、插件使用以及性能优化技巧。

Rollup 是什么？

Rollup 是一个模块打包器，它将多个小模块合并成一个大的模块，以便于浏览器加载。Rollup 旨在以更智能的方式处理模块依赖关系，以实现文件的优化和压缩，从而提高前端性能。Rollup 支持 ES6 模块语法，这使得代码可以更好地组织和管理，同时保持高度的灵活性和可维护性。

Rollup 的主要特点和优势

• ES6 模块兼容性：Rollup 完全支持 ES6 模块语法，包括 import 和 export 语句，使得代码的组织和维护更加灵活。
• 代码分割：Rollup 可以将代码分割成多个小块，按需加载，从而减少初始加载时间，提高应用的性能。
• Tree Shaking：Rollup 可以自动移除未引用的代码，实现代码的精简，从而减少文件大小，提高加载速度。
• 插件系统：Rollup 拥有一个强大的插件系统，可以通过插件添加各种功能，如代码压缩、打包环境配置等。
• 简单易用：Rollup 的配置文件简洁，易于理解和使用，适合初学者快速上手。

以下是简单的代码示例来展示 Rollup 如何处理 ES6 模块语法：

// src/index.js
import add from './utils/add.js';

export const sum = (a, b) => add(a, b);

// src/utils/add.js
export default function add(a, b) {
  return a + b;
}

使用npm安装Rollup

Rollup 可以通过 npm 安装，安装过程如下：

npm install --save-dev @rollup/cli

--save-dev 参数表示将 Rollup 作为一个开发依赖项安装，这意味着它仅在开发阶段使用。

检查安装是否成功

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

rollup --version

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

创建配置文件

Rollup 的配置文件是一个 JavaScript 文件，通常命名为 rollup.config.js。配置文件用于定义 Rollup 的打包选项和插件配置。以下是一个简单的配置文件示例：

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

export default {
  input: 'src/index.js', // 入口文件
  output: {
    file: 'dist/bundle.js', // 输出文件路径
    format: 'iife' // 输出格式，例如：iife（立即执行函数），umd（通用模块定义），es（ES 模块）
  },
  plugins: [
    resolve(), // 解析 Node.js 模块
    commonjs(), // 将 CommonJS 模块转换为 ES 模块
    terser() // 压缩代码
  ],
  external: ['lodash'] // 外部依赖，不会被打包进 bundle 中
};

基本配置项介绍

• input：指定入口文件，即需要打包的主模块文件。
• output：定义输出文件的格式和位置。
  • file：指定输出文件的路径。
    . format：指定输出文件的格式，例如 es、umd、iife 等。
• plugins：插件配置，用于添加各种插件，如代码压缩、环境变量等。
• external：指定外部依赖，这些依赖不会被打包进最终的 bundle 中。

常用插件介绍

Rollup 拥有一个强大的插件系统，可以通过插件添加各种功能。以下是一些常用的插件：

• resolve：用于解析 Node.js 模块，使 Rollup 能够处理 Node.js 模块的导入。
• commonjs：将 CommonJS 模块转换为 ES 模块，使得 Node.js 代码可以在浏览器中运行。
• terser：用于压缩 JavaScript 代码，减小文件大小。
• babel：用于将 ES6+ 代码转换为兼容性更好的 ES5 代码。

如何添加和使用插件

添加和使用插件的过程非常简单，只需要在配置文件中指定插件即可。以下是一个使用 Babel 插件的示例：

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

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

在这个示例中，@rollup/plugin-babel 插件用于将代码转换为兼容性更好的 ES5 代码。

创建简单的JavaScript模块

为了演示如何使用 Rollup 打包 JavaScript 模块，我们需要先创建一些简单的模块。假设我们有一个简单的模块 src/index.js，内容如下：

// src/index.js
import add from './utils/add.js';

export const sum = (a, b) => add(a, b);

以及一个辅助模块 src/utils/add.js：

// src/utils/add.js
export default function add(a, b) {
  return a + b;
}

使用Rollup打包JavaScript模块

现在我们已经定义了模块，接下来可以使用 Rollup 打包这些模块。首先，确保配置文件 rollup.config.js 已经准备好，然后运行 Rollup 命令：

rollup -c

上述命令将会按照配置文件中的设置打包模块，并将输出文件写入指定位置。假设我们使用了上面提供的配置文件，打包后的输出文件将会放在 dist/bundle.js 位置。

假设打包成功，dist/bundle.js 文件将包含打包后的代码，如下所示：

// dist/bundle.js
(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  (global = global || self, global.bundle = factory());
})(this, function () { 'use strict';

  function add(a, b) {
    return a + b;
  }

  function sum(a, b) {
    return add(a, b);
  }

  return sum;

});

常见错误及解决方法

在使用 Rollup 时，可能会遇到一些常见的错误。以下是几个常见错误和解决方法：

错误一：TypeError: Cannot read property 'exports' of undefined

• 原因：这通常是因为使用的模块未正确解析。
• 解决方法：确保所有模块都正确导入。可以使用 @rollup/plugin-node-resolve 插件来帮助解析模块。

错误二：Missing semicolon 或其他语法错误

• 原因：代码中存在语法错误或未遵循 JavaScript 语法规范。
• 解决方法：检查代码，确保没有遗漏的分号或其他语法错误。

错误三：Could not load plugin 或 PluginError

• 原因：插件未正确安装或配置。
• 解决方法：确保所有插件都已正确安装，并且在配置文件中正确引用。

Rollup性能优化技巧

1. 使用 Tree Shaking

Tree Shaking 是 Rollup 的一个特性，可以自动移除未引用的代码，从而减少文件大小。确保使用 ES6 模块语法可以最大化利用 Tree Shaking。

例如，可以配置 Rollup 以实现 Tree Shaking：

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

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

2. 代码分割

将代码分割成多个小块，按需加载，可以显著减少初始加载时间。可以使用 dynamic import 语法实现代码分割：

// src/index.js
import add from './utils/add.js';

export const sum = (a, b) => add(a, b);

export const loadMore = async () => {
  const module = await import('./more.js');
  return module.default();
};

3. 使用 output.manualChunks

通过 output.manualChunks 配置项，可以手动指定哪些模块打包到同一个 bundle 文件中：

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

export default {
  input: 'src/index.js',
  output: {
    dir: 'dist', // 输出目录
    format: 'esm',
    manualChunks: {
      vendor: ['lodash']
    }
  },
  plugins: [
    resolve(),
    commonjs(),
    terser()
  ],
  external: ['lodash']
};

4. 使用 output.sourcemap

生成 source map 文件可以帮助调试，但会增加输出文件大小。可以在构建过程中选择是否生成 source map：

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

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

通过以上配置和技巧，可以显著提高 Rollup 的打包性能和灵活性，从而更好地管理前端模块。