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

概述

Rollup是一个模块打包工具，主要用于将ES6模块和其他现代JavaScript模块打包成更兼容的格式。它支持模块化特性，可以处理依赖关系并优化代码，同时支持代码分割，提高应用的加载速度。

Rollup简介

Rollup是什么

Rollup 是一个模块打包工具，主要用于将 ES6 模块和其他现代 JavaScript 模块打包成更兼容的格式，如 CommonJS 或 UMD 格式。它支持 ES6 模块的模块化特性，可以很好地处理依赖关系，生成更小、更高效的代码。

Rollup的作用和优势

作用

Rollup 的主要作用是将 ES6 模块或其他现代模块打包为浏览器可以加载的格式。这包括将多个模块合并为一个文件，处理依赖关系，以及优化代码以提高加载速度。此外，Rollup 还支持代码分割，可以将代码分割成多个文件，以便按需加载，进一步提高应用的加载速度。

优势

1. 模块化支持：Rollup 支持 ES6 模块和其他现代模块系统，如 CJS 和 AMD，可以很好地处理模块化代码。
2. 依赖关系管理：Rollup 能够很好地处理依赖关系，确保模块之间的互相引用能够正确解析。
3. 优化代码：Rollup 可以对代码进行优化，减少冗余代码，提高代码执行的效率。
4. 代码分割：Rollup 支持代码分割，可以将代码分割成多个文件，按需加载，进一步提高应用的加载速度。
5. 灵活配置：通过配置文件，可以自定义打包行为，满足不同的打包需求。

安装Rollup

通过npm安装Rollup

首先，确保已经安装了 Node.js 和 npm。通过 npm 安装 Rollup 可以使用以下命令：

npm install --save-dev rollup

安装完成后，可以在项目目录下使用 rollup 命令来打包代码。

安装常用插件

Rollup 提供了大量的插件来扩展其功能，例如 @rollup/plugin-node-resolve 用于解析模块，@rollup/plugin-commonjs 用于处理 CommonJS 模块，@rollup/plugin-babel 用于编译 ES6+ 代码等。这些插件可以通过 npm 安装：

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

配置Rollup

创建配置文件

配置 Rollup 的方式是通过一个配置文件，通常命名为 rollup.config.js。该文件定义了打包过程中的各种选项，例如输入文件、输出格式、插件等。

1. 创建配置文件：创建一个新的文件 rollup.config.js，并将其放在项目根目录下。

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

export default {
  input: 'src/main.js', // 入口文件
  output: {
    file: 'dist/bundle.js', // 输出文件
    format: 'iife', // 输出格式
  },
  plugins: [
    nodeResolve(),
    commonjs(),
    babel({
      babelrc: false,
      presets: ['@babel/preset-env'],
      plugins: ['@babel/plugin-transform-runtime'],
    }),
    terser(),
  ],
};

1. 定义入口文件：在配置文件中定义入口文件，即源代码的位置。通常将入口文件放在 src 目录下。

2. 定义输出文件：指定输出文件的位置和格式。输出文件通常放在 dist 目录下，格式可以是 esm、cjs、iife、amd 等。

3. 定义插件：在配置文件中定义插件，以增强 Rollup 的功能。插件可以用于解析模块、处理 CommonJS 代码、编译 ES6+ 代码等。

基本配置项解析

输入文件

输入文件定义了打包的起点，通常是一个 JavaScript 文件。在配置文件中，通过 input 属性指定入口文件的位置。

input: 'src/main.js',

输出文件

输出文件是打包后生成的文件，可以是一个或多个。通过 output 属性定义输出文件的位置和格式。

output: {
  file: 'dist/bundle.js',
  format: 'iife',
},

• file：指定输出文件的位置。
• format：指定输出文件的格式，常见的格式有 esm、cjs、iife、amd 等。

插件

插件可以扩展 Rollup 的功能，例如解析模块、处理 CommonJS 代码、编译 ES6+ 代码等。在配置文件中，通过 plugins 属性定义插件。

plugins: [
  nodeResolve(),
  commonjs(),
  babel({
    babelrc: false,
    presets: ['@babel/preset-env'],
    plugins: ['@babel/plugin-transform-runtime'],
  }),
  terser(),
],

Rollup常用插件介绍

插件的作用及应用场景

@rollup/plugin-node-resolve

@rollup/plugin-node-resolve 插件用于解析模块，支持解析 ES6 模块和其他现代模块系统。它可以帮助 Rollup 找到入口文件中引用的模块。

应用场景：当你在代码中引用了其他模块（例如 import xxx from 'xxx'），但 Rollup 无法找到这些模块时，可以通过 @rollup/plugin-node-resolve 插件来解析这些模块。

import nodeResolve from '@rollup/plugin-node-resolve';

plugins: [
  nodeResolve(),
]

@rollup/plugin-commonjs

@rollup/plugin-commonjs 插件用于处理 CommonJS 模块，将 CommonJS 代码转换为 ES6 模块格式。这使得 Rollup 能够更好地处理依赖关系，确保所有模块都可以正确解析。

应用场景：当你引用的模块是 CommonJS 格式时，可以通过 @rollup/plugin-commonjs 插件将这些模块转换为 ES6 模块格式。

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

plugins: [
  commonjs(),
]

@rollup/plugin-babel

@rollup/plugin-babel 插件用于编译 ES6+ 代码，将 ES6+ 代码转换为更兼容的格式。这使得 Rollup 可以处理最新的 JavaScript 特性，并生成可运行的代码。

应用场景：当你使用了 ES6+ 的语法特性时，可以通过 @rollup/plugin-babel 插件将这些代码编译为兼容的格式。

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

