JS 工具領(lǐng)域的變化實(shí)在太快:rocket:。

本文將自底向上地從「編譯器」、「打包器」、「包管理器」、「第三方庫開發(fā)」、「Web 應(yīng)用開發(fā)」這幾個方面來盤點(diǎn) 2022 年 JavaScript 開發(fā)工具的生態(tài)。

編譯器

編譯器負(fù)責(zé)將輸入的代碼，轉(zhuǎn)換為某種目標(biāo)的輸出格式。

本文只關(guān)注 JS 和 TS 的編譯器，它可以將現(xiàn)代的 JS 和 TS 轉(zhuǎn)換成特定版本的 ECMAscript，并兼容瀏覽器和最新版本的 Node.js。

編譯器從 tsc 和 babel 到 swc 和 esbuild ，編寫語言從高級解釋語言到更快的編譯語言，編譯器生態(tài)目前正處在一個很重要且巨大的轉(zhuǎn)變過程中。

這樣的轉(zhuǎn)變讓編譯速度快了 10 到 100 倍 ，下圖來自 esbuild 官網(wǎng)。

如果你正在升級開發(fā)工具或者新啟項(xiàng)目，可以嘗試使用這些下一代的編譯器。雖然成熟度不如 tsc 或 babel，但是近 100 倍提速的構(gòu)建，是真的香。

遺憾的是 swc 和 esbuild 都 不能類型檢查 ，它們只會盡可能的提速。如果項(xiàng)目正在使用 TS，最好還是在工具鏈中使用 tsc 來進(jìn)行類型檢查，不要棄用了這個能力。另外，鑒于很多項(xiàng)目都對 tsc 有依賴，為了突破這個瓶頸，swc 的作者正在 將 tsc 移植到 Go 。

babel vs tsc

之前有對兩者進(jìn)行過一次比較，傳送門： 2022 年，Babel vs TypeScript，誰更適合代碼編譯 。

總結(jié)一下，項(xiàng)目中兩者都存在時，最好使用 babel 編譯代碼，使用 tsc 進(jìn)行類型檢查和生成 .d.ts 文件。

swc vs esbuild

swc 和 esbuild 都是優(yōu)秀且極速的 JS/TS 編譯器，性能也不相上下，很多大公司都開始在生產(chǎn)環(huán)境里使用它們了。

在權(quán)衡比較它們時，更多情況是比較集成了它們的上層工具，而不是比較他們本身。

使用了 swc 上層工具有：

• Vercel 和 Next.js
• Deno 的 linter，formatter 和 docs
• Parcel
• nx

使用了 esbuild 的上層工具有：

• Vite
• Nuxt.js
• Remix
• SvelteKit
• tsup

打包器

打包器負(fù)責(zé)將所有的源文件打包到一起，通常用于打包第三方庫和 web 應(yīng)用。

webpack 和 rollup 就好比現(xiàn)代打包器中的瑞士軍刀。 擴(kuò)展性都非常強(qiáng) ，社區(qū)里的插件生態(tài)也很好，能覆蓋極大多數(shù)打包場景，比如，在 webpack 和 rollup 中，可以使用上述的任意一種編譯器來編譯 TS 代碼。

而 parcel 提供了一種零配置的極速打包方式。它更注重簡單而不是可擴(kuò)展性，內(nèi)部使用的是 swc 作為編譯器。

其實(shí)，swc 和 esbuild 也提供了基本的打包能力，但是與這些打包器相比， 功能還不夠全面 ，所以在這里沒有列舉出來，更詳細(xì)的對比可以參考 tool.report 。

包管理器

包管理器負(fù)責(zé)管理 NPM 包依賴。

包管理器有許多的歷史，這里總結(jié)一下：

• 這些包管理器在當(dāng)下功能都差不太多，不用太糾結(jié)一定要用哪一個，follow your heart。
• pnpm 作為 后起之秀 ，解決了其他包管理器留下的痛點(diǎn)，最近比較火熱，相信未來也會越來越好。
• 隨著 yarn v1 的淘汰和 v2 的誕生，雖然近幾年 v2 在飛快的進(jìn)步，但很多人已經(jīng)不再用 yarn 了。
• yarn 的 Plug’n’Play（PnP）特性雖然不錯，能將同一個系統(tǒng)上不同項(xiàng)目引用的相同依賴相同版本指向同一個緩存目錄，來提升依賴安裝速度。但實(shí)踐時通常只會用在非常大的 monorepos 項(xiàng)目中。
• 擴(kuò)展閱讀： 選擇第三方 NPM 包時的 5 條最佳實(shí)踐

來看看明星項(xiàng)目是怎么選擇的：

這些項(xiàng)目都沒有使用 yarn PnP。

第三方庫開發(fā)

這些工具會幫助開發(fā)者打包和發(fā)布第三方 NPM 包。

在 2022 年如果想要開發(fā)一個新庫，可以用它們來簡化工作流。

• 如果要構(gòu)建 TS 庫，想用 esbuild 來提速的話可以考慮 tsup ，想要附加功能的話可以考慮 tsdx 。
• microbundle 可以用來構(gòu)建 JS/TS 庫。
• Vite 主要用來構(gòu)建 web 應(yīng)用，但也支持庫的構(gòu)建，整體來說比較全面。
• 對于 monorepos， nx 未來可期。

但是，這些工具大多數(shù)目前對 TS monorepos 的支持都不太給力（TS monorepos 可以發(fā)揮 project references 的優(yōu)勢，將 TS 代碼結(jié)構(gòu)拆分地更小）。在這種情況下，建議使用 tsc 檢查類型和生成 d.ts 文件，用 tsup 來編譯每個子包。真實(shí)案例可參考 react-notion-x 。

Web 應(yīng)用開發(fā)

這些高級工具和框架會幫助開發(fā)者屏蔽掉所有細(xì)節(jié)，來更好地構(gòu)建現(xiàn)代 web 應(yīng)用。

• 開發(fā) React web 應(yīng)用，強(qiáng)烈推薦 Next.js 。Next.js 目前社區(qū)支持度很高很活躍，而且還與部署平臺 Vercel 有著深度集成。
• Remix 可以看作是 Next.js 的替代品，與 react-router 出自同一個開發(fā)團(tuán)隊(duì)，但目前相對較新，可以持續(xù)關(guān)注。
• 開發(fā) Vue web 應(yīng)用，選擇 Nuxt.js 或 Vite 都沒問題，國內(nèi)環(huán)境的話還是推薦 Vite。
• Snowpack 已經(jīng)在 2022 年 4 月 20 日官宣 不再積極維護(hù) ，意味著不推薦用于新項(xiàng)目了，可以選擇 Vite 作為替代。
• 如果想要輕量一點(diǎn)的工具，可以嘗試下 Parcel 。

結(jié)語

從上面來看，使用 swc 或 esbuild 作為編譯器，以及使用 webpack 或 rollup 作為打包器的開發(fā)工具，數(shù)量幾乎是五五開的。

現(xiàn)代 Web 應(yīng)用開發(fā)在近幾年有了飛速發(fā)展，在工具領(lǐng)域，如今我們有很多很多選擇，希望這篇文章能對你未來的技術(shù)選型有所幫助。