使用 Rollup.js 快速开始构建一个前端项目

Rollup 是一个用于 JavaScript 项目的模块打包器。它支持 ES6 模块标准，并且通过 Tree-shaking（摇树优化）来删除未使用的代码，从而生成更小的文件，非常适合现代 JavaScript 项目。

Rollup 工作流程

Rollup 的工作流程如下：

1. 初始化：解析 CLI 参数和配置文件，设置插件和加载器。
2. 构建：解析入口文件，追踪依赖项，并构建模块依赖图。
3. 打包：根据模块依赖图生成最终的输出代码。
4. 输出：将打包后的代码写入文件系统。

核心模块

Rollup.js 的主要特性包括：

• 输入输出管理：通过配置文件定义输入和输出文件，支持不同格式（如 ES 模块、CommonJS、UMD 等）。
• 模块解析：支持 ES 模块、CommonJS 和 AMD 格式。
• 代码转换：可通过插件集成 Babel 等工具，实现代码转换，确保兼容性。
• 代码拆分：支持代码拆分为多个 chunk，实现懒加载和优化加载时间。
• Tree Shaking：通过静态分析剔除未使用的代码。
• 插件支持：Rollup 拥有强大的插件系统，能实现代码转换、优化、按需加载等。

快速开始

安装 Rollup

使用 npm 安装 Rollup：

npm install --global rollup

或在项目中安装：

npm install rollup --save-dev

初始化项目

创建 package.json 文件：

npm init

配置 Rollup

创建 rollup.config.js，设置输入、输出和插件：

// rollup.config.js
export default {
  input: 'src/main.js', // 入口文件
  output: {
    file: 'bundle.js',   // 输出文件
    format: 'umd',       // 输出格式：'amd', 'cjs', 'es', 'iife', 'umd'
    name: 'MyBundle',    // 格式为 'iife' 或 'umd' 时需指定全局变量名
  },
  plugins: [],           // 插件列表
};

使用插件

安装并使用 Babel 插件来转换 ES6+ 代码：

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

在 rollup.config.js 中添加：

import babel from 'rollup-plugin-babel';

export default {
  // ...其他配置
  plugins: [
    babel({
      exclude: 'node_modules/**', // 排除不需要编译的文件夹
    }),
  ],
};

运行 Rollup

在命令行中运行 Rollup：

rollup -c

使用 --watch 标志在文件变动时自动构建：

rollup -c --watch

配置选项详解

input

用于配置项目的入口文件，可以是字符串、字符串数组或映射对象。支持多入口文件，可以生成多个输出 chunks。

plugins

插件可实现解析、转换和优化操作。常见插件包括：

• @rollup/plugin-babel：代码转换。
• @rollup/plugin-commonjs：将 CommonJS 转为 ES 模块。
• @rollup/plugin-json：将 JSON 文件转为 ES 模块。
• @rollup/plugin-node-resolve：解析模块引用。
• @rollup/plugin-typescript：转换 TypeScript 代码。
• rollup-plugin-terser：压缩 JavaScript 代码。
• rollup-plugin-postcss：处理 CSS 文件。
• 更多插件支持：文件复制、热更新、自动导入模块等。

treeshake

用于优化输出代码，通过静态分析消除未使用的导出。

cache

用于加速构建，设置为 true 时，仅重新分析改变的模块。

watch

用于观察模式配置，支持排除/包含文件或文件夹。

external

用于排除外部模块，可通过模块 ID 数组或正则表达式配置。

通过 Rollup.js 和插件，可以高效地管理前端项目的模块打包和优化过程。希望这能帮助您快速上手并构建自己的项目。