Rollup适合打包JavaScript模块因其支持Tree Shaking、输出多种模块格式并兼容ES6。它通过rollup.config.js配置入口与出口，结合resolve和commonjs等插件处理依赖，实现高效代码打包；多格式输出可同时生成es、cjs、umd文件，并通过package.json的main、module、browser字段指定对应入口，便于不同环境按需引入，提升构建效率与兼容性。
JavaScript模块打包是现代前端开发中的关键环节，尤其在需要发布轻量级、高性能库时，Rollup 是一个非常合适的选择。相比 Webpack 更侧重应用打包，Rollup 专注于将多个模块编译成一个简洁高效的 JavaScript 文件，特别适合构建 NPM 库或工具包。
为什么选择 Rollup 打包 JavaScript 模块？
Rollup 使用 ES6 模块语法（import / export）进行静态分析，能实现“Tree Shaking”——自动剔除未使用的代码，从而输出更小的打包结果。它生成的代码更接近原生 ES 模块结构，便于其他项目按需引入。
常见使用场景包括：
- 开发通用工具库（如 Lodash 风格的函数集合）
- 构建 UI 组件库（如 Button、Modal 等可独立引入的模块）
- 发布到 NPM 的 SDK 或插件系统
基础配置文件 rollup.config.js
Rollup 的核心是配置文件 rollup.config.js，它导出一个配置对象，定义输入输出及插件。
立即学习“Java免费学习笔记（深入）”；
一个典型的基础配置如下：
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'umd',
name: 'MyLibrary'
}
};
说明：
- input：入口文件路径
- output.file：输出文件位置
-
output.format：输出格式，常见有：
- es：ES 模块（推荐用于现代项目）
- cjs：CommonJS（Node.js 兼容）
- umd：通用模块定义（兼容 AMD、CommonJS 和全局变量）
- name：UMD 模式下挂载到全局的变量名（如 window.MyLibrary）
常用插件扩展功能
Rollup 原生只支持 ES 模块，实际项目中常需借助插件处理其他资源或语法。
安装插件：
PHP商城系统是国内领先商城系统,网店系统,购物系统,网上商城系统,B2C商城系统产品.同时也是一个商业的PHP开发框架。PHP 商城系统由内容、文章、会员、留言、订单、 财务、广告、短消息、数据库管理、营销推广、内置支付管理、商品配送管理、无限级分类、全站搜索等多个功能模块插件组成。在当今瞬机万变的市场环境中，快速高效的IT解决方案是您业务成功的关键。我们PHP商城系统能为您量身打造完全符合需求
npm install --save-dev @rollup/plugin-node-resolve @rollup/plugin-commonjs
更新配置：
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'umd'
},
plugins: [
resolve(), // 支持从 node_modules 中导入模块
commonjs() // 将 CommonJS 模块转换为 ES6
]
};
其他实用插件：
- @rollup/plugin-babel：支持 JSX、TypeScript 或新语法
- rollup-plugin-terser：压缩输出代码
- @rollup/plugin-typescript：直接编译 TypeScript
多格式输出与 package.json 配置
为了兼容不同环境，通常同时输出多种格式。
配置数组形式支持多目标输出：
export default [
{
input: 'src/index.js',
output: [
{ file: 'dist/mylib.es.js', format: 'es' },
{ file: 'dist/mylib.cjs.js', format: 'cjs' },
{ file: 'dist/mylib.umd.js', format: 'umd', name: 'MyLib' }
],
plugins: [resolve(), commonjs()]
}
];
然后在 package.json 中指定主入口：
{
"main": "dist/mylib.cjs.js",
"module": "dist/mylib.es.js",
"browser": "dist/mylib.umd.js"
}
这样构建工具（如 Webpack）会优先读取 module 字段以启用 Tree Shaking。
基本上就这些。Rollup 配置简单清晰，适合专注模块化输出的场景，搭配插件生态可满足大多数库的打包需求。不复杂但容易忽略细节，比如输出格式选择和插件顺序。
