Rollup 作为一种轻量级、高效的 JavaScript 打包工具，因其在模块化打包、性能优化以及代码精简方面的优势，逐渐成为构建类库和组件库的首选工具。
1. Rollup 简介
Rollup 是一个 JavaScript 打包工具，特别适用于构建 JavaScript 库、组件库以及其他模块化项目。与 Webpack 等工具相比，Rollup 更专注于处理 ES6 模块（ESM） ，在 Tree Shaking 和打包优化方面表现尤为突出。
Rollup 的核心特性：
- ES6 模块支持：Rollup 从一开始就支持 ES6 模块化，通过静态分析来进行代码拆分和优化，生成的代码更简洁。
- Tree Shaking：通过分析代码的依赖关系，Rollup 去除未使用的代码，减少最终打包文件的体积。
- 代码分割：支持代码分割（Code Splitting），能够按需加载模块，避免一次性加载过多资源。
- 插件系统：Rollup 提供了强大的插件机制，可以扩展其功能，支持各种不同的资源类型（如 CSS、TypeScript、图片等）。
2. Rollup 打包原理
Rollup 的核心原理基于 静态分析 和 代码优化，尤其擅长处理 ES6 模块和 Tree Shaking。
2.1 模块化与静态分析
Rollup 专注于 ES6 模块（即 import 和 export），这使得它能够在打包时进行静态分析，提前确定模块之间的依赖关系和导入导出方式。这种静态分析为 Rollup 提供了更多的优化空间。
- 静态导入导出：与 CommonJS 的动态加载不同，ES6 模块的导入导出在编译时就能确定，因此 Rollup 可以更精准地进行优化。
2.2 Tree Shaking
Tree Shaking 是 Rollup 的一个核心特性，它能够移除代码中未被使用的部分。在静态分析模块依赖关系后，Rollup 会查找哪些模块没有被引用，并从打包中移除这些无用的代码，从而减小文件体积。
例如，如果你只使用了某个库中的一个函数，Rollup 会剔除库中未使用的函数或模块，只保留你实际用到的部分。
2.3 代码分割（Code Splitting）
Rollup 支持 静态代码分割，能够将大的代码包拆分成多个独立的文件，以实现按需加载。不同于 Webpack，Rollup 的代码分割更加简单和高效。
2.4 插件体系
Rollup 提供了一个插件系统，可以帮助开发者处理各种类型的文件和任务。通过插件，Rollup 可以支持诸如 CSS 处理、TypeScript 转译、图像资源优化等多种功能。
常见的 Rollup 插件有：
@rollup/plugin-node-resolve：解析node_modules中的模块。@rollup/plugin-commonjs：将 CommonJS 模块转换为 ES6 模块。rollup-plugin-terser：压缩 JavaScript 代码，减小文件体积。@rollup/plugin-babel：通过 Babel 转译现代 JavaScript 代码。
3. Rollup 的实践
3.1 安装与基础配置
首先，安装 Rollup 和常用插件：
npm install --save-dev rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs rollup-plugin-terser
然后在项目根目录创建 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: 'iife', // 输出格式
name: 'MyLibrary', // 在 IIFE 格式下指定全局变量
},
plugins: [
resolve(), // 解析 node_modules 中的模块
commonjs(), // 将 CommonJS 转换为 ES6 模块
terser(), // 压缩代码
],
};
3.2 配置文件详解
-
input：指定打包的入口文件，Rollup 会从该文件开始分析并依赖其他模块。
-
output：配置输出文件，常见格式包括：
'esm'：适用于模块化系统。'cjs'：适用于 Node.js 环境。'iife'：适用于浏览器全局脚本。
-
plugins：通过插件对构建流程进行扩展，支持各种资源和任务的处理。
3.3 打包与发布
使用以下命令进行打包：
npx rollup -c
