大家好，我是 CUGGZ。

近日，Best of JS[1] 正式公布 2022 年 JavaScript 明星項目榜單。該榜單提供了過去 12 個月 JavaScript 生態系統中的趨勢項目的概述！

此榜單包含了以下部分：最受歡迎的項目、前端框架、React生態系統、Vue生態系統、后端/全棧、構建工具、CSS in JS、測試工具、移動端、桌面端、靜態站點、狀態管理、GraphQL。

最受歡迎的項目

2022 年最受歡迎的 JavaScript 項目 Top 10 如下：

總冠軍：Bun ??

2022 年年度最流行的項目 Bun：一個新的 JavaScript 運行時。今年夏天，隨著 GitHub 上第一個 Beta 版的發布，它的人氣大增：一個月內，GitHub 就有超過 20000 Star！

那 Bun 有什么特別之處呢？與兩年前的總冠軍 Deno 一樣，它為 TypeScript 提供了一流的支持。

但 Bun 不僅僅是一個運行時。它還包括：

• 包管理器（像 Yarn、NPM、PNPM）；
• 構建工具（像 Webpack、ESBuild、Parcel）；
• 測試工具
• ...

Bun 可以讀取 ??package.json?? 安裝的依賴，Bun 還可以運行腳本。它做任何事都比其他任何運行時要快。Bun 是對 JavaScript 生態系統許多方面的全新詮釋，專注于性能。

它優先考慮 Fetch 等標準 Web API。它支持許多 Node.js API，使其與大多數 NPM 包兼容。它可能還沒有“生產就緒”（缺少 Windows 支持），但它是一個非常有前途的工具。與 Deno 相比，它的生態系統還很新，但它已經有了一個名為 Elysia 的 Web 框架，號稱是最快的 HTTP 框架。

Bun 最令人難以置信的是它的創建者 Jarred Sumner 使用一種稱為 Zig 的低級語言從頭開始實現了所有這些功能。

Tauri

在 2021 年，Tauri 在最受歡迎的項目中排名第五。2022 年它以新增 30000 Star 在最受歡迎的項目中排名第二。這是一個用 Rust 編寫的項目，用于使用 Web 技術創建跨平臺桌面應用。

Tauri 1.0 版于 6 月發布。它在構建時考慮了安全性和性能。與 Electron 相比，它占用空間小，因為開發人員必須指定應用所需的 API 和功能。

React 和 Next.js

排在第三位和第四位的分別是 React 和 Next.js，它們都新增了近 20000 Star。

Next.js 13 于 10 月發布，使用了 2020 年 React 17 引入的 React Server Components。

React 的維護者之一 Andrew Clark 表示：React Server Components 是 React 的未來，目標就是將這種架構傳播到整個 React 生態系統，而不管框架如何。

Vite

Vite 是基于 Web 技術構建應用的工具，提供了令人驚嘆的開發人員體驗。

Vite 今年有兩個主要版本（7 月發布的 v3 和 12 月發布的 v4）。它為越來越多的項目提供支持，包括框架 SvelteKit 和 Qwik 以及 Vitest。

前端框架

2022 年前端框架中的明星項目 Top 10 如下：

React 仍然是 2022 年的冠軍，如果考慮 Vue.js 的 v2 和 v3 倉庫 Star 總和，其與 React 受歡迎程度接近。

主要變化是排在第二位的 Qwik。Qwik 類似于 React，它也使用用 JSX 編寫的組件作為模板，但主要區別在于專注于在瀏覽器中傳輸最少的 JavaScript。

Qwik 是“Zero baseline JavaScript”框架趨勢的一部分。站點和應用通常會因影響瀏覽器性能的大量 JavaScript 資源而變得臃腫：即使頁面在服務端渲染，用戶也必須等到 JavaScript 被加載、解析和執行才能與頁面交互。

