Rollup 作为高效简洁的 JavaScript 模块打包器，内置树摇功能以删除未使用代码，原生支持 ES 模块并拥有灵活插件系统。内容涵盖基本配置方法、常用插件如 @rollup/plugin-node-resolve 和 @rollup/plugin-babel，以及代码分割、动态导入和输出多种格式等高级特性。同时提供与 Webpack 的对比分析、性能优化策略包括使用 terser 插件和外部化依赖，总结实际项目应用中的最佳实践与未来发展趋势。
在现代前端开发中，模块打包器扮演着至关重要的角色。Rollup 作为一个高效、简洁的 JavaScript 模块打包器，以其出色的性能和灵活的配置而备受青睐。本文将深入探讨 Rollup 的核心概念、基本用法、高级特性以及最佳实践，帮助开发者更好地理解和使用这个强大的工具。
Rollup 最引人注目的特性之一就是其内置的树摇功能。树摇是一种通过静态分析代码来删除未使用代码的技术。这使得 Rollup 能够生成更小、更高效的包。
Rollup 原生支持 ES 模块（ESM），这是 JavaScript 的官方标准化模块系统。使用 ES 模块不仅可以让代码更加模块化，还能够更好地支持树摇。
Rollup 采用了一个强大而灵活的插件系统，允许开发者扩展和自定义构建过程。从转换代码到优化输出，插件几乎可以处理构建过程的每个方面。
一个基本的 Rollup 配置文件通常包含以下内容：
// rollup.config.js
export default {
input: 'src/main.js',
output: {
file: 'bundle.js',
format: 'iife'
}
};
这个简单的配置指定了入口文件（input）和输出选项（output）。format 选项指定了生成包的格式，这里的 iife 表示立即执行函数表达式。
Rollup 的强大很大程度上来自于其丰富的插件生态。以下是一些常用的插件：
这个插件允许 Rollup 查找外部模块。
import resolve from '@rollup/plugin-node-resolve';
export default {
// ...
plugins: [resolve()]
};
将 CommonJS 模块转换为 ES 模块。
import commonjs from '@rollup/plugin-commonjs';
export default {
plugins: [commonjs()]
};
用于在打包前对代码进行转译，支持现代 JavaScript 语法。
import babel from '@rollup/plugin-babel';
export default {
plugins: [
babel({
exclude: 'node_modules/**'
})
]
};
用于压缩输出代码，减小体积。
import terser from 'rollup-plugin-terser';
export default {
plugins: [terser()]
};
Rollup 支持动态导入，可以根据条件加载模块，实现代码分割，减少初始加载时间。
使用 import() 语法可以在运行时加载模块，Rollup 会自动将其识别为动态依赖并创建单独的 chunk。
Rollup 支持输出多种模块格式，包括 UMD、AMD、ESM、CJS 等，适应不同的运行环境。
Rollup 专注于库的开发，适合打包 ES 模块；Webpack 则更适合复杂的应用场景，支持更多类型的资源处理。两者各有优势，选择取决于具体项目需求。
在构建生产版本时启用压缩插件，减少最终包的大小。
对于不随包一起分发的依赖（如 React、Vue），可配置为外部依赖，避免重复打包。
开启 Source Map 以便调试时能定位到原始源代码位置。
适用于构建 npm 包、微前端架构中的子应用打包等场景。
随着前端工程化的演进，Rollup 将继续优化构建速度和兼容性，支持更多新标准。
Rollup 是构建高质量 JavaScript 库的理想选择，掌握其核心概念与配置方法能显著提升开发效率。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online