前段時(shí)間，有粉絲給小編私信，說(shuō)目前JavaScript語(yǔ)言里面哪個(gè)最受歡迎，今天小編在邊吃飯邊刷手機(jī)，瀏覽了Best of JS[1] 正式公布 2022 年 JavaScript 明星項(xiàng)目榜單，分享給大家，方便大家跟著自己喜好去規(guī)劃學(xué)習(xí)。

該榜單提供了過(guò)去 12 個(gè)月 JavaScript 生態(tài)系統(tǒng)中的趨勢(shì)項(xiàng)目的概述！

此榜單分12個(gè)類目包含了以下部分：

1. 前端框架
2. React生態(tài)系統(tǒng)
3. Vue生態(tài)系統(tǒng)
4. 后端/全棧
5. 構(gòu)建工具
6. CSS in JS
7. 測(cè)試工具
8. 移動(dòng)端
9. 桌面端
10. 靜態(tài)站點(diǎn)
11. 狀態(tài)管理
12. GraphQL

最受歡迎的項(xiàng)目

2022 年最受歡迎的 JavaScript 項(xiàng)目 Top 10 如下：

總冠軍：Bun

官網(wǎng)地址：https://bun.sh/

Github：https://github.com/oven-sh/bun

2022 年年度最流行的項(xiàng)目 Bun：一個(gè)新的 JavaScript 運(yùn)行時(shí)。今年夏天，隨著 GitHub 上第一個(gè) Beta 版的發(fā)布，它的人氣大增：一個(gè)月內(nèi)，GitHub 就有超過(guò) 20000 Star！

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

但 Bun 不僅僅是一個(gè)運(yùn)行時(shí)。它還包括：

• 包管理器（像 Yarn、NPM、PNPM）；
• 構(gòu)建工具（像 Webpack、ESBuild、Parcel）；
• 測(cè)試工具
• ...

Bun 可以讀取 package.json 安裝的依賴，Bun 還可以運(yùn)行腳本。它做任何事都比其他任何運(yùn)行時(shí)要快。Bun 是對(duì) JavaScript 生態(tài)系統(tǒng)許多方面的全新詮釋，專注于性能。

它優(yōu)先考慮 Fetch 等標(biāo)準(zhǔn) Web API。它支持許多 Node.js API，使其與大多數(shù) NPM 包兼容。它可能還沒(méi)有“生產(chǎn)就緒”（缺少 Windows 支持），但它是一個(gè)非常有前途的工具。與 Deno 相比，它的生態(tài)系統(tǒng)還很新，但它已經(jīng)有了一個(gè)名為 Elysia 的 Web 框架，號(hào)稱是最快的 HTTP 框架。

Bun 最令人難以置信的是它的創(chuàng)建者 Jarred Sumner 使用一種稱為 Zig 的低級(jí)語(yǔ)言從頭開(kāi)始實(shí)現(xiàn)了所有這些功能。

Tauri

官網(wǎng)地址：https://tauri.app/

Github：https://github.com/tauri-apps/tauri

在 2021 年，Tauri 在最受歡迎的項(xiàng)目中排名第五。2022 年它以新增 30000 Star 在最受歡迎的項(xiàng)目中排名第二。這是一個(gè)用 Rust 編寫(xiě)的項(xiàng)目，用于使用 Web 技術(shù)創(chuàng)建跨平臺(tái)桌面應(yīng)用。

Tauri 1.0 版于 6 月發(fā)布。它在構(gòu)建時(shí)考慮了安全性和性能。與 Electron 相比，它占用空間小，因?yàn)殚_(kāi)發(fā)人員必須指定應(yīng)用所需的 API 和功能。

React 和 Next.js

React 官網(wǎng)地址：https://reactjs.org/

Github：https://github.com/facebook/react

Next.js 官網(wǎng)地址: https://nextjs.org/

Github：https://github.com/vercel/next.js

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

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

React 的維護(hù)者之一 Andrew Clark 表示：React Server Components 是 React 的未來(lái)，目標(biāo)就是將這種架構(gòu)傳播到整個(gè) React 生態(tài)系統(tǒng)，而不管框架如何。

Vite

官網(wǎng)地址：http://vitejs.dev/

Github：https://github.com/vitejs/vite

Vite 是基于 Web 技術(shù)構(gòu)建應(yīng)用的工具，提供了令人驚嘆的開(kāi)發(fā)人員體驗(yàn)。

Vite 今年有兩個(gè)主要版本（7 月發(fā)布的 v3 和 12 月發(fā)布的 v4）。它為越來(lái)越多的項(xiàng)目提供支持，包括框架 SvelteKit 和 Qwik 以及 Vitest。

