為什麼又造個輪子？
為什麼又要構建一個 JavaScript 構建工具呢？因為當前用於 Web 的構建工具比用戶期望的性能至少慢一個數量級。我希望這個項目可以作為一種“存在證明”，證明我們的 JavaScript 工具實際上能比現在快得多。
基準測試
我想到的用例是打包用於生產的大型代碼庫。這個流程包括壓縮代碼以減少網絡傳輸時間，以及生成源映射（對於調試生產中的錯誤是非常重要的）。理想情況下，構建工具還應該具備快速構建能力，而不必先預熱緩存。
我的主基準測試會將 three.js 庫複製 10 次並從頭開始構建單個包，過程中沒有任何緩存，從而模擬一個大型代碼庫。在這個基準測試中，esbuild 比我測試的其他 JavaScript 打包器（Webpack、Rollup、Parcel 和 FuseBox）快 10-100 倍。這個基準測試可以使用’make bench-three’來運行。
時間數據取三次運行中最好的一次，主要運行環境如下：
- 使用’–bundle --minify --sourcemap’來運行 esbuild。
- 使用’rollup-plugin-terser’插件，因為 rollup 自身不支持壓縮。
- Webpack 使用的是’–mode = production --devtool = sourcemap’。
- Parcel 使用默認選項。
- FuseBox 使用’useSingleBundle: true’配置。
- 絕對速度基於總行數（包括註釋和空白行），當前為 547,441。
- 測試是在配備 16GB RAM 的 6 核 2019 MacBook Pro 上完成的。
為什麼這麼快？
幾個原因：
- 它是用 Go 語言編寫的，該語言可以編譯為原生代碼；
- 解析，打印和源映射生成全部完全並行化；
- 無需昂貴的數據轉換，只需很少的幾步即可完成所有操作；
- 編寫代碼時處處注意速度表現，並儘量避免不必要的配置。
狀態
目前支持：
- CommonJS 模塊
- ES6 模塊
- 使用’–bundle’與 ES6 模塊的靜態綁定打包
- 使用’–minify’完全壓縮（空格、標識符和修飾符）
- 啟用’–sourcemap’時，完全支持源映射
- .jsx 文件的 JSX 到 JavaScript 轉換
- 通過’–define’進行編譯時標識符替換
- 使用 package.json 中的’browser’字段進行路徑替換
- 自動檢測 tsconfig.json 中的’baseUrl’
這是我在 2019-2020 年寒假期間寫的一項業餘愛好項目。我相信它是相對完整和實用的。但它是全新的代碼，可能有很多錯誤。還沒有任何人在生產中使用過它。使用風險自負。
還請記住，它並不完全支持將現代語言語法降低到早期語言版本。目前只有類字段和 nullish 合併運算符是支持的。
我個人不想運營一個大型的開源項目，因此我目前沒在尋求貢獻。
安裝
如果你已安裝 Go 語言工具鏈，可以使用’make’生成可執行文件。當前可在 npm 上的單獨軟件包中找到預構建的二進制文件：
<code>npm install -g esbuild-linux-64 # for Linuxnpm install -g esbuild-darwin-64 # for macOSnpm install -g esbuild-windows-64 # for Windowsnpm install -g esbuild-wasm # for all other platforms/<code>
這將添加一個名為’esbuild’的命令。
用法
命令行界面獲取入口點列表，併為每個入口點生成一個打包文件。以下是可用的選項：
複製代碼
<code>Usage: esbuild [options] [entry points] Options: --name=... 模塊名稱 --bundle 將所以依賴項打包進輸出文件 --outfile=... 輸出文件 (用於一個入口點) --outdir=... 輸出目錄 (用於多個入口點) --sourcemap 發出一個源映射 --error-limit=... 最大錯誤計數，0 是禁用 (默認值為 10) --target=... 語言目標 (默認 esnext) --minify 設置所有 --minify-* flags --minify-whitespace 移除空格 --minify-identifiers 縮短標識符 --minify-syntax 使用較短的等效語法 --define:K=V 解析時用 V 替換 K --jsx-factory=... 用來替換 React.createElement 的內容 --jsx-fragment=... 用來替換 React.Fragment 的內容 --trace=... 在這個文件中寫入一個 CPU trace --cpuprofile=... 在這個文件中寫入一個 CPU profileExample: # Produces dist/entry_point.js and dist/entry_point.js.map esbuild --bundle entry_point.js --outdir=dist --minify --sourcemap/<code>
與 React 一起使用
要將 esbuild 與 React 一起使用：
- 確保所有 JSX 語法都放在.jsx 文件而不是.js 文件中，因為 esbuild 使用文件擴展名來確定要解析的語法。
- 如果你使用的是 TypeScript，請先運行’tsc’以將.tsx 文件轉換為.jsx 或.js 文件。
- 如果你使用 esbuild 打包 React 自身，而不是在 HTML 中使用
閱讀更多 InfoQ 的文章
