關(guān)鍵參數(shù)，從打包到壓縮一網(wǎng)打盡)
esbuild CLI核心命令速查表新手必會的10個(gè)關(guān)鍵參數(shù)從打包到壓縮一網(wǎng)打盡【免費(fèi)下載鏈接】esbuildAn extremely fast bundler for the web項(xiàng)目地址: https://gitcode.com/GitHub_Trending/es/esbuild本文是esbuild CLI核心命令的速查指南。esbuild 是一款極速的 Web 打包工具bundler本文精選 10 個(gè)最關(guān)鍵參數(shù)幫你從打包、壓縮到監(jiān)聽、本地服務(wù)器快速上手新手建議先收藏再動手 esbuild CLI 10大關(guān)鍵參數(shù)一覽表esbuild 的 CLI 用法很簡單esbuild [參數(shù)] [入口文件]。下表是本文的地圖看完再進(jìn)細(xì)節(jié)#參數(shù)一句話說明新手優(yōu)先級1--bundle把依賴全部打包進(jìn)輸出文件???2--outfile/--outdir指定輸出文件 / 輸出目錄???3--minify一鍵壓縮代碼???4--format輸出格式iife / cjs / esm???5--platform目標(biāo)平臺browser / node / neutral??6--target目標(biāo)環(huán)境版本自動降級語法??7--sourcemap生成 sourcemap 方便調(diào)試??8--external外部化依賴不打進(jìn)包里??9--watch監(jiān)聽模式改動自動重新構(gòu)建???10--serve起本地 HTTP 開發(fā)服務(wù)器?? 官方幫助文本里把參數(shù)分成了 Simple options 和 Advanced options 兩檔見 cmd/esbuild/main.go。1?? --bundle打包的核心開關(guān)不加--bundle時(shí)esbuild 只處理單個(gè)文件類似 transform加上它才會遞歸解析 import 依賴并合并輸出。esbuild app.js --bundle --outfiledist/app.jsesbuild 的打包分兩個(gè)階段掃描階段 → 編譯階段這也是它快的原因之一依賴是如何被分析成圖的esbuild 會追蹤模塊間的副作用邊與符號邊 打包流程的完整原理可參考 docs/architecture.md。2?? --outfile / --outdir把結(jié)果寫到哪里單個(gè)入口 → 用--outfiledist/app.js多個(gè)入口 → 用--outdirdist每個(gè)入口生成對應(yīng)文件這是官方幫助里的第一條示例命令esbuild --bundle entry.js --outdirdist --minify --sourcemap3?? --minify一鍵壓縮體積立降--minify等價(jià)于同時(shí)打開三個(gè)開關(guān)--minify-whitespace去掉多余空白--minify-identifiers變量名縮短為a、b、c…--minify-syntax用更短的等價(jià)語法如typeof x ! undefined→x ! void 0壓縮時(shí) esbuild 的樹搖tree shaking會自動剔除未被使用的代碼下圖中被標(biāo)紅的部分就是會被移除的死代碼三個(gè)開關(guān)可以單獨(dú)控制比如只想縮短變量名esbuild app.js --bundle --minify-identifiers --outfiledist/app.js4?? --format輸出模塊格式值用途iife瀏覽器script標(biāo)簽直接引入打包到 browser 時(shí)默認(rèn)cjsCommonJSNode.js 環(huán)境打包到 node 時(shí)默認(rèn)esmES 模塊現(xiàn)代前端首選也是--splitting代碼分割的前提esbuild app.js --bundle --formatesm --outfiledist/app.mjs5?? --platform告訴 esbuild 給誰用browser默認(rèn)按瀏覽器規(guī)則解析main字段、注入瀏覽器運(yùn)行時(shí)nodeNode.js 環(huán)境保留require、不注入瀏覽器補(bǔ)丁neutral兩者都不假設(shè)最中立6?? --target語法自動降級指定目標(biāo)環(huán)境后esbuild 會把新語法降成對應(yīng)環(huán)境能跑的舊寫法如?.、??esbuild app.js --bundle --targetes2017 --outfiledist/app.js支持es2017、chrome58、firefox57、safari11、node10、ie9等寫法可用逗號寫多個(gè)目標(biāo)取交集。7?? --sourcemap線上也能調(diào)試加--sourcemap會額外輸出一個(gè).map文件瀏覽器 DevTools 里可直接看到壓縮前的源碼和行號。還有兩種變體--sourcemapinline內(nèi)聯(lián)進(jìn)文件和--sourcemapexternal生成但不加注釋鏈接。8?? --external把依賴排除在包外依賴很大又不想打進(jìn)包里用--external:支持*通配符esbuild app.js --bundle --external:lodash --outfiledist/app.js更徹底的做法是--packagesexternal所有node_modules包全部外部化常用于打 Node.js 庫。9?? --watch開發(fā)時(shí)自動重新構(gòu)建esbuild app.ts --bundle --watch文件一保存esbuild 立即增量重跑毫秒級。如果 stdin 關(guān)閉時(shí)要保持監(jiān)聽用--watchforever想延遲重建可加--watch-delay100。 --serve本地開發(fā)服務(wù)器esbuild app.ts --bundle --servedirwww --outdirwww/js --servelocalhost:8000輸出文件變化時(shí)自動重新構(gòu)建并響應(yīng)請求配合--serve-fallbackindex.html可做單頁應(yīng)用回退省去額外安裝 dev-server。 進(jìn)階加分項(xiàng)參數(shù)作用例子--define:KV編譯期常量替換--define:RELEASEtrue--loader:XL給指定擴(kuò)展名換 loader--loader:.jsjsx--splitting代碼分割公共代碼抽成共享 chunk僅 esm見下圖--tree-shaking...強(qiáng)制開/關(guān)樹搖--tree-shakingfalse--drop:console刪除 console / debugger 語句--drop:console --drop:debugger--analyze輸出打包體積分析報(bào)告--analyzeverbose--keep-names保留函數(shù)/類的name屬性—--version打印當(dāng)前版本—打開--splitting后esbuild 會把被多個(gè)入口共同依賴的代碼抽成共享 chunk按入口各自成包 三組高頻組合命令# 生產(chǎn)構(gòu)建打包 壓縮 sourcemap esbuild entry.js --bundle --minify --sourcemap --outdirdist # 開發(fā)構(gòu)建TypeScript 入口 監(jiān)聽 本地服務(wù)器 esbuild app.ts --bundle --watch --servelocalhost:8000 # 打 Node 庫ESM 輸出 全部依賴外部化 esbuild index.ts --bundle --formatesm --packagesexternal --outdirdist 想查完整參數(shù)看這兩個(gè)源碼位置完整 help 文本Simple / Advanced 兩檔 官方示例cmd/esbuild/main.go參數(shù)解析實(shí)現(xiàn)每個(gè)--參數(shù)如何映射到內(nèi)部選項(xiàng)pkg/cli/cli_impl.goCLI 入口 APIRun/ParseBuildOptionspkg/cli/cli.go?總結(jié)記住一句話——--bundle打包、--minify壓縮、--sourcemap調(diào)試、--watch開發(fā)、--serve起服務(wù)。把這 5 個(gè)串起來你就能覆蓋 90% 的日常場景剩下 5 個(gè)參數(shù)按需補(bǔ)上即可?！久赓M(fèi)下載鏈接】esbuildAn extremely fast bundler for the web項(xiàng)目地址: https://gitcode.com/GitHub_Trending/es/esbuild創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 esbuild CLI核心命令速查表：新手必會的10個(gè)關(guān)鍵參數(shù)，從打包到壓縮一網(wǎng)打盡
esbuild CLI核心命令速查表新手必會的10個(gè)關(guān)鍵參數(shù)從打包到壓縮一網(wǎng)打盡【免費(fèi)下載鏈接】esbuildAn extremely fast bundler for the web項(xiàng)目地址: https://gitcode.com/GitHub_Trending/es/esbuild本文是esbuild CLI核心命令的速查指南。esbuild 是一款極速的 Web 打包工具bundler本文精選 10 個(gè)最關(guān)鍵參數(shù)幫你從打包、壓縮到監(jiān)聽、本地服務(wù)器快速上手新手建議先收藏再動手 esbuild CLI 10大關(guān)鍵參數(shù)一覽表esbuild 的 CLI 用法很簡單esbuild [參數(shù)] [入口文件]。下表是本文的地圖看完再進(jìn)細(xì)節(jié)#參數(shù)一句話說明新手優(yōu)先級1--bundle把依賴全部打包進(jìn)輸出文件???2--outfile/--outdir指定輸出文件 / 輸出目錄???3--minify一鍵壓縮代碼???4--format輸出格式iife / cjs / esm???5--platform目標(biāo)平臺browser / node / neutral??6--target目標(biāo)環(huán)境版本自動降級語法??7--sourcemap生成 sourcemap 方便調(diào)試??8--external外部化依賴不打進(jìn)包里??9--watch監(jiān)聽模式改動自動重新構(gòu)建???10--serve起本地 HTTP 開發(fā)服務(wù)器?? 官方幫助文本里把參數(shù)分成了 Simple options 和 Advanced options 兩檔見 cmd/esbuild/main.go。1?? --bundle打包的核心開關(guān)不加--bundle時(shí)esbuild 只處理單個(gè)文件類似 transform加上它才會遞歸解析 import 依賴并合并輸出。esbuild app.js --bundle --outfiledist/app.jsesbuild 的打包分兩個(gè)階段掃描階段 → 編譯階段這也是它快的原因之一依賴是如何被分析成圖的esbuild 會追蹤模塊間的副作用邊與符號邊 打包流程的完整原理可參考 docs/architecture.md。2?? --outfile / --outdir把結(jié)果寫到哪里單個(gè)入口 → 用--outfiledist/app.js多個(gè)入口 → 用--outdirdist每個(gè)入口生成對應(yīng)文件這是官方幫助里的第一條示例命令esbuild --bundle entry.js --outdirdist --minify --sourcemap3?? --minify一鍵壓縮體積立降--minify等價(jià)于同時(shí)打開三個(gè)開關(guān)--minify-whitespace去掉多余空白--minify-identifiers變量名縮短為a、b、c…--minify-syntax用更短的等價(jià)語法如typeof x ! undefined→x ! void 0壓縮時(shí) esbuild 的樹搖tree shaking會自動剔除未被使用的代碼下圖中被標(biāo)紅的部分就是會被移除的死代碼三個(gè)開關(guān)可以單獨(dú)控制比如只想縮短變量名esbuild app.js --bundle --minify-identifiers --outfiledist/app.js4?? --format輸出模塊格式值用途iife瀏覽器script標(biāo)簽直接引入打包到 browser 時(shí)默認(rèn)cjsCommonJSNode.js 環(huán)境打包到 node 時(shí)默認(rèn)esmES 模塊現(xiàn)代前端首選也是--splitting代碼分割的前提esbuild app.js --bundle --formatesm --outfiledist/app.mjs5?? --platform告訴 esbuild 給誰用browser默認(rèn)按瀏覽器規(guī)則解析main字段、注入瀏覽器運(yùn)行時(shí)nodeNode.js 環(huán)境保留require、不注入瀏覽器補(bǔ)丁neutral兩者都不假設(shè)最中立6?? --target語法自動降級指定目標(biāo)環(huán)境后esbuild 會把新語法降成對應(yīng)環(huán)境能跑的舊寫法如?.、??esbuild app.js --bundle --targetes2017 --outfiledist/app.js支持es2017、chrome58、firefox57、safari11、node10、ie9等寫法可用逗號寫多個(gè)目標(biāo)取交集。7?? --sourcemap線上也能調(diào)試加--sourcemap會額外輸出一個(gè).map文件瀏覽器 DevTools 里可直接看到壓縮前的源碼和行號。還有兩種變體--sourcemapinline內(nèi)聯(lián)進(jìn)文件和--sourcemapexternal生成但不加注釋鏈接。8?? --external把依賴排除在包外依賴很大又不想打進(jìn)包里用--external:支持*通配符esbuild app.js --bundle --external:lodash --outfiledist/app.js更徹底的做法是--packagesexternal所有node_modules包全部外部化常用于打 Node.js 庫。9?? --watch開發(fā)時(shí)自動重新構(gòu)建esbuild app.ts --bundle --watch文件一保存esbuild 立即增量重跑毫秒級。如果 stdin 關(guān)閉時(shí)要保持監(jiān)聽用--watchforever想延遲重建可加--watch-delay100。 --serve本地開發(fā)服務(wù)器esbuild app.ts --bundle --servedirwww --outdirwww/js --servelocalhost:8000輸出文件變化時(shí)自動重新構(gòu)建并響應(yīng)請求配合--serve-fallbackindex.html可做單頁應(yīng)用回退省去額外安裝 dev-server。 進(jìn)階加分項(xiàng)參數(shù)作用例子--define:KV編譯期常量替換--define:RELEASEtrue--loader:XL給指定擴(kuò)展名換 loader--loader:.jsjsx--splitting代碼分割公共代碼抽成共享 chunk僅 esm見下圖--tree-shaking...強(qiáng)制開/關(guān)樹搖--tree-shakingfalse--drop:console刪除 console / debugger 語句--drop:console --drop:debugger--analyze輸出打包體積分析報(bào)告--analyzeverbose--keep-names保留函數(shù)/類的name屬性—--version打印當(dāng)前版本—打開--splitting后esbuild 會把被多個(gè)入口共同依賴的代碼抽成共享 chunk按入口各自成包 三組高頻組合命令# 生產(chǎn)構(gòu)建打包 壓縮 sourcemap esbuild entry.js --bundle --minify --sourcemap --outdirdist # 開發(fā)構(gòu)建TypeScript 入口 監(jiān)聽 本地服務(wù)器 esbuild app.ts --bundle --watch --servelocalhost:8000 # 打 Node 庫ESM 輸出 全部依賴外部化 esbuild index.ts --bundle --formatesm --packagesexternal --outdirdist 想查完整參數(shù)看這兩個(gè)源碼位置完整 help 文本Simple / Advanced 兩檔 官方示例cmd/esbuild/main.go參數(shù)解析實(shí)現(xiàn)每個(gè)--參數(shù)如何映射到內(nèi)部選項(xiàng)pkg/cli/cli_impl.goCLI 入口 APIRun/ParseBuildOptionspkg/cli/cli.go?總結(jié)記住一句話——--bundle打包、--minify壓縮、--sourcemap調(diào)試、--watch開發(fā)、--serve起服務(wù)。把這 5 個(gè)串起來你就能覆蓋 90% 的日常場景剩下 5 個(gè)參數(shù)按需補(bǔ)上即可?！久赓M(fèi)下載鏈接】esbuildAn extremely fast bundler for the web項(xiàng)目地址: https://gitcode.com/GitHub_Trending/es/esbuild創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考