Qwik 不依靠水合來為服務器上生成的頁面帶來交互性，而是使用一種稱為可恢復性的技術來提供即時交互的 HTML。它通過在 HTML 本身中序列化應用的狀態來工作。

該項目由 Mi?ko Hevery 領導，他是 AngularJS 的創建者，他的口號是“為 Web 應用增強 HTML”，Qwik 就是“HTML 優先的框架”。

React 生態系統

2022 年 React 生態系統中的明星項目 Top 10 如下：

React 仍然是一個可以在任何網頁使用的庫，但它也已經發展成為一個架構框架，可以遵循它來創建交互式、彈性和高性能的前端模式。

React 18 版本（3 月）包括并發特性和 API，主要為框架提供架構模式。React Server Components 旨在結合這些新的架構模式實現。一些約定現在已經在 React 框架之間標準化（例如 use client），而其他約定正在測試階段（例如服務端組件中的 async/await）。

在 2023 年，我們將繼續看到使用 React 新原語的創新，用于改進類型安全的庫以及 UI 組件庫的增長將繼續上升。

Vue 生態系統

2022 年 Vue 生態系統中的明星項目 Top 10 如下：

今年，Vue.js 進行了許多重大更新。Vue 2.7 將原生 Composition API 和 ??<script setup>?? 語法帶到 Vue 2。

這使得向 Vue 3 的過渡更加順暢。??<script setup>?? 變得穩定且普遍可用，新的實驗性“Reactivity Transform”指日可待，可進一步增強 DX。Vue 團隊還在研究一種名為“Vapor mode”的新渲染策略，該策略受 Soild.js 的啟發，可以使 Vue 在關鍵部分的性能更高。

Nuxt 3 和 Vuetify 3 的穩定發布表明 Vue 的生態系統已經足夠成熟。Vite 在這一年成倍增長，它被 Vue 用戶大量使用，來自 create-vue、Nuxt、Quasar、Astro 和許多新框架。借助 Vite 的強大功能，Vue 用戶還可以使用 Vitest 和 Histoire 獲得更好的測試/開發體驗。我們還看到了 Vue 的創造性用法，例如使用 vue-termui 渲染命令行界面。

后端/全棧

2022 年后端/全棧中的明星項目 Top 10 如下：

前端和后端框架之間的界限比較模糊，因為與后端僅負責 API 的 SPA 方法相比，有一種趨勢就是在服務端做更多的事情（包括渲染和路由）。所以這部分包括了全棧框架、元框架和后端框架。

Next.js

與去年一樣，Next.js 在排名中處于領先地位，13.0 版本帶來了重要的功能，包括 React 服務端組件和使用 app 文件夾的新文件系統結構，并以更強大的方式處理嵌套路由。

tRPC

排在第二位的 tRPC 可以從客戶端導入服務端中定義的類型，以提供“端到端類型安全”。

值得一提的是 T3 Stack 項目，它在一個流行的模板文件中結合了 tRPC、Next.js 和 Tailwind CSS（總排名第 16 位）。

Astro

排在第三位的 Astro 在 2021 年作為靜態站點生成器出現，并使部分水合的概念流行起來。

?Astro 1.0 的發布彰顯了 Astro 團隊對創造流暢的開發者體驗的一絲不茍。支持與任何前端工具（如 React 和 SCSS）的“內置”集成讓 Web 應用開發變得簡單。

Remix

排在第四位的 Remix 保持快速增長。它于 2021 年開源，僅一年后就被 Shopify 收購。

Remix 不依賴于靜態頁面生成，而是利用分布式計算和原生瀏覽器功能在瀏覽器中提供出色的性能和令人驚嘆的開發人員體驗。

構建工具

2022 年構建工具中的明星項目 Top 10 如下：

今年，Vite 繼續保持上升趨勢，成為最流行的前端工具之一。其前身 Snowpack 不再維護，推薦使用 Vite。它的使用不限于 Vue 生態系統：Vite 可以用于 SvelteKit、Storybook、Vitest，甚至可以作為 Create-React-App 的現代替代品。

