比較新一代的構建工具

在過去的一年中，許多新開發人員工具都登陸了，他們一直在過去幾年中占主導地位的前端開發工具的高跟鞋，包括WebPack，Babel，crolup，crolup，parcel，parcel，create-reacter-app。

這些新工具並非旨在執行完全相同的功能，並且每個工具都有他們試圖實現的不同事物，並且可以實現目標。儘管有差異，但這些工具確實有一個共同的目標：改善開發人員的體驗。

目錄

1. 為什麼這些工具現在都到達？
2. 這些與現有工具有何不同？
3. 實驗
4. 可比較的功能
5. Esbuild
6. 積雪
7. Vite
8. WMR
9. 功能比較
10. 總結

具體來說，我想評估每個人，概述他們的工作，為什麼需要它們以及它們的用例。我意識到比較並不總是公平的。同樣，這與我們在本文中所看的任何事情都不是直接競爭對手。實際上，Snowpack和Vite實際上在引擎蓋下使用Esbuild進行某些任務。我們的目標更多是更好地了解開發人員工具的景觀，這些工具運行任務以使我們的工作更容易。這樣，我們看到那裡有哪些選項以及它們如何堆疊，因此我們可以在需要時做出最佳選擇。

當然，所有這些都會根據我的經驗使用React和Exct來染色。我更熟悉這些框架庫，但是我們也會研究他們對其他前端框架的支持。

關於這些新開發人員工具，有很多很棒的文章，流和播客。我建議有幾個ShopTalk表演情節有關更多背景：第454集討論Vite，第448集的創造者是WMR和Snowpack的創作者。從這些情節中脫穎而出的事情是，為建立這些工具以使我們的開發人員環境現代化了大量工作。

為什麼這些工具現在都到達？

在某種程度上，我認為這些工具是對JavaScript工具疲勞的一種反應 - 在本文中，關於在2016年學習JavaScript的文章很好地捕捉到了這一點。它們在編寫單個香草JavaScript文件之間還填補了缺少的中間立場，並且必須下載200兆字節的工具依賴性，然後才編寫自己的代碼。它們會出現在沒有依賴列表的情況下的電池中，並且是JavaScript生態系統中崩潰層的趨勢的一部分。

瀏覽器中的本機JavaScript模塊啟用了Snowpack，Vite和WMR。早在2018年，Firefox 60就默認啟用了Ecmascript 2015模塊。從那時起，所有主要的瀏覽器發動機都支持本機JavaScript模塊。 Node.js還於2019年11月使用本機JavaScript模塊運送。我們仍在發現2021年本機JavaScript模塊在2021年解鎖的可能性。

這些與現有工具有何不同？

無論是使用WebPack，lollup還是將包裹用於開發服務器，該工具都會從源代碼和Node_modules文件夾中捆綁整個代碼庫，都可以通過構建過程（例如Babel，Tystecript或Postcss）運行這些文件，然後將捆綁的代碼推向我們的瀏覽器。這一切都需要工作，並且即使在經歷了緩存和優化的所有工作之後，也可以在較大的代碼庫中慢慢開發服務器。

Snowpack，Vite和WMR開發服務器不遵循此模型。取而代之的是，他們等到瀏覽器找到導入語句並為該模塊提出HTTP請求。只有在提出此請求之後，該工具才能將轉換應用於所請求的模塊和模塊導入樹中的任何葉子節點，然後將其用於瀏覽器。這加快了很多速度，因為在推到開發服務器的過程中工作較少。

您會注意到這張照片中缺少Esbuild。首先，這是一個捆綁者。它不會像其他工具那樣捆綁。取而代之的是，Esbuild通過避免昂貴的轉換，利用並行化和使用GO語言來快速處理代碼。

實驗

我從React文檔中獲取了一個示例應用程序之一，並使用本文涵蓋的每個工具對其進行了重建。我參加的項目是Yogita Verma拍攝的快照。這是指向原始存儲庫的鏈接，以及與SNAP Shot的四個版本一起使用的鏈接，每個鏈接都使用不同的構建工具。我們將稍後比較每個構建步驟的輸出。重建此應用程序使我能夠測試開發人員將一些相當標準的React依賴項提取到工具中的經驗，包括React路由器和Axios。

可比較的功能

在我們了解每個工具的細節之前，它們都支持以下功能（在不同程度上）：

• 對本機JavaScript模塊的一流支持
• 打字稿彙編（但不類型檢查）
• JSX
• 插件API可擴展性
• 內置開發服務器
• CSS捆綁和支持CSS-IN-JS庫

所有這些工具都可以將打字稿編譯到JavaScript中，但是即使存在類型錯誤，也可以這樣做。要進行正確的類型檢查，您需要安裝Typescript並運行TSC - 在root JavaScript文件上不使用TSC，或者使用編輯器插件來關注類型錯誤。

好的，讓我們看一下每個工具。

Esbuild

