建站
咨詢
售后
建站咨詢
新聞中心
本文將自底向上地從「編譯器」、「打包器」、「包管理器」、「第三方庫開發(fā)」、「Web 應(yīng)用開發(fā)」這幾個(gè)方面來盤點(diǎn) 2022 年 JavaScript 開發(fā)工具的生態(tài)。
業(yè)務(wù)包括：企業(yè)網(wǎng)站建設(shè)、手機(jī)網(wǎng)站制作、商城開發(fā)、網(wǎng)站營銷推廣等服務(wù)，并且涵蓋主機(jī)域名、網(wǎng)絡(luò)空間、云服務(wù)器、等互聯(lián)網(wǎng)基礎(chǔ)服務(wù)；成都創(chuàng)新互聯(lián)公司聯(lián)建站以互聯(lián)網(wǎng)的創(chuàng)新理念，成熟完善的建站體系，開拓進(jìn)取的精神，專業(yè)的解決方案和顧問咨詢服務(wù)，幫助客戶在互聯(lián)網(wǎng)時(shí)代提升形象、把握商機(jī)、實(shí)現(xiàn)價(jià)值，提高企業(yè)的核心競爭力。
編譯器
編譯器負(fù)責(zé)將輸入的代碼，轉(zhuǎn)換為某種目標(biāo)的輸出格式。
本文只關(guān)注 JS 和 TS 的編譯器，它可以將現(xiàn)代的 JS 和 TS 轉(zhuǎn)換成特定版本的 ECMAscript，并兼容瀏覽器和最新版本的 Node.js。
編譯器從 tsc 和 babel 到 swc 和 esbuild ，編寫語言從高級(jí)解釋語言到更快的編譯語言，編譯器生態(tài)目前正處在一個(gè)很重要且巨大的轉(zhuǎn)變過程中。
這樣的轉(zhuǎn)變讓編譯速度快了 10 到 100 倍 ，下圖來自 esbuild 官網(wǎng)。
如果你正在升級(jí)開發(fā)工具或者新啟項(xiàng)目，可以嘗試使用這些下一代的編譯器。雖然成熟度不如 tsc 或 babel，但是近 100 倍提速的構(gòu)建，是真的香。
遺憾的是 swc 和 esbuild 都 不能類型檢查 ，它們只會(huì)盡可能的提速。如果項(xiàng)目正在使用 TS，最好還是在工具鏈中使用 tsc 來進(jìn)行類型檢查，不要棄用了這個(gè)能力。另外，鑒于很多項(xiàng)目都對(duì) tsc 有依賴，為了突破這個(gè)瓶頸，swc 的作者正在 將 tsc 移植到 Go 。
babel vs tsc
之前有對(duì)兩者進(jìn)行過一次比較，傳送門： 2022 年，Babel vs TypeScript，誰更適合代碼編譯 。
總結(jié)一下，項(xiàng)目中兩者都存在時(shí)，最好使用 babel 編譯代碼，使用 tsc 進(jìn)行類型檢查和生成 .d.ts 文件。
swc vs esbuild
swc 和 esbuild 都是優(yōu)秀且極速的 JS/TS 編譯器，性能也不相上下，很多大公司都開始在生產(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é)將所有的源文件打包到一起，通常用于打包第三方庫和 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ì)的對(duì)比可以參考 tool.report 。
包管理器
包管理器負(fù)責(zé)管理 NPM 包依賴。
包管理器有許多的歷史，這里總結(jié)一下：
- 這些包管理器在當(dāng)下功能都差不太多，不用太糾結(jié)一定要用哪一個(gè)，follow your heart。
- pnpm 作為 后起之秀 ，解決了其他包管理器留下的痛點(diǎn)，最近比較火熱，相信未來也會(huì)越來越好。
- 隨著 yarn v1 的淘汰和 v2 的誕生，雖然近幾年 v2 在飛快的進(jìn)步，但很多人已經(jīng)不再用 yarn 了。
- yarn 的 Plug’n’Play（PnP）特性雖然不錯(cuò)，能將同一個(gè)系統(tǒng)上不同項(xiàng)目引用的相同依賴相同版本指向同一個(gè)緩存目錄，來提升依賴安裝速度。但實(shí)踐時(shí)通常只會(huì)用在非常大的 monorepos 項(xiàng)目中。
- 擴(kuò)展閱讀： 選擇第三方 NPM 包時(shí)的 5 條最佳實(shí)踐
來看看明星項(xiàng)目是怎么選擇的：
這些項(xiàng)目都沒有使用 yarn PnP。
第三方庫開發(fā)
這些工具會(huì)幫助開發(fā)者打包和發(fā)布第三方 NPM 包。
在 2022 年如果想要開發(fā)一個(gè)新庫，可以用它們來簡化工作流。
- 如果要構(gòu)建 TS 庫，想用 esbuild 來提速的話可以考慮 tsup ，想要附加功能的話可以考慮 tsdx 。
- microbundle 可以用來構(gòu)建 JS/TS 庫。
- Vite 主要用來構(gòu)建 web 應(yīng)用，但也支持庫的構(gòu)建，整體來說比較全面。
- 對(duì)于 monorepos， nx 未來可期。
但是，這些工具大多數(shù)目前對(duì) TS monorepos 的支持都不太給力（TS monorepos 可以發(fā)揮 project references 的優(yōu)勢(shì)，將 TS 代碼結(jié)構(gòu)拆分地更小）。在這種情況下，建議使用 tsc 檢查類型和生成 d.ts 文件，用 tsup 來編譯每個(gè)子包。真實(shí)案例可參考 react-notion-x 。
Web 應(yīng)用開發(fā)
這些高級(jí)工具和框架會(huì)幫助開發(fā)者屏蔽掉所有細(xì)節(jié)，來更好地構(gòu)建現(xiàn)代 web 應(yīng)用。
- 開發(fā) React web 應(yīng)用，強(qiáng)烈推薦 Next.js 。Next.js 目前社區(qū)支持度很高很活躍，而且還與部署平臺(tái) Vercel 有著深度集成。
- Remix 可以看作是 Next.js 的替代品，與 react-router 出自同一個(gè)開發(fā)團(tuán)隊(duì)，但目前相對(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)域，如今我們有很多很多選擇，希望這篇文章能對(duì)你未來的技術(shù)選型有所幫助。
當(dāng)前名稱：2022年JavaScript開發(fā)工具的生態(tài)
網(wǎng)站網(wǎng)址：http://www.dlmjj.cn/article/djihiec.html
