原文：https://transitivebullsh.it/javascript-dev-tools-in-2022
在2022年，每一位 JS / TS 開發者都應該知道的最重要的開發工具的分類，包括最相關的權衡，以及一些個人建議。
在軟體工程的世界中，對所使用的工具有一個明確的瞭解非常重要。
但是 JS 工具總是在快速的變化著，2022年也不例外。
因此，我想把你在2022年應該知道的最重要的工具分解開來，它們最相關的權衡是什麼，並提供一些個人建議。
我們將從最低階別的工具開始，然後從那裡逐步升級到更高階別的工具。讓我們開始?。
開發工具
編譯器
編譯器負責將輸入程式碼轉換為某種目標輸出格式。出於我們的目的，我們關注的是那些支援將現代 JavaScript 和TypeScript 轉換成特定版本的 ECMAscript 的編譯器，這些 ECMAscript 相容瀏覽器和最新版本的 Node.js。
| 名稱 | 描述 | 星數 | 語言 | 速度 | 成熟度 | 許可 |
|---|---|---|---|---|---|---|
| tsc | TS官方編譯器 | 79,300 | TS | slow | 非常成熟 | Apache 2.0 |
| esbuild | 快速JS/TS編譯器 | 31,200 | Go | fast | 可以 | MIT |
| swc | 快速JS/TS編譯器 | 21,300 | Rust | fast | 可以 | Apache 2.0 |
| babel | JS編譯器（TS 外掛） | 40,700 | JS | slow | 非常成熟 | MIT |
關於這個領域最重要的一點是，它正在經歷一個巨大的轉變，從用高階解釋語言編寫的編譯器 tsc 和 babel，到用更快的編譯語言編寫的編譯器 swc 和 esbuild。
這種轉變導致編譯時間縮短了10-100倍，如下圖所示：
如果你正在更新你的開發工具技術棧，或者在2022年開始一個新專案，那麼你會想要考慮在底層使用這些下一代編譯器之一。它們可能不像 TypeScript 官方編譯器 tsc 和 babel 那樣成熟，但構建速度快100倍的好處是不能低估的。
請注意，swc和esbuild都不進行型別檢查。他們只是儘可能快速和有效地將程式碼轉換成所需的輸出格式。目前，如果你正在使用TypeScript，你幾乎總是需要將官方的TypeScript編譯器作為你的工具鏈的一部分，以保證你能最大限度地利用TypeScript的靜態型別檢查。值得一提的是，swc的作者 kdy1dev 正致力於將 tsc移植到Go中，以消除在許多情況下對tsc的需求，因為tsc的編譯速度往往是大多數工具鏈中的瓶頸。
SWC vs esbuild
swc和esbuild都是非常優秀的、非常快的開源 JS / TS 編譯器。它們的效能相當(參考效能比較)，並被一些世界上最大的公司經常用於生產環境。
在這兩個編譯器之間做出選擇，更多地取決於構建在這些編譯器之上的高階工具，而不是直接在它們之間做出選擇。
使用 swc 值得注意的專案：
使用 esbuild 值得注意的專案：
- Vite
- Nuxt.js
在軟體工程中，諸如“技術A比技術B更好”這樣的簡單敘述很少有太大的價值。相反，應該根據專案情況來決定使用哪個工具。在很多情況下，你最好使用官方的TypeScript編譯器或babel。
要成為一名更好的軟體工程師，通常需要徹底理解這些型別的決策所涉及的權衡，並根據專案、團隊和業務需求的特定約束來平衡這些權衡。
打包器(Bundlers)
打包器負責將所有的輸入原始檔打包成易於使用的輸出格式。打包程式最常見的兩個用例是為web應用打包資源和打包成庫檔案。
| 名稱 | 描述 | 星數 | 優化了 | 許可 |
|---|---|---|---|---|
| Webpack | 行業標準打包器 | 60,100 | web應用、庫 | MIT |
| Rollup | 針對庫打包器 | 21,400 | 庫 | MIT |
| Parcel | 零配置web構建工具 | 41,000 | web應用、庫 | MIT |
像 webpack 和 rollup 這樣的打包工具是現代 JS 工具鏈的 “瑞士軍刀”。 它們都具有極強的可擴充套件性，具有維護良好的外掛，覆蓋了大多數主要用例。 例如，使用上面列出的任何一個流行的編譯器，通過 webpack 或 rollup 轉譯 TS 程式碼，都是相對簡單的。
另一方面，Parcel 提供了一種幾乎為零配置的打包方法。它關注的是簡單性而不是可擴充套件性，並在底層使用 esbuild 作為編譯器。
請注意，swc 和esbuild也都提供了基本的打包功能，與這些打包器相比，它們的功能還不夠全，不能包括在這個列表中。
要了解這些打包器的更詳細的比較，請檢視 tooling.report。
開發庫
這些工具旨在幫助庫作者打包和釋出現代的NPM包。
| 名稱 | 描述 | 星數 | 編譯器 | 打包器 | 許可 |
|---|---|---|---|---|---|
| tsup | 由esbuild支援的快速TS庫打包器 | 1,800 | esbuild | rollup | MIT |
| tsdx | 用於TS包開發的零配置CLI | 9,500 | babel | rollup | MIT |
| microbundle | 用於微小模組的零配置打包器 | 6,800 | babel | rollup | MIT |
| Vite | 下一代前端工具(庫模式) | 40,000 | esbuild | rollup | MIT |
| preconstruct | 在 monorepos 中輕鬆開發和構建程式碼 | 720 | babel | rollup | MIT |
| unbuild | 統一的javascript構建系統 | 440 | esbuild | rollup | MIT |
如果你在2022年開發一個新的庫，你可能會想使用這些更高階的工具來簡化你的工作流程。
- 如果你有一個TS包，並且想利用 esbuild 提供的極快的構建速度，那麼 tsupp 是一個很好的選擇。
- 如果您有一個TS包，並且需要一些額外的功能，那麼 tsdx 是一個很好的選擇。
- 如果你有一個TS或JS包，那麼microbundle也是一個不錯的選擇。
- Vite主要是一個構建前端web應用程式的工具，但它也是一個可靠的全方位選擇，還包括對輸出庫的支援。
我個人傾向於對所有新的TS包使用tsup，主要是因為一旦你體驗了100倍的快速構建，就很難再考慮切換回其他版本了。
更多資訊
這些工具中的大多數目前沒有為利用 composite project references 的 TS monorepos 提供很好的支援。 目前，我對這種情況的建議是使用 tsc 進行型別檢查和生成 .d.ts 型別（使用 emitDeclarationOnly: true）和 tsup 來編譯每個子包中的程式碼。 有關此方法的示例，請檢視 react-notion-x monorepo專案（我的 OSS 專案之一）。
釋出現代 NPM 包是一個微妙的話題，遠遠超出了本文的範圍。 有關 ESM、commonjs、匯出等的更多資訊，請參閱：
- 要支援 Node.js ESM 需要什麼？
- 釋出和使用 ESM 包
Web app 開發
這些高階工具和框架旨在幫助開發人員構建現代web應用程式，而無需擔心所有細節。
| 名稱 | 描述 | 星數 | 編譯器 | 打包器 | 框架 |
|---|---|---|---|---|---|
| Next.js | 用於生產的 React 框架 | 84,000 | swc | webpack | react |
| Nuxt.js | 直觀的 Vue 框架 | 39,000 | esbuild | rollup | vue |
| Parcel | 零配置web構建工具 | 41,000 | swc | custom | react vue |
| Vite | 下一代前端工具 | 40,000 | esbuild | rollup | react vue svelte |
| Snowpack | ESM 驅動的前端構建工具 | 20,000 | esbuild | custom | react vue svelte |
| Create React App | 通過命令設定現代 Web 應用程式 | 94,000 | babel | webpack | react |
| SvelteKit | 構建 Svelte 應用程式的最快方法 | 7,700 | esbuild | rollup | svelte |
使用swc和esbuild構建的專案數量大致相同。webpack和rollup的情況也是如此。
如果你打算在2022年使用React開發一個新的網頁應用，那麼我強烈推薦使用Next.js。它擁有最好的支援，最活躍的社群，並與世界領先的現代web應用部署平臺Vercel緊密整合。
如果你正在使用Vue開發一個新的web應用程式，那麼nuxt.js和Vite都是很好的選擇。
如果你想要更輕的東西，那就試一試 Parcel。?
總結
在過去的10年裡，現代web開發已經有了顯著的發展。今天的開發人員很幸運，能夠擁有如此廣泛的令人驚歎的、維護良好的工具可供選擇。
希望這篇文章能夠幫助您分析當前 JS/TS 開發工具領域中最重要的方面，並幫助您做出更明智的決策。