前端框架

2022 年前端框架中的明星項(xiàng)目 Top 10 如下：

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

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

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

Qwik 不依靠水合來(lái)為服務(wù)器上生成的頁(yè)面帶來(lái)交互性，而是使用一種稱為可恢復(fù)性的技術(shù)來(lái)提供即時(shí)交互的 HTML。它通過(guò)在 HTML 本身中序列化應(yīng)用的狀態(tài)來(lái)工作。

該項(xiàng)目由 Mi?ko Hevery 領(lǐng)導(dǎo)，他是 AngularJS 的創(chuàng)建者，他的口號(hào)是“為 Web 應(yīng)用增強(qiáng) HTML”，Qwik 就是“HTML 優(yōu)先的框架”。

React 生態(tài)系統(tǒng)

2022 年 React 生態(tài)系統(tǒng)中的明星項(xiàng)目 Top 10 如下：

React 仍然是一個(gè)可以在任何網(wǎng)頁(yè)使用的庫(kù)，但它也已經(jīng)發(fā)展成為一個(gè)架構(gòu)框架，可以遵循它來(lái)創(chuàng)建交互式、彈性和高性能的前端模式。

React 18 版本（3 月）包括并發(fā)特性和 API，主要為框架提供架構(gòu)模式。React Server Components 旨在結(jié)合這些新的架構(gòu)模式實(shí)現(xiàn)。一些約定現(xiàn)在已經(jīng)在 React 框架之間標(biāo)準(zhǔn)化（例如 use client），而其他約定正在測(cè)試階段（例如服務(wù)端組件中的 async/await）。

在 2023 年，我們將繼續(xù)看到使用 React 新原語(yǔ)的創(chuàng)新，用于改進(jìn)類型安全的庫(kù)以及 UI 組件庫(kù)的增長(zhǎng)將繼續(xù)上升。

Vue 生態(tài)系統(tǒng)

2022 年 Vue 生態(tài)系統(tǒng)中的明星項(xiàng)目 Top 10 如下：

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

這使得向 Vue 3 的過(guò)渡更加順暢。<script setup> 變得穩(wěn)定且普遍可用，新的實(shí)驗(yàn)性“Reactivity Transform”指日可待，可進(jìn)一步增強(qiáng) DX。Vue 團(tuán)隊(duì)還在研究一種名為“Vapor mode”的新渲染策略，該策略受 Soild.js 的啟發(fā)，可以使 Vue 在關(guān)鍵部分的性能更高。

Nuxt 3 和 Vuetify 3 的穩(wěn)定發(fā)布表明 Vue 的生態(tài)系統(tǒng)已經(jīng)足夠成熟。Vite 在這一年成倍增長(zhǎng)，它被 Vue 用戶大量使用，來(lái)自 create-vue、Nuxt、Quasar、Astro 和許多新框架。借助 Vite 的強(qiáng)大功能，Vue 用戶還可以使用 Vitest 和 Histoire 獲得更好的測(cè)試/開(kāi)發(fā)體驗(yàn)。我們還看到了 Vue 的創(chuàng)造性用法，例如使用 vue-termui 渲染命令行界面。

后端/全棧

2022 年后端/全棧中的明星項(xiàng)目 Top 10 如下：

前端和后端框架之間的界限比較模糊，因?yàn)榕c后端僅負(fù)責(zé) API 的 SPA 方法相比，有一種趨勢(shì)就是在服務(wù)端做更多的事情（包括渲染和路由）。所以這部分包括了全?？蚣堋⒃蚣芎秃蠖丝蚣?。

Next.js

與去年一樣，Next.js 在排名中處于領(lǐng)先地位，13.0 版本帶來(lái)了重要的功能，包括 React 服務(wù)端組件和使用 app 文件夾的新文件系統(tǒng)結(jié)構(gòu)，并以更強(qiáng)大的方式處理嵌套路由。

tRPC

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

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

Astro

排在第三位的 Astro 在 2021 年作為靜態(tài)站點(diǎn)生成器出現(xiàn)，并使部分水合的概念流行起來(lái)。

Astro 1.0 的發(fā)布彰顯了 Astro 團(tuán)隊(duì)對(duì)創(chuàng)造流暢的開(kāi)發(fā)者體驗(yàn)的一絲不茍。新的 SSR 支持與任何前端工具（如 React 和 SCSS）的“內(nèi)置”集成讓 Web 應(yīng)用開(kāi)發(fā)變得簡(jiǎn)單。

Remix

