，從打包到壓縮一網打盡)
esbuild CLI核心命令速查表新手必會的10個關鍵參數(shù)從打包到壓縮一網打盡【免費下載鏈接】esbuildAn extremely fast bundler for the web項目地址: https://gitcode.com/GitHub_Trending/es/esbuild本文是esbuild CLI核心命令的速查指南。esbuild 是一款極速的 Web 打包工具bundler本文精選 10 個最關鍵參數(shù)幫你從打包、壓縮到監(jiān)聽、本地服務器快速上手新手建議先收藏再動手 esbuild CLI 10大關鍵參數(shù)一覽表esbuild 的 CLI 用法很簡單esbuild [參數(shù)] [入口文件]。下表是本文的地圖看完再進細節(jié)#參數(shù)一句話說明新手優(yōu)先級1--bundle把依賴全部打包進輸出文件???2--outfile/--outdir指定輸出文件 / 輸出目錄???3--minify一鍵壓縮代碼???4--format輸出格式iife / cjs / esm???5--platform目標平臺browser / node / neutral??6--target目標環(huán)境版本自動降級語法??7--sourcemap生成 sourcemap 方便調試??8--external外部化依賴不打進包里??9--watch監(jiān)聽模式改動自動重新構建???10--serve起本地 HTTP 開發(fā)服務器?? 官方幫助文本里把參數(shù)分成了 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 環(huán)境打包到 node 時默認esmES 模塊現(xiàn)代前端首選也是--splitting代碼分割的前提esbuild app.js --bundle --formatesm --outfiledist/app.mjs5?? --platform告訴 esbuild 給誰用browser默認按瀏覽器規(guī)則解析main字段、注入瀏覽器運行時nodeNode.js 環(huán)境保留require、不注入瀏覽器補丁neutral兩者都不假設最中立6?? --target語法自動降級指定目標環(huán)境后esbuild 會把新語法降成對應環(huán)境能跑的舊寫法如?.、??esbuild app.js --bundle --targetes2017 --outfiledist/app.js支持es2017、chrome58、firefox57、safari11、node10、ie9等寫法可用逗號寫多個目標取交集。7?? --sourcemap線上也能調試加--sourcemap會額外輸出一個.map文件瀏覽器 DevTools 里可直接看到壓縮前的源碼和行號。還有兩種變體--sourcemapinline內聯(lián)進文件和--sourcemapexternal生成但不加注釋鏈接。8?? --external把依賴排除在包外依賴很大又不想打進包里用--external:支持*通配符esbuild app.js --bundle --external:lodash --outfiledist/app.js更徹底的做法是--packagesexternal所有node_modules包全部外部化常用于打 Node.js 庫。9?? --watch開發(fā)時自動重新構建esbuild app.ts --bundle --watch文件一保存esbuild 立即增量重跑毫秒級。如果 stdin 關閉時要保持監(jiān)聽用--watchforever想延遲重建可加--watch-delay100。 --serve本地開發(fā)服務器esbuild app.ts --bundle --servedirwww --outdirwww/js --servelocalhost:8000輸出文件變化時自動重新構建并響應請求配合--serve-fallbackindex.html可做單頁應用回退省去額外安裝 dev-server。 進階加分項參數(shù)作用例子--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保留函數(shù)/類的name屬性—--version打印當前版本—打開--splitting后esbuild 會把被多個入口共同依賴的代碼抽成共享 chunk按入口各自成包 三組高頻組合命令# 生產構建打包 壓縮 sourcemap esbuild entry.js --bundle --minify --sourcemap --outdirdist # 開發(fā)構建TypeScript 入口 監(jiān)聽 本地服務器 esbuild app.ts --bundle --watch --servelocalhost:8000 # 打 Node 庫ESM 輸出 全部依賴外部化 esbuild index.ts --bundle --formatesm --packagesexternal --outdirdist 想查完整參數(shù)看這兩個源碼位置完整 help 文本Simple / Advanced 兩檔 官方示例cmd/esbuild/main.go參數(shù)解析實現(xiàn)每個--參數(shù)如何映射到內部選項pkg/cli/cli_impl.goCLI 入口 APIRun/ParseBuildOptionspkg/cli/cli.go?總結記住一句話——--bundle打包、--minify壓縮、--sourcemap調試、--watch開發(fā)、--serve起服務。把這 5 個串起來你就能覆蓋 90% 的日常場景剩下 5 個參數(shù)按需補上即可?！久赓M下載鏈接】esbuildAn extremely fast bundler for the web項目地址: https://gitcode.com/GitHub_Trending/es/esbuild創(chuàng)作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考 esbuild CLI核心命令速查表：新手必會的10個關鍵參數(shù)，從打包到壓縮一網打盡
esbuild CLI核心命令速查表新手必會的10個關鍵參數(shù)從打包到壓縮一網打盡【免費下載鏈接】esbuildAn extremely fast bundler for the web項目地址: https://gitcode.com/GitHub_Trending/es/esbuild本文是esbuild CLI核心命令的速查指南。esbuild 是一款極速的 Web 打包工具bundler本文精選 10 個最關鍵參數(shù)幫你從打包、壓縮到監(jiān)聽、本地服務器快速上手新手建議先收藏再動手 esbuild CLI 10大關鍵參數(shù)一覽表esbuild 的 CLI 用法很簡單esbuild [參數(shù)] [入口文件]。下表是本文的地圖看完再進細節(jié)#參數(shù)一句話說明新手優(yōu)先級1--bundle把依賴全部打包進輸出文件???2--outfile/--outdir指定輸出文件 / 輸出目錄???3--minify一鍵壓縮代碼???4--format輸出格式iife / cjs / esm???5--platform目標平臺browser / node / neutral??6--target目標環(huán)境版本自動降級語法??7--sourcemap生成 sourcemap 方便調試??8--external外部化依賴不打進包里??9--watch監(jiān)聽模式改動自動重新構建???10--serve起本地 HTTP 開發(fā)服務器?? 官方幫助文本里把參數(shù)分成了 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 環(huán)境打包到 node 時默認esmES 模塊現(xiàn)代前端首選也是--splitting代碼分割的前提esbuild app.js --bundle --formatesm --outfiledist/app.mjs5?? --platform告訴 esbuild 給誰用browser默認按瀏覽器規(guī)則解析main字段、注入瀏覽器運行時nodeNode.js 環(huán)境保留require、不注入瀏覽器補丁neutral兩者都不假設最中立6?? --target語法自動降級指定目標環(huán)境后esbuild 會把新語法降成對應環(huán)境能跑的舊寫法如?.、??esbuild app.js --bundle --targetes2017 --outfiledist/app.js支持es2017、chrome58、firefox57、safari11、node10、ie9等寫法可用逗號寫多個目標取交集。7?? --sourcemap線上也能調試加--sourcemap會額外輸出一個.map文件瀏覽器 DevTools 里可直接看到壓縮前的源碼和行號。還有兩種變體--sourcemapinline內聯(lián)進文件和--sourcemapexternal生成但不加注釋鏈接。8?? --external把依賴排除在包外依賴很大又不想打進包里用--external:支持*通配符esbuild app.js --bundle --external:lodash --outfiledist/app.js更徹底的做法是--packagesexternal所有node_modules包全部外部化常用于打 Node.js 庫。9?? --watch開發(fā)時自動重新構建esbuild app.ts --bundle --watch文件一保存esbuild 立即增量重跑毫秒級。如果 stdin 關閉時要保持監(jiān)聽用--watchforever想延遲重建可加--watch-delay100。 --serve本地開發(fā)服務器esbuild app.ts --bundle --servedirwww --outdirwww/js --servelocalhost:8000輸出文件變化時自動重新構建并響應請求配合--serve-fallbackindex.html可做單頁應用回退省去額外安裝 dev-server。 進階加分項參數(shù)作用例子--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保留函數(shù)/類的name屬性—--version打印當前版本—打開--splitting后esbuild 會把被多個入口共同依賴的代碼抽成共享 chunk按入口各自成包 三組高頻組合命令# 生產構建打包 壓縮 sourcemap esbuild entry.js --bundle --minify --sourcemap --outdirdist # 開發(fā)構建TypeScript 入口 監(jiān)聽 本地服務器 esbuild app.ts --bundle --watch --servelocalhost:8000 # 打 Node 庫ESM 輸出 全部依賴外部化 esbuild index.ts --bundle --formatesm --packagesexternal --outdirdist 想查完整參數(shù)看這兩個源碼位置完整 help 文本Simple / Advanced 兩檔 官方示例cmd/esbuild/main.go參數(shù)解析實現(xiàn)每個--參數(shù)如何映射到內部選項pkg/cli/cli_impl.goCLI 入口 APIRun/ParseBuildOptionspkg/cli/cli.go?總結記住一句話——--bundle打包、--minify壓縮、--sourcemap調試、--watch開發(fā)、--serve起服務。把這 5 個串起來你就能覆蓋 90% 的日常場景剩下 5 個參數(shù)按需補上即可?！久赓M下載鏈接】esbuildAn extremely fast bundler for the web項目地址: https://gitcode.com/GitHub_Trending/es/esbuild創(chuàng)作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考