Esbuild是由Evan Wallace（Figma的CTO）創建的。它的主要功能是，它提供的構建步驟比基於節點的捆綁器（通過自己的基準測試）快10×-100×。它沒有提供許多您可能會在諸如Create-React-App之類的東西中找到的開發人員便利。但是，越來越多的Esbuild開胃菜彈出，填補了這些空白，包括Create-React-app-eSbuild，Estrella和Snowpack，它們使用Esbuild進行其構建步驟。

Esbuild非常新。它尚未達到1.0版本，並且還沒有準備好生產使用 - 但還不遠。它為您提供具有智能默認值的直觀JavaScript和命令行API。

用例

Esbuild是Bundler World的完整遊戲規則改變者。在大型代碼庫中，這將是最有用的，在大型代碼庫中，Esbuild和Node Bundlers之間的速度差會乘以。當Esbuild達到1.0時，它將在大型生產地點非常有用，並且將為團隊節省大量的時間等待建築物完成。不幸的是，大型生產地點將不得不等到Esbuild變得穩定。同時，在附帶項目中為您的捆綁增加一定的速度將是一件好事。

Esbuild的閃電快速速度將是您正在做的任何類型的工作的好處。等待構建跑步的時間更少，總是對開發人員體驗有益！考慮到這一點，如果您要製作快速應用程序，則可能需要從比Esbuild更高的水平開始 - 否則，您需要花費一些時間拉動依賴項並配置您的環境，然後才能在JavaScript生態系統中獲得我們期望的便利。另外，如果您想盡可能最大程度地減少捆綁包的大小，則可能需要使用匯總和切肉，這將產生稍小的捆綁尺寸。

設定

我決定以幼稚的方式在Esbuild中啟動一個React項目：NPM安裝Esbuild，React和Reactdom。我創建了一個src/app.jsx文件和一個dist/index.html文件。然後，我使用以下命令將應用程序編譯到dist/bundle.js文件中：

 ./node_modules/.bin/esbuild src/app.jsx -bundle -platform = browser -outfile = dist/bundle.js

當我在瀏覽器中託管並打開索引。文檔和CLI都可以準確地說明您需要採取的措施來防止這種情況，但對於初學者來說可能有點“陷阱”，因為當捆綁捆綁反應時需要額外的論點：

 - 定義：process.env.node_env = \“生產\”

或者，如果您將Esbuild包括在NPM腳本中，以逃避報價：

 - 定義：process.env.node_env = \\\“生產\\\”

對於期望節點環境變量的瀏覽器捆綁的任何庫都需要此定義參數。 VUE 2.0也期望這些。您不會遇到同樣的問題，因為它不會默認情況下任何環境變量和船舶準備瀏覽器。

在使用定義論點運行命令之後，我的“ Hello World” React應用程序運行得很好。 JSX使用.jsx文件開箱即用。也就是說，需要手動導入反應，然後將JSX轉換為React.Createlement。但是，有多種方法可以在JSX中添加自動導入和/或配置JSX以進行預先反應。

用法

Esbuild為開發服務器提供了一個服務選項。這繞過文件系統並直接從內存中提供模塊，從而確保瀏覽器不會提取舊版本的模塊。但是，它不包括實時/熱重新加載，因此您會發現自己在保存後會刷新瀏覽器，這不是理想的體驗。

我決定使用新發布的手錶功能。這告訴Esbuild每次保存源文件時都會重新編譯代碼。但是我們仍然需要一台服務器來查看我們的保存更改。我們可以拉出開發服務器包，例如盧克·傑克遜（Luke Jackson）的僕人：

 NPM安裝僕人 -  save-dev

然後，我們可以使用Esbuild JavaScript API作為服務器啟動，並同時運行Esbuild的手錶模式。讓我們以名為watch.js的詞根創建一個文件：

 // watch.js
const esbuild = require（“ esbuild”）;
const servor = require（“ servor”）;

esbuild.build（{
  //將任何選項傳遞給Esbuild ...
  入口點：[“ src/app.jsx”]，
  Outdir：“ Dist”，
  define：{“ process.env.node_env”：'“ production”'}，
  觀看：是的，
}）;

異步函數服務（）{
  console.log（“從：http：// localhost：8080/”運行服務器）;
  等待僕人（{
    //將任何選項轉到此處...
    瀏覽器：是的，
    根：“ dist”，
    端口：8080，
  }）;
}

服務（）;

現在，在命令行中運行Node Watch.js。這為我們提供了一台不錯的開發服務器，儘管它又不會為我們提供熱模塊更換或快速刷新（即，您的客戶端狀態不會保留）。但這足以滿足我的測試需求。

即使我們每次保存文件時都會對整個應用程序進行排列，但在Esbuild放慢腳步之前，我們仍需要擁有一個相當大的應用程序。設置此工具後，我將從更改中獲得即時反饋。我的計算機從2012年開始使用Intel I7，因此當然不是頂級機器。

如果您需要具有實時重新加載和一些React默認值的Esbuild的預配置版本，則可以克隆此倉庫。

支持的文件

如果這是您的樣式，則可以在JavaScript中導入CSS。它將將CSS編譯到具有與您的主輸出JavaScript文件相同名稱的輸出文件中。默認情況下，它還可以捆綁CSS @Import語句。沒有對CSS模塊的支持，但是有計劃。

