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

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

esbuild簡單介紹

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

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

路徑解析配置項(xiàng) Path resolution

別名 Alias

Supported by: Build

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

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

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

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

條件解析 Conditions

Supported by: Build

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

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

conditions是如何工作的

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

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

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

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

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

• default

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

• import

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

• require

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

• browser

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

• node

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

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

• module

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

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

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

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

結(jié)語

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

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

（本文完）

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