使用 Rollup.js 快速开始构建一个前端项目
Rollup 是一个用于 JavaScript 项目的模块打包器。它支持 ES6 模块标准，并且通过 Tree-shaking（摇树优化）来删除未使用的代码，从而生成更小的文件，非常适合现代 JavaScript 项目。
Rollup 工作流程
Rollup 的工作流程如下：
- 初始化：解析 CLI 参数和配置文件，设置插件和加载器。
- 构建：解析入口文件，追踪依赖项，并构建模块依赖图。
- 打包：根据模块依赖图生成最终的输出代码。
- 输出：将打包后的代码写入文件系统。
核心模块
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 和插件，可以高效地管理前端项目的模块打包和优化过程。希望这能帮助您快速上手并构建自己的项目。