排在第四位的 Remix 保持快速增長(zhǎng)。它于 2021 年開(kāi)源，僅一年后就被 Shopify 收購(gòu)。

Remix 不依賴于靜態(tài)頁(yè)面生成，而是利用分布式計(jì)算和原生瀏覽器功能在瀏覽器中提供出色的性能和令人驚嘆的開(kāi)發(fā)人員體驗(yàn)。

構(gòu)建工具

2022 年構(gòu)建工具中的明星項(xiàng)目 Top 10 如下：

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

我們還看到了使用 Nx 和 Turborepo 的 monorepo 構(gòu)建工具的興起。Nwrl（Nx 背后的公司）已經(jīng)接管了 Lerna 的維護(hù)并發(fā)布了默認(rèn)啟用 Nx 優(yōu)化的 Lerna 6。

盡管 Babel 仍然很受歡迎，但 swc 和 esbuild 已被許多項(xiàng)目和元框架廣泛使用。這些新工具可以顯著提高構(gòu)建和編譯性能。swc 是一個(gè)更模塊化的選擇，因?yàn)樗峁┝艘粋€(gè)插件系統(tǒng)。

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

Rome 工具鏈發(fā)布了它的第一個(gè)穩(wěn)定版本。目前其使用率較低，但今年可能會(huì)增加。

今年 Rust 中的許多前端工具可能會(huì)出現(xiàn)在新聞中：

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

CSS in JS

2022 年 CSS in JS 中的明星項(xiàng)目 Top 10 如下：

測(cè)試工具

2022 年測(cè)試工具中的明星項(xiàng)目 Top 10 如下：

移動(dòng)端

2022 年移動(dòng)端中的明星項(xiàng)目 Top 10 如下：

桌面端

2022 年桌面端中的明星項(xiàng)目 Top 5 如下：

靜態(tài)站點(diǎn)

2022 年靜態(tài)站點(diǎn)中的明星項(xiàng)目 Top 10 如下：

狀態(tài)管理

2022 年?duì)顟B(tài)管理中的明星項(xiàng)目 Top 10 如下：

GraphQL

2022 年 **GraphQL **中的明星項(xiàng)目 Top 10 如下：

總結(jié)

2022 年始于混亂，當(dāng)時(shí)兩個(gè)非常受歡迎的 npm 包被其創(chuàng)建者故意破壞：Faker.js 和 colors.js。

當(dāng) Lerna （一個(gè)流行的 mono-repos 工具）被宣布無(wú)人維護(hù)時(shí)，這個(gè)龐大的生態(tài)系統(tǒng)的脆弱性再次得到證明。直到 Nx 背后的公司 Nrwl 宣布將接管 Lerna 的管理權(quán)。

如今，TypeScript 正在成為編寫(xiě) JavaScript 的標(biāo)準(zhǔn)（Deno 和 Bun 的一流支持，Next.js 的默認(rèn)設(shè)置，Vite 的開(kāi)箱即用支持等)。

對(duì)于開(kāi)發(fā)人員和最終用戶而言，JavaScript 在代碼庫(kù)和工具中所占的地位會(huì)帶來(lái)一些問(wèn)題：

• 在大型代碼庫(kù)中，構(gòu)建時(shí)間失去控制；
• JavaScript 的平均大小不斷增加導(dǎo)致性能不佳。

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

• Bun，年度冠軍，采用激進(jìn)的方法來(lái)加快安裝和構(gòu)建時(shí)間；
• Rome：一個(gè) linter 和 formatter 程序，旨在成為管理用 JS/TS 編寫(xiě)的應(yīng)用的單一工具；
• Vite：構(gòu)建工具。

對(duì)于瀏覽器中的性能，不同的模式競(jìng)爭(zhēng)：

• Zero baseline JavaScript 框架幾乎不向?yàn)g覽器提供 JS（Qwik 處于領(lǐng)先地位）；
• 部分水合作用為靜態(tài)頁(yè)面提供交互島 (Astro)；
• React 服務(wù)端組件（由 Next.js 13 和 Gatsby 實(shí)現(xiàn)）在服務(wù)端委派更多工作；
• Remix 實(shí)現(xiàn)的漸進(jìn)增強(qiáng)的單頁(yè)應(yīng)用架構(gòu)在瀏覽器中提供了出色的 DX 和性能，而不會(huì)影響任何動(dòng)態(tài)行為。

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

隨著邊緣計(jì)算的興起，現(xiàn)在出現(xiàn)了一種強(qiáng)烈的趨勢(shì)，即在任何地方都使用相同的標(biāo)準(zhǔn)化 API 子集（fetch、HTTP 請(qǐng)求和響應(yīng)等）。