2022年JavaScript開發工具比較 - bullsh

banq發表於2022-04-02
JavaScript

JS 工具的格局總是在以如此快的速度變化，2022 年也不例外。將從最低階別的工具開始，然後從那裡逐步升級到更高階別的工具。

編譯器
編譯器負責將您的輸入程式碼轉換為某種目標輸出格式。下面是專注於支援將現代 JavaScript 和 TypeScript 轉換為特定版本的 ECMAscript 的編譯器，這些版本與瀏覽器和最新版本的 Node.js 相容。

  • tsc：官方 TypeScript 編譯器，速度慢，但很成熟
  • esbuild：快速 JS/TS 編譯器，速度快
  • swc：快速 JS/TS 編譯器，速度快
  • babel：JS 編譯器（帶外掛的 TS），速度慢，很成熟

編譯器領域正經歷著從tsc和babel這樣用高階解釋語言編寫的編譯器到swc和esbuild這樣用更快的編譯語言編寫的編譯器的巨大轉變。
這種轉變導致了10-100倍的編譯速度提升。

如果你正在更新你的開發工具棧或在2022年開始一個新專案，那麼你會考慮在引擎蓋下使用這些下一代編譯器之一。
它們可能不如官方的typescript編譯器和babel成熟，但擁有100倍的編譯速度所帶來的好處是不可低估的。

請注意，swc和esbuild都不進行型別檢查。它們只是儘可能快速有效地將程式碼轉譯成所需的輸出格式。
目前，如果你正在使用TypeScript，你幾乎總是需要將官方的TypeScript編譯器作為你的工具鏈的一部分，以保證你能從TypeScript的靜態型別檢查中獲得最大收益。
值得一提的是，swc的作者kdy1dev正在努力將tsc移植到Go，以便在許多情況下消除對tsc的需求，因為它往往是大多數工具鏈的瓶頸。

SWC vs esbuild
swc和esbuild都是優秀的、快速的、開源的JS/TS編譯器。它們的效能不相上下，而且都被一些世界上最大的公司定期用於生產。
你對這兩個編譯器的選擇很可能是由建立在這些編譯器之上的高階工具決定的，而不是直接選擇它們。

使用swc的著名專案：


使用esbuild的著名專案：

在軟體工程中，諸如 "A技術比B技術好 "這樣的方便說法很少有價值。相反，你應該試著始終牢記上下文。在這種情況下，有很多情況下，你最好使用官方的TypeScript編譯器或babel。

Bundlers
捆綁器Bundlers負責將你所有的輸入原始檔捆綁在一起，使其成為一種易於消費的輸出格式。捆綁器的兩個最常見的用例是捆綁庫和捆綁網路應用的資源。

  • Webpack：行業標準捆綁器
  • Rollup：針對Bundler 庫包
  • Parcel：Web 的零配置構建工具

像webpack和rollup這樣的捆綁器是現代JS工具鏈的利器。它們都具有極強的擴充套件性，維護良好的外掛涵蓋了大多數主要的使用情況。例如，使用上述任何一種流行的編譯器，用webpack或rollup轉譯TS程式碼，都是比較簡單的。
另一方面，Parcel提供了一個主要是零配置的捆綁方法。它專注於簡單性，而不是可擴充套件性，並使用esbuild作為引擎蓋下的編譯器。
請注意，swc和esbuild也都提供了基本的捆綁功能，儘管與這些替代方案相比，它們的功能還不夠全面，不足以被列入這個列表。
對於這些捆綁器的更詳細的比較，請檢視tooling.report。

庫工具
這些工具旨在幫助圖書館作者捆綁和釋出現代NPM包。

  • tsup：由esbuild提供支援的快速 TypeScript 庫捆綁器
  • tsdx：用於 TS 包開發的零配置 CLI
  • microbundle：微型模組的零配置捆綁器

如果你在2022年開發一個新的庫，你很可能想使用這些更高階別的工具之一來幫助簡化你的工作流程。
  • 如果你有一個TS包並想利用esbuild提供的極快的構建時間，那麼tsup是一個很好的選擇。
  • 如果你有一個TS包並需要一些額外的功能，那麼tsdx是一個很好的選擇。
  • 如果你有一個TS或JS包，那麼microbundle是一個不錯的選擇。

我個人傾向於對所有新的TS包使用tsup，主要是因為一旦你體驗過100倍的構建速度，就很難再考慮換回其他東西。
注意，這些工具目前都不支援利用複合專案引用的TS單體。就目前而言，我對這種情況的建議是使用tsc進行型別檢查和生成.d.ts型別（emitDeclarationOnly: true），使用tsup編譯每個子包中的程式碼。對於這種方法的一個開源例子，請檢視 react-notion-x monorepo。

Web應用開發
這些更高層次的工具和框架旨在幫助開發人員構建現代網路應用，而不必擔心所有的細節問題。



似乎在swc和esbuild之上構建的專案數量大致相當。同樣的觀察也適用於webpack和rollup。
如果你在2022年使用React開發一個新的Web應用，那麼我強烈建議你使用Next.js。它擁有最好的支援，最活躍的社群，並與世界領先的現代Web應用部署平臺Vercel緊密結合。
如果你使用Vue開發一個新的網路應用，那麼Nuxt.js和Vite都是不錯的選擇。
如果你想要更輕便的東西，那就試試Parcel吧。
 

相關文章