基于 rollup 实现多模块打包

在现代前端开发中，代码组织通常分为多个模块，以便更好地管理项目、提高代码复用性和优化性能。`Rollup.js` 是一款流行的模块打包工具，它以 ES6 模块为输入，生成优化过的静态资源。`Rollup` 的设计哲学是“小而美”，它的目标是提供最简洁的配置和最高效的输出。本篇文章将深入探讨如何利用 `Rollup` 来实现多模块打包。 理解 `Rollup` 的基本概念至关重要。`Rollup` 将源代码中的每个模块视为独立的实体，然后根据依赖关系进行“树摇”优化，只保留项目实际使用的代码，从而减少最终产出文件的大小。这在创建库或应用时，特别是对于那些希望最小化依赖的项目，是非常有用的。 ### 安装 Rollup 在开始之前，确保你的系统已经安装了 Node.js 和 npm。然后，通过全局安装 `rollup` 和 `rollup-plugin-node-resolve` 插件来初始化项目： ```bash npm install -g rollup npm install --save-dev rollup-plugin-node-resolve ``` ### 创建 Rollup 配置文件 `Rollup` 使用一个名为 `rollup.config.js` 的配置文件来定义打包规则。下面是一个基础配置文件示例，用于处理多模块打包： ```javascript import resolve from 'rollup-plugin-node-resolve'; import commonjs from 'rollup-plugin-commonjs'; export default { input: ['src/module1/index.js', 'src/module2/index.js'], // 输入模块 output: [ { file: 'dist/bundle1.js', format: 'cjs' // 输出 CommonJS 格式 }, { file: 'dist/bundle2.js', format: 'es' // 输出 ES 模块格式 } ], plugins: [ resolve(), // 帮助解析非相对路径模块 commonjs() // 转换 CommonJS 模块为 ES 模块 ] }; ``` 在这个配置中，我们指定了两个输入模块 `module1` 和 `module2`，以及两个输出目标，分别输出 CommonJS 和 ES 模块格式的打包结果。 ### 处理第三方依赖 `rollup-plugin-node-resolve` 插件用于解析非相对路径的模块（如 `npm` 依赖），而 `rollup-plugin-commonjs` 则用于转换 CommonJS 模块为 Rollup 可以处理的 ES 模块格式。 ### 打包模块 有了配置文件后，只需运行以下命令即可执行打包： ```bash rollup -c ``` 这将根据 `rollup.config.js` 中的设置打包你的模块，并生成指定格式的输出文件。 ### 扩展 Rollup 功能 `Rollup` 支持丰富的插件生态系统，你可以根据需求添加更多插件，例如： - `rollup-plugin-babel`：用于转译 ES6+ 语法。 - `rollup-plugin-postcss`：处理 CSS 样式。 - `rollup-plugin-terser`：进一步压缩输出代码。 - `rollup-plugin-image`：处理图片资源。 ### 模块组织与导入 为了实现多模块打包，你的源代码应按照模块进行组织，每个模块都有自己的目录结构。例如： ``` src/ ├── module1 │ └── index.js ├── module2 │ └── index.js └── index.js // 入口文件，用于导入各模块 ``` 在入口文件 `index.js` 中，可以使用 `import` 语句引入并组合这些模块： ```javascript import module1 from './module1'; import module2 from './module2'; // 使用模块... ``` ### 总结 `Rollup` 是一个强大的模块打包工具，尤其适合创建库和优化代码体积。通过合理的配置和插件选择，我们可以轻松地实现多模块打包，同时充分利用其优化功能。掌握 `Rollup` 的使用技巧，有助于提升项目的可维护性和性能表现。