惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

宝玉的分享
宝玉的分享
I
InfoQ
B
Blog
Engineering at Meta
Engineering at Meta
Y
Y Combinator Blog
GbyAI
GbyAI
T
The Blog of Author Tim Ferriss
G
Google Developers Blog
量子位
The Cloudflare Blog
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
小众软件
小众软件
博客园 - 【当耐特】
Hugging Face - Blog
Hugging Face - Blog
阮一峰的网络日志
阮一峰的网络日志
博客园 - 司徒正美
美团技术团队
人人都是产品经理
人人都是产品经理
博客园 - 三生石上(FineUI控件)
酷 壳 – CoolShell
酷 壳 – CoolShell
大猫的无限游戏
大猫的无限游戏
罗磊的独立博客
博客园 - 聂微东
IT之家
IT之家

6Jyc5p+a

【笔记】HermesAgent学习笔记 【笔记】DeepSeekHarness学习笔记 【笔记】Rollup的PluginBabel插件 【笔记】Gulp的BrowserSync插件 【笔记】Node-SSH学习笔记 【笔记】Tapable学习笔记 【笔记】Highlight.js学习笔记 【笔记】Marked学习笔记 【笔记】Webpack通过schema-utils实现Loader参数校验 【笔记】Webpack实现TreeShaking 【笔记】Webpack的WebpackBundleAnalyzer插件 【代码】校验信用卡号码 【笔记】Webpack的SpeedMesureWebpackPlugin插件 【笔记】Codex配置Brave浏览器的MCP 【笔记】Webpack的CSSMinimizerWebpackPlugin插件 【笔记】FastNodeManager学习笔记 【笔记】Terser学习笔记 【笔记】Codex配置Wireshark的MCP 【笔记】Codex配置Unity的MCP 【笔记】Codex配置Blender的MCP 【笔记】Codex配置IDEA的MCP 【笔记】Browserslist学习笔记 【笔记】Codex学习笔记 【笔记】MicrosoftStore微软商店学习笔记 【笔记】通过NapCat和AstrBot实现QQ机器人 【笔记】部署NapCat 【笔记】部署AstrBot 【笔记】Poetry学习笔记 【笔记】uv学习笔记 【笔记】Nodejs通过mysql2操作MySQL数据库
【笔记】Rollup学习笔记
57uv6Z6g · 2026-08-15 · via 6Jyc5p+a

前言

Compile small pieces of code into something larger and more complex(官网

下载依赖

1
npm install -D rollup

通过命令行参数打包JS文件

-o src/main.js:指定输出文件路径
-f:转换输出格式

-f umd --name <name>:通用环境,通过--name <name>指定在浏览器环境中的全局变量名
-f cjs:CommonJS环境
-f iife:浏览器环境,需要手动修改最后一行})({})改为})(this)})(window)
-f amd:AMD环境

1
rollup src/main.js -o dist/bundle.js

通过配置文件打包JS文件

修改配置文件

rollup.config.js
1
2
3
4
5
6
7
8
module.exports = {
input: "src/main.js",
output: {
file: "dist/bundle.js",
format: "umd",
name: "<name>"
}
}

打包为多个JS文件

rollup.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
input: "src/main.js",
output: [
{
file: "dist/bundle.js",
format: "umd",
name: "<name>"
},
{
file: "dist/bundle.cjs",
format: "cjs"
}
]
}

打包JS文件

1
rollup -c

完成