Rollup 是一种高效的模块打包工具，它整合多个前端资源，通过代码压缩与优化，提升应用性能。易于安装与配置，Rollup 支持多种输出格式，包括 CommonJS、ES 模块与 UMD。其强大的功能包括代码分割与懒加载，通过定制配置文件实现项目需求。从基础安装到实战演练，Rollup 提供全面支持，助你在前端构建流程中实现自动化与优化。

Rollup 非常易于安装和设置。首先，确保你已经安装了 Node.js 或 npm（Node.js 的包管理器），然后在你的项目目录下运行以下命令来全局安装 Rollup：

npm install -g rollup

接下来，为你的项目创建一个 package.json 文件，如果尚未创建，可以使用 npm init 命令。这个文件将帮助你管理依赖关系和脚本。现在，让我们为项目添加一个基本的 Rollup 配置脚本：

{
  "scripts": {
    "build": "rollup -c"
  }
}

在项目目录下创建一个 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: "cjs",
    sourcemap: true
  },
  plugins: [
    resolve({
      jsnext: true,
      main: true
    }),
    commonjs()
  ]
};

以上配置定义了输入和输出文件，指定使用 cjs 格式，同时生成了源映射文件用于调试。同时，我们引入了 rollup-plugin-node-resolve 和 rollup-plugin-commonjs 插件来解决依赖和 CommonJS 模块的导入。

简单打包与压缩

为了进行打包，只需执行 npm run build 命令。Rollup 将根据 rollup.config.js 文件中的设置将项目中的所有源代码打包到一个名为 bundle.js 的输出文件中。

输出不同格式的文件

Rollup 支持多种输出格式，包括 CommonJS (cjs)、ES 模块 (es) 和 UMD (umd)。在 rollup.config.js 中，通过配置 output.format 字段可以选择不同的输出格式。

代码分割与懒加载

Rollup 支持代码分割，可以帮助减少初始加载时间。通过使用 splitChunks 插件，可以将大型代码块分割成更小的文件，同时使用 import() 语法可以实现懒加载功能，仅在需要时加载模块。

import { splitChunks } from "rollup-plugin-split-chunks";

export default {
  //...
  plugins: [
    //...
    splitChunks({
      chunks: "all",
      minSize: 10000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: "~",
      name: true,
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          chunks: "all"
        }
      }
    }),
    //...
  ]
};

rollup.config.js 文件是 Rollup 打包的核心。它定义了构建过程中的许多关键设置，包括输入输出路径、插件使用、模块转换等。通过定制这个文件，你可以根据项目需求调整构建行为，以实现最佳性能和可维护性。

从零开始搭建项目

首先，初始化一个新的项目目录，并添加 package.json 文件。然后，安装 Rollup 和其他必要的依赖：

mkdir my-rollup-project
cd my-rollup-project
npm init -y
npm install rollup rollup-plugin-node-resolve rollup-plugin-commonjs rollup-plugin-terser

使用 Rollup 编译代码并运行应用

创建一个 src/index.js 文件，包含你的代码：

// src/index.js
console.log("Hello, Rollup!");

配置 rollup.config.js：

// 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/index.js",
  output: {
    file: "dist/bundle.js",
    format: "cjs",
    sourcemap: true
  },
  plugins: [
    resolve(),
    commonjs(),
    terser()
  ]
};

运行构建：

npm run build

然后，在 dist 目录中找到已打包的 bundle.js 文件，并用浏览器打开以查看输出结果：

cat dist/bundle.js | node -e 'console.log("Output is", process.stdin.read())'

部署 Rollup 项目到本地服务器

为了将项目部署到本地服务器，可以使用 http-server 或 pug（伪服务器）。首先，确保安装了 http-server：

npm install http-server -g

在项目根目录下运行以下命令以启动服务器：

http-server -p 8080

然后，在浏览器中访问 http://localhost:8080/，即可查看你的应用。

优化性能的常见技巧

• 代码压缩：使用 terser 或 rollup-plugin-minify 插件减少输出文件大小。
• 代码分割：通过配置 splitChunks 插件来优化大型应用的加载性能。
• 按需加载：利用动态导入（import()）实现懒加载，减少首次加载的体积。

遇到问题时的排查步骤

• 查阅文档：Rollup 的官方文档提供了详细的使用指南和常见问题解答。
• 查看日志：检查构建日志以获取错误信息或警告。
• 社区资源：加入 Rollup 的 GitHub 存储库或相关论坛，如 Stack Overflow，寻求帮助或获取社区支持。

Rollup 社区资源与帮助渠道

• GitHub：Rollup 的 GitHub 仓库提供了代码示例、问题追踪和贡献指南。
• Stack Overflow：搜索与 Rollup 相关的问题和答案，提问或查找解决方案。
• 慕课网：提供关于前端构建工具的课程，包括 Rollup 的使用和最佳实践。

通过遵循上述指南和实践，你将能够更高效地使用 Rollup 进行前端项目构建，优化代码性能，并最终提升应用的用户体验。