Esbuild的插件社區越來越多。例如，有可用於VUE單文件組件的插件和Svelte組件。

Esbuild與JSON文件一起使用，可以將它們捆綁到JavaScript模塊中，而無需任何配置。

它還可以在JavaScript中導入圖像，並可以將它們轉換為數據URL或將其複製到輸出文件夾中。默認情況下，此行為未啟用，但是您可以在Esbuild配置對像中添加以下內容以啟用任何一個選項：

加載程序：{'.png'：'dataUrl'} //將JS捆綁中的數據URL轉換為數據URL
加載程序：{'.png'：'file'} //將輸出文件夾複製

代碼拆分似乎是一項正在進行的工作，但主要以ESM輸出格式出現，並且看起來確實是該項目的優先事項。還值得一提的是，默認情況下，搖晃樹木是內置在Esbuild中的，無法關閉。

生產建造

使用Esbuild命令中的“縮放”和“捆綁”選項不會像匯總/TERSER管道一樣小。這是因為Esbuild犧牲了一些捆綁尺寸優化，以盡可能少的時間通過您的代碼。但是，根據您的項目，差異可能會忽略不計，值得捆綁的速度提高。在我的Snap Shot應用程序的克隆中，Esbuild創建了一個177 KB的捆綁包，它不超過Vite生產的165KB，它使用了Rollup和Terser。

全面的

Esbuild是一種非常強大的工具。但是，如果您習慣於零核心設置，這可能很困難。如果您需要更多，那麼您可能需要查看使用Esbuild的下一個工具Snowpack。

積雪

Snowpack是Skypack和Pika的創建者的構建工具。它提供了一個很棒的開發服務器，並以“捆綁開發”理念創建。引用該文檔：“您應該能夠使用捆綁器，因為您想這樣做，而不是因為您需要。”

默認情況下，Snowpack的構建步驟不會將文件捆綁到一個軟件包中，而是提供在瀏覽器中運行的未捆綁的ESMODULE。實際上，Esbuild作為依賴性包含在其中，但其想法是在需要時使用JavaScript模塊，僅在Esbuild中捆綁。

Snowpack有一些漂亮的文檔，包括將其與JavaScript框架一起使用的指南列表，以及為其使用的一堆模板。有些指南仍在進行中，但是其他指南像React的指南很清楚。看起來Snowpack也將Svelte視為一流的公民。實際上，我首先在2020年Svelte Summit上聽說了Rich Harris的“未來派網絡開發”演講中的Snowpack。也就是說，即將到來的Svelte Meta-Framework Sveltekit應該由Snowpack提供動力，但此後已改用Vite（下一步我們將審查）。

用例

如果您想加倍捆綁部署，Snowpack是一個不錯的選擇。您可能正在用少量模塊編寫源代碼。這意味著您不會用捆綁式建築物創建巨大的瀑布。如果您不需要捆綁的額外複雜性和技術債務，那麼Snowpack是一個不錯的選擇。一個好的用例是，如果您將前端框架逐漸使用，將其用於服務器渲染或靜態應用程序。您將從節點生態系統中提取盡可能少的工具，但您仍然會獲得聲明性前端框架的好處。

其次，我認為Snekpack是圍繞Esbuild的出色包裝紙。如果您想嘗試Esbuild，但也需要開發服務器和前端框架預先編寫的模板，那麼Snowpack就不會出錯。在Snowpack配置的構建步驟中啟用Esbuild，您就可以了。

正如目前的那樣，我認為Snowpack將不是零配置工具（例如Create-React-App）等零配置工具的最佳替代品，因為如果您有大型應用程序，並且需要超級美好的優化生產準備就緒的構建步驟，則需要插入插件並將其配置。

設定

讓我們通過跳入命令行來從Snowpack開始一個項目：

 mkdir雪堆項目
CD SnowpackProject
npm Init #fill affaults 
NPM安裝積雪

現在，讓我們將以下內容添加到package.json：

 // package.json
“腳本”：{
  “開始”：“ Snowpack Dev”，
  “構建”：“ Snowpack Build”
}，，

接下來，我們將創建一個配置文件：

 // Mac或Linux
觸摸Snowpack.config.js
// Windows
新項目Snowpack.config.js

我認為，當在配置文件中設置一個外觀無辜的鑰匙值對時，Snekpack最神奇的部分是出現的。將其粘貼到配置文件中，例如：

 // Snowpack.config.js
Module.exports = {
  軟件包：{
    “源”：“遠程”，
  }
};

資料來源：遠程啟用所謂的流式導入。流媒體導入使Snowpack能夠通過將裸露的導入轉換為從SKYPACK導入的CDN導入來繞過NPM安裝。

向前邁進，讓我們做一個index.html文件：

 



  <meta charset="“" utf-8>>
  <title> Snowpack流式導入</title>


  <div> </div>
  
  <script type="“模塊”" src="%E2%80%9C" app.js> </script>

以上是比較新一代的構建工具的詳細內容。更多資訊請關注PHP中文網其他相關文章！