哈嘍，大家好！我是「勵志前端小黑哥」，我?guī)е钚掳l(fā)布的文章又來了！

老規(guī)矩，小手動起來~點贊關注不迷路！

esbuild簡單介紹

esbuild為了突破了JavaScript語言的瓶頸，采用了Go語言編寫，構(gòu)建速度與同代碼量下的webpack對比提升在10倍以上，開創(chuàng)了構(gòu)建工具性能的新時代。

它的中文文檔，本人正在不斷的更新完善中，歡迎大家關注閱讀！

路徑解析配置項 Path resolution

別名 Alias

Supported by: Build

此功能允許您在打包時用一個包替換另一個包。以下示例將包oldpkg替換為包newpkg：

esbuild app.js --bundle --alias:oldpkg=newpkg

這些替換首先會發(fā)生在esbuild所有的路徑解析邏輯之前。此功能的一個使用場景是使用瀏覽器兼容包替換僅Node環(huán)境可使用的包，從而替換那些您無法控制的第三方代碼，。

請注意，當使用Alias替換導入路徑時，生成的導入路徑將在工作目錄中解析，而不是在包含具有導入路徑的源文件的目錄中解析。如果需要，可以使用Working directory功能設置esbuild所使用的工作目錄。

條件解析 Conditions

Supported by: Build

此功能控制如何解析package.json中的exports字段。可以使用conditions設置添加自定義條件。您可以根據(jù)需要指定任意多個條件，這完全取決于包的作者。Node目前只推薦使用development和production的自定義條件。以下是添加自定義條件custom1和custom2的示例：

esbuild src/app.js --bundle --conditions=custom1,custom2

conditions是如何工作的

contitions允許您在不同的情況下將相同的import路徑重定向到不同的文件位置。包含條件和路徑的重定向Map存儲在包的package.json文件的exports字段中。例如，下面這個例子將使用import和required條件將require（'pkg/foo'）重新映射到pkg/required.cjs，并將import 'pkg/foo'導入映射到pkg/imported.mjs：

{"name": "pkg","exports": {"./foo": {"import": "./imported.mjs","require": "./required.cjs","default": "./fallback.js"}}
}

conditions配置按照它們在JSON文件中出現(xiàn)的順序進行檢查。所以上面的例子有點像下面這個流程：

if (importPath === './foo') {if (conditions.has('import')) return './imported.mjs'if (conditions.has('require')) return './required.cjs'return './fallback.js'
}

默認情況下，有五種具有特殊含義的條件內(nèi)置到esbuild中，并且不能禁用：

• default

這種情況始終處于激活狀態(tài)。它旨在排在最后，并允許您在沒有其他條件適用時提供后備方案。當您在node中以本地方式運行代碼時，此條件也處于活動狀態(tài)。

• import

只有當導入路徑來自ESM的import語句或import()表達式時，此條件才處于活動狀態(tài)。它可用于提供ESM特定的代碼。當您在node中以本地方式運行代碼時（但僅在ESM上下文中），此條件也處于活動狀態(tài)。

• require

只有當導入路徑來自CommonJS的require()調(diào)用時，此條件才處于活動狀態(tài)。它可以用來提供CommonJS特定的代碼。當您在node中以本地方式運行代碼時（但僅在CommonJS上下文中），此條件也是活動的。

• browser

只有當esbuild的platform參數(shù)設置為browser時，此條件才處于活動狀態(tài)。它可以用于提供特定于瀏覽器的代碼。當您在node中以本地方式運行代碼時，此條件不處于活動狀態(tài)。

• node

只有當esbuild的platform參數(shù)設置為node時，此條件才處于活動狀態(tài)。它可以用于提供特定的nodejs代碼。當您在node中以本地方式運行代碼時，此條件也處于活動狀態(tài)。

當platform設置為browser或node且未配置自定義條件時，還會自動包含以下條件。如果配置了任何自定義條件（甚至是空列表），則此條件將不再自動包含：

• module

此條件可用于告訴esbuild為給定的import路徑選擇合適的ESM變體，以便在打包時提供更好的樹抖動tree shaking。當您在node中以本地方式運行代碼時，此條件不處于活動狀態(tài)。它是esbuild打包器特有的，靈感來源源于Webpack。

請注意，當您使用require和import條件時，您的包可能會多次出現(xiàn)在打包文件中！這是一個小問題，除了導致打包文件膨脹之外，可能會由于代碼狀態(tài)的重復副本而導致錯誤。這通常被稱為雙包危害。

避免雙包危害的一種方法是將所有代碼作為CommonJS放入require條件中，并使導入條件僅為一個簡單的ESM包裝器，該包裝器在包上調(diào)用require，并使用ESM語法重新導出包。然而，這種方法不能提供良好的樹抖動，因為esbuild不會對CommonJS模塊進行樹抖動。

避免雙包危害的另一種方法是使用打包器特定的module條件來指導打包器始終加載包的ESM版本，同時讓node始終回退到包的CommonJS版本。import和module都用于ESM，但與import不同的是，即使使用require調(diào)用加載了import路徑，module條件也始終處于活動狀態(tài)。這在打包器中很好地工作，因為打包器支持使用require加載ESM，但它不能與node一起工作，因為node故意不使用require實現(xiàn)加載ESM。

結(jié)語

筆者根據(jù)esbuild文檔搭建了一套簡潔的ts開發(fā)腳手架工程，編譯速度非?？?#xff01;腳手架還整合了eslint，另一篇文章還附帶了調(diào)試教程，需要的朋友看這里：esbuild配合vscode搭建的ts開發(fā)環(huán)境，這編譯速度，真香

另外，esbuild中文文檔專欄，本人目前正在翻譯整理，關注我，有最新的翻譯文檔會第一時間通知你！

（本文完）

勵志前端小黑哥，全網(wǎng)唯一賬號！
關注我，帶你了解更多前端知識！