esbuild CLI核心命令速查表新手必会的10个关键参数从打包到压缩一网打尽【免费下载链接】esbuildAn extremely fast bundler for the web项目地址: https://gitcode.com/GitHub_Trending/es/esbuild本文是esbuild CLI核心命令的速查指南。esbuild 是一款极速的 Web 打包工具bundler本文精选 10 个最关键参数帮你从打包、压缩到监听、本地服务器快速上手新手建议先收藏再动手 esbuild CLI 10大关键参数一览表esbuild 的 CLI 用法很简单esbuild [参数] [入口文件]。下表是本文的地图看完再进细节#参数一句话说明新手优先级1--bundle把依赖全部打包进输出文件⭐⭐⭐2--outfile/--outdir指定输出文件 / 输出目录⭐⭐⭐3--minify一键压缩代码⭐⭐⭐4--format输出格式iife / cjs / esm⭐⭐⭐5--platform目标平台browser / node / neutral⭐⭐6--target目标环境版本自动降级语法⭐⭐7--sourcemap生成 sourcemap 方便调试⭐⭐8--external外部化依赖不打进包里⭐⭐9--watch监听模式改动自动重新构建⭐⭐⭐10--serve起本地 HTTP 开发服务器⭐⭐ 官方帮助文本里把参数分成了 Simple options 和 Advanced options 两档见 cmd/esbuild/main.go。1️⃣ --bundle打包的核心开关不加--bundle时esbuild 只处理单个文件类似 transform加上它才会递归解析 import 依赖并合并输出。esbuild app.js --bundle --outfiledist/app.jsesbuild 的打包分两个阶段扫描阶段 → 编译阶段这也是它快的原因之一依赖是如何被分析成图的esbuild 会追踪模块间的副作用边与符号边 打包流程的完整原理可参考 docs/architecture.md。2️⃣ --outfile / --outdir把结果写到哪里单个入口 → 用--outfiledist/app.js多个入口 → 用--outdirdist每个入口生成对应文件这是官方帮助里的第一条示例命令esbuild --bundle entry.js --outdirdist --minify --sourcemap3️⃣ --minify一键压缩体积立降--minify等价于同时打开三个开关--minify-whitespace去掉多余空白--minify-identifiers变量名缩短为a、b、c…--minify-syntax用更短的等价语法如typeof x ! undefined→x ! void 0压缩时 esbuild 的树摇tree shaking会自动剔除未被使用的代码下图中被标红的部分就是会被移除的死代码三个开关可以单独控制比如只想缩短变量名esbuild app.js --bundle --minify-identifiers --outfiledist/app.js4️⃣ --format输出模块格式值用途iife浏览器script标签直接引入打包到 browser 时默认cjsCommonJSNode.js 环境打包到 node 时默认esmES 模块现代前端首选也是--splitting代码分割的前提esbuild app.js --bundle --formatesm --outfiledist/app.mjs5️⃣ --platform告诉 esbuild 给谁用browser默认按浏览器规则解析main字段、注入浏览器运行时nodeNode.js 环境保留require、不注入浏览器补丁neutral两者都不假设最中立6️⃣ --target语法自动降级指定目标环境后esbuild 会把新语法降成对应环境能跑的旧写法如?.、??esbuild app.js --bundle --targetes2017 --outfiledist/app.js支持es2017、chrome58、firefox57、safari11、node10、ie9等写法可用逗号写多个目标取交集。7️⃣ --sourcemap线上也能调试加--sourcemap会额外输出一个.map文件浏览器 DevTools 里可直接看到压缩前的源码和行号。还有两种变体--sourcemapinline内联进文件和--sourcemapexternal生成但不加注释链接。8️⃣ --external把依赖排除在包外依赖很大又不想打进包里用--external:支持*通配符esbuild app.js --bundle --external:lodash --outfiledist/app.js更彻底的做法是--packagesexternal所有node_modules包全部外部化常用于打 Node.js 库。9️⃣ --watch开发时自动重新构建esbuild app.ts --bundle --watch文件一保存esbuild 立即增量重跑毫秒级。如果 stdin 关闭时要保持监听用--watchforever想延迟重建可加--watch-delay100。 --serve本地开发服务器esbuild app.ts --bundle --servedirwww --outdirwww/js --servelocalhost:8000输出文件变化时自动重新构建并响应请求配合--serve-fallbackindex.html可做单页应用回退省去额外安装 dev-server。 进阶加分项参数作用例子--define:KV编译期常量替换--define:RELEASEtrue--loader:XL给指定扩展名换 loader--loader:.jsjsx--splitting代码分割公共代码抽成共享 chunk仅 esm见下图--tree-shaking...强制开/关树摇--tree-shakingfalse--drop:console删除 console / debugger 语句--drop:console --drop:debugger--analyze输出打包体积分析报告--analyzeverbose--keep-names保留函数/类的name属性—--version打印当前版本—打开--splitting后esbuild 会把被多个入口共同依赖的代码抽成共享 chunk按入口各自成包 三组高频组合命令# 生产构建打包 压缩 sourcemap esbuild entry.js --bundle --minify --sourcemap --outdirdist # 开发构建TypeScript 入口 监听 本地服务器 esbuild app.ts --bundle --watch --servelocalhost:8000 # 打 Node 库ESM 输出 全部依赖外部化 esbuild index.ts --bundle --formatesm --packagesexternal --outdirdist 想查完整参数看这两个源码位置完整 help 文本Simple / Advanced 两档 官方示例cmd/esbuild/main.go参数解析实现每个--参数如何映射到内部选项pkg/cli/cli_impl.goCLI 入口 APIRun/ParseBuildOptionspkg/cli/cli.go✅总结记住一句话——--bundle打包、--minify压缩、--sourcemap调试、--watch开发、--serve起服务。把这 5 个串起来你就能覆盖 90% 的日常场景剩下 5 个参数按需补上即可。【免费下载链接】esbuildAn extremely fast bundler for the web项目地址: https://gitcode.com/GitHub_Trending/es/esbuild创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考