我們還看到了使用 Nx 和 Turborepo 的 monorepo 構建工具的興起。Nwrl（Nx 背后的公司）已經接管了 Lerna 的維護并發布了默認啟用 Nx 優化的 Lerna 6。

盡管 Babel 仍然很受歡迎，但 swc 和 esbuild 已被許多項目和元框架廣泛使用。這些新工具可以顯著提高構建和編譯性能。swc 是一個更模塊化的選擇，因為它提供了一個插件系統。

Vercel 宣布了 Turbopack（alpha），這是一個由 Tobias Koppers（Webpack  創建者） 創建的全新的、快速的 Rust 打包工具。

Rome 工具鏈發布了它的第一個穩定版本。目前其使用率較低，但今年可能會增加。

今年 Rust 中的許多前端工具可能會出現在新聞中：

• Lightning CSS[2]（以前稱為 Parcel CSS）：更快的 CSS 工具鏈；
• stc[3]：比 tsc 更快的替代品；
• mdxjs-rs[4]：更快的 MDX 實現。

CSS in JS

2022 年 CSS in JS 中的明星項目 Top 10 如下：

測試工具

2022 年測試工具中的明星項目 Top 10 如下：

移動端

2022 年移動端中的明星項目 Top 10 如下：

桌面端

2022 年桌面端中的明星項目 Top 5 如下：

靜態站點

2022 年靜態站點中的明星項目 Top 10 如下：

狀態管理

2022 年狀態管理中的明星項目 Top 10 如下：

GraphQL

2022 年 **GraphQL **中的明星項目 Top 10 如下：

總結

2022 年始于混亂，當時兩個非常受歡迎的 npm 包被其創建者故意破壞：Faker.js 和 colors.js。

當 Lerna （一個流行的 mono-repos 工具）被宣布無人維護時，這個龐大的生態系統的脆弱性再次得到證明。直到 Nx 背后的公司 Nrwl 宣布將接管 Lerna 的管理權。

如今，TypeScript 正在成為編寫 JavaScript 的標準（Deno 和 Bun 的一流支持，Next.js 的默認設置，Vite 的開箱即用支持等)。

對于開發人員和最終用戶而言，JavaScript 在代碼庫和工具中所占的地位會帶來一些問題：

• 在大型代碼庫中，構建時間失去控制；
• JavaScript 的平均大小不斷增加導致性能不佳。

2022 年，以下工具為這些問題提供了解決方案：

• Bun，年度冠軍，采用激進的方法來加快安裝和構建時間；
• Rome：一個 linter 和 formatter 程序，旨在成為管理用 JS/TS 編寫的應用的單一工具；
• Vite：構建工具。

對于瀏覽器中的性能，不同的模式競爭：

• Zero baseline JavaScript 框架幾乎不向瀏覽器提供 JS（Qwik 處于領先地位）；
• 部分水合作用為靜態頁面提供交互島 (Astro)；
• React 服務端組件（由 Next.js 13 和 Gatsby 實現）在服務端委派更多工作；
• Remix 實現的漸進增強的單頁應用架構在瀏覽器中提供了出色的 DX 和性能，而不會影響任何動態行為。

JavaScript 格局曾經非常分散：一側是多種瀏覽器，另一側是 Node.js，它有自己的 CommonJS 模塊系統和自己的 API。

隨著邊緣計算的興起，現在出現了一種強烈的趨勢，即在任何地方都使用相同的標準化 API 子集（fetch、HTTP 請求和響應等）。

參考：https://risingstars.js.org/2022/en

相關鏈接

[1] Best of JS: https://bestofjs.org/

[2] Lightning CSS: https://lightningcss.dev/

[3] stc: https://github.com/dudykr/stc

[4] mdxjs-rs: https://github.com/wooorm/mdxjs-rs?