plugins: [
  babel({
    babelrc: false,
    presets: ['@babel/preset-env'],
    plugins: ['@babel/plugin-transform-runtime'],
  }),
]

如何使用插件

在创建 Rollup 配置文件时，可以通过 import 语句引入插件，然后在 plugins 数组中使用这些插件。

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

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

Rollup打包实战

实战项目搭建

1. 创建项目目录：首先，创建一个新的项目目录，并进入该目录。

mkdir my-rollup-project
cd my-rollup-project

1. 初始化项目：使用 npm 初始化一个新的项目，安装所需的依赖。

npm init -y

1. 安装 Rollup 和插件：安装 Rollup 和所需的插件。

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

1. 创建文件结构：创建项目的基本文件结构。

mkdir src
touch src/main.js
touch rollup.config.js

1. 编写代码：在 src/main.js 文件中编写一些简单的代码。

// src/main.js
import 'lodash-es';

console.log(_.join(['Hello', 'Rollup'], ' '));

import('./dynamic-module.js').then(({ default: dynamicModule }) => {
  console.log(dynamicModule());
});

1. 创建配置文件：在 rollup.config.js 文件中定义 Rollup 的配置。

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

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

打包过程详解

1. 定义入口文件：在 rollup.config.js 文件中定义入口文件的位置，即 src/main.js。

input: 'src/main.js',

1. 定义输出文件：在 rollup.config.js 文件中定义输出文件的位置和格式，即 dist/bundle.js 和 iife 格式。

output: {
  file: 'dist/bundle.js',
  format: 'iife',
},

1. 配置插件：在 rollup.config.js 文件中配置插件，以增强 Rollup 的功能。

plugins: [
  nodeResolve(),
  commonjs(),
  babel({
    babelrc: false,
    presets: ['@babel/preset-env'],
    plugins: ['@babel/plugin-transform-runtime'],
  }),
  terser(),
],

1. 运行打包命令：在项目根目录下运行 rollup 命令来打包代码。

npx rollup -c

1. 查看打包结果：打包完成后，可以在 dist 目录下找到生成的 bundle.js 文件。

ls dist

Rollup打包优化

性能优化技巧

代码分割

代码分割是 Rollup 的一个非常强大的功能，可以将代码分割成多个文件，按需加载，进一步提高应用的加载速度。代码分割通常与动态导入（import()）一起使用。

1. 创建配置文件：在 rollup.config.js 文件中定义代码分割的配置。

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

const require = createRequire(import.meta.url);
const path = require('path');

export default {
  input: 'src/main.js',
  output: {
    dir: 'dist',
    format: 'esm',
  },
  plugins: [
    nodeResolve(),
    commonjs(),
    babel({
      babelrc: false,
      presets: ['@babel/preset-env'],
      plugins: ['@babel/plugin-transform-runtime'],
    }),
    terser(),
  ],
  external: id => {
    return id in require('module').builtinModules;
  },
};

1. 使用动态导入：在代码中使用动态导入（import()）来分割代码。

// src/main.js
import 'lodash-es';

console.log(_.join(['Hello', 'Rollup'], ' '));

import('./dynamic-module.js').then(({ default: dynamicModule }) => {
  console.log(dynamicModule());
});

代码压缩

代码压缩可以减少代码的体积，提高加载速度。Rollup 支持使用 Terser 插件来压缩代码。

1. 安装 Terser 插件：安装 Terser 插件。

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

1. 配置 Terser 插件：在 rollup.config.js 文件中配置 Terser 插件。

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

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

优化配置

优化配置可以进一步提高打包速度和代码质量。例如，可以通过配置插件来控制代码的编译过程，或配置 Rollup 的其他选项来优化打包过程。

1. 优化插件配置：在 rollup.config.js 文件中优化插件的配置。

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

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
  },
  plugins: [
    nodeResolve({
      preferBuiltins: true,
    }),
    commonjs({
      include: 'node_modules/**',
    }),
    babel({
      babelrc: false,
      presets: ['@babel/preset-env'],
      plugins: ['@babel/plugin-transform-runtime'],
    }),
    terser(),
  ],
};

常见问题及解决方法

问题1：打包失败

问题描述：在打包过程中，可能会遇到各种错误，例如插件配置错误、依赖解析错误等。

解决方法：仔细检查配置文件中的配置项，确保所有插件和依赖都已正确安装和配置。可以参考 Rollup 的官方文档或在线资源来解决具体的问题。

问题2：打包速度慢

问题描述：在打包过程中，可能会遇到打包速度慢的问题，特别是在处理大型项目时。

解决方法：可以使用代码分割和缓存等技术来提高打包速度。例如，使用 Terser 插件来压缩代码，使用 Rollup 的缓存机制来加速打包过程。

问题3：依赖解析失败

问题描述：在打包过程中，可能会遇到依赖解析失败的问题，例如某些模块无法找到或解析错误。

解决方法：确保所有依赖都已正确安装和配置。可以使用 @rollup/plugin-node-resolve 和 @rollup/plugin-commonjs 插件来解析依赖。

问题4：代码格式不正确

问题描述：在打包过程中，可能会遇到代码格式不正确的问题，例如某些模块的语法错误或未编译的 ES6+ 代码。

解决方法：使用 @rollup/plugin-babel 插件来编译 ES6+ 代码，并确保代码符合 ES6+ 的语法规范。可以在 rollup.config.js 文件中配置插件来编译代码。

问题5：打包后代码体积过大

问题描述：在打包后，生成的代码体积可能会过大，影响加载速度。

解决方法：可以使用代码压缩和代码分割等技术来优化代码。例如，使用 Terser 插件来压缩代码，使用代码分割来按需加载代码。