【W(wǎng)eb技術(shù)】1390- 2022 年 JavaScript 開(kāi)發(fā)工具的生態(tài)

本文將自底向上地從「編譯器」、「打包器」、「包管理器」、「第三方庫(kù)開(kāi)發(fā)」、「Web 應(yīng)用開(kāi)發(fā)」這幾個(gè)方面來(lái)盤點(diǎn) 2022 年 JavaScript 開(kāi)發(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，編寫語(yǔ)言從高級(jí)解釋語(yǔ)言到更快的編譯語(yǔ)言，編譯器生態(tài)目前正處在一個(gè)很重要且巨大的轉(zhuǎn)變過(guò)程中。

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

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

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

babel vs tsc

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

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

swc vs esbuild

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

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

使用了 swc 上層工具有：

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

使用了 esbuild 的上層工具有：

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

打包器

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

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

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

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

包管理器

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

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

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

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

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

第三方庫(kù)開(kāi)發(fā)

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

在 2022 年如果想要開(kāi)發(fā)一個(gè)新庫(kù)，可以用它們來(lái)簡(jiǎn)化工作流。

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

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

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

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

• 開(kāi)發(fā) React web 應(yīng)用，強(qiáng)烈推薦 Next.js。Next.js 目前社區(qū)支持度很高很活躍，而且還與部署平臺(tái) Vercel 有著深度集成。

• Remix 可以看作是 Next.js 的替代品，與 react-router 出自同一個(gè)開(kāi)發(fā)團(tuán)隊(duì)，但目前相對(duì)較新，可以持續(xù)關(guān)注。

• 開(kāi)發(fā) Vue web 應(yīng)用，選擇 Nuxt.js 或 Vite 都沒(méi)問(wèn)題，國(guó)內(nèi)環(huán)境的話還是推薦 Vite。

• Snowpack 已經(jīng)在 2022 年 4 月 20 日官宣不再積極維護(hù)，意味著不推薦用于新項(xiàng)目了，可以選擇 Vite 作為替代。

• 如果想要輕量一點(diǎn)的工具，可以嘗試下 Parcel。

結(jié)語(yǔ)

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

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

參考

• https://bundlers.tooling.report
• https://transitivebullsh.it/javascript-dev-tools-in-2022
• https://2021.stateofjs.com/en-US/libraries/
• https://blog.logrocket.com/javascript-package-managers-compared
• https://loveky.github.io/2019/02/11/yarn-pnp/