本文轉(zhuǎn)載自微信公眾號「前端GitHub」，作者貓哥。轉(zhuǎn)載本文請聯(lián)系前端GitHub公眾號。

大家新好呀，我是你們的 貓哥，那個(gè)不喜歡吃魚、又不喜歡喵 的超級貓又在線營業(yè)啦 ~

過年期間，不知道大家過得開不開心，反正貓哥過的挺開心的 ??

新的一年，又是時(shí)候?qū)W習(xí)了，先來看看排行榜吧，知道一下目前最流行的項(xiàng)目都有哪些。

1. zx

年度流行項(xiàng)目是 zx，一個(gè)由谷歌推出的全新的工具，可用于以 JavaScript 或 TypeScript 編寫簡單的命令行腳本。

基本上它可以讓你在代碼中嵌入任何 bash 表達(dá)式(ls, cat, git...等任何命令!)，并 await 使用 JavaScript 模板字符串 的結(jié)果。

它引入了由幾個(gè)流行的軟件包提供的實(shí)用工具：

• node-fetch 與瀏覽器中 fetch 有著相同的 API， 可創(chuàng)建 HTTP 請求。
• fs-extra 可處理文件系統(tǒng)操作。
• globby 以用戶友好模式來匹配給定的文件名。

??https://github.com/google/zx??

2. vite

Vite，一個(gè)基于瀏覽器原生 ES imports 的開發(fā)服務(wù)器。

利用瀏覽器去解析 imports，在服務(wù)器端按需編譯返回，完全跳過了打包這個(gè)概念，服務(wù)器隨起隨用。

同時(shí)不僅有 Vue 文件支持，還搞定了熱更新，而且熱更新的速度不會隨著模塊增多而變慢。針對生產(chǎn)環(huán)境則可以把同一份代碼用 rollup 打。

雖然現(xiàn)在還比較粗糙，但這個(gè)方向我覺得是有潛力的，做得好可以徹底解決改一行代碼等半天熱更新的問題。

Vite 具有以下特點(diǎn)：

• 快速的冷啟動
• 即時(shí)熱模塊更新(HMR，Hot Module Replacement)
• 真正按需編譯

??https://github.com/vitejs/vite??

3. next

這是一個(gè)用于 生產(chǎn)環(huán)境的 React 框架。

Next.js 為您提供生產(chǎn)環(huán)境所需的所有功能以及最佳的開發(fā)體驗(yàn)：包括靜態(tài)及服務(wù)器端融合渲染、 支持 TypeScript、智能化打包、 路由預(yù)取等功能 無需任何配置。

??https://github.com/vercel/next.js??

4. react

一個(gè)聲明性，高效且靈活的 JavaScript 庫，用于構(gòu)建用戶界面。

聲明式

React 使創(chuàng)建交互式 UI 變得輕而易舉。為你應(yīng)用的每一個(gè)狀態(tài)設(shè)計(jì)簡潔的視圖，當(dāng)數(shù)據(jù)改變時(shí) React 能有效地更新并正確地渲染組件。

以聲明式編寫 UI，可以讓你的代碼更加可靠，且方便調(diào)試。

組件化

創(chuàng)建擁有各自狀態(tài)的組件，再由這些組件構(gòu)成更加復(fù)雜的 UI。

組件邏輯使用 JavaScript 編寫而非模板，因此你可以輕松地在應(yīng)用中傳遞數(shù)據(jù)，并使得狀態(tài)與 DOM 分離。

一次學(xué)習(xí)，隨處編寫

無論你現(xiàn)在正在使用什么技術(shù)棧，你都可以隨時(shí)引入 React 來開發(fā)新特性，而不需要重寫現(xiàn)有代碼。

React 還可以使用 Node 進(jìn)行服務(wù)器渲染，或使用 React Native 開發(fā)原生移動應(yīng)用。

https://github.com/facebook/reactReact 相關(guān)的項(xiàng)目可以看: 一個(gè) React 技術(shù)揭秘的項(xiàng)目，自頂向下的 React 源碼分析。

5. tauri

Tauri 是用于為所有主要桌面平臺構(gòu)建超小型快速二進(jìn)制文件的框架。開發(fā)人員可以集成可編譯為 HTML，JS 和 CSS 的任何前端框架，以構(gòu)建其用戶界面。該應(yīng)用程序的后端是帶有銹源的二進(jìn)制文件，帶有可與前端進(jìn)行交互的 API。

Tauri 應(yīng)用程序中的用戶界面目前 winit 在 macOS 和 Windows 上以及gtk 在 Linux 上通過 Tauri-team培養(yǎng)并維護(hù)的 WRY 作為窗口處理庫加以利用，WRY 可以利用 macOS 上的 WebKit，Windows 和 Linux 上的 WebKitGTK。

??https://github.com/tauri-apps/tauri??

6. tailwindcss

一個(gè)實(shí)用程序優(yōu)先的 CSS 框架，用于快速構(gòu)建自定義用戶界面。

無需離開您的 HTML，即可快速建立現(xiàn)代網(wǎng)站。

Tailwind CSS 是一個(gè)功能類優(yōu)先的 CSS 框架，它集成了諸如 flex, pt-4, text-center 和 rotate-90 這樣的的類，它們能直接在腳本標(biāo)記語言中組合起來，構(gòu)建出任何設(shè)計(jì)。

??https://github.com/tailwindlabs/tailwindcss??

7. vscode

Visual Studio Code 是一個(gè)運(yùn)行于 OS X，Windows 和 Linux 之上的，針對于編寫現(xiàn)代 Web 和云應(yīng)用的跨平臺編輯器。

也是當(dāng)今天前端最流行的編輯器!

??https://github.com/microsoft/vscode??

8. slidev

為開發(fā)者打造的演示文稿工具。

Slidev (slide + dev, /sl??d?v/) 是基于 Web 的幻燈片制作和演示工具。它旨在讓開發(fā)者專注在 Markdown 中編寫內(nèi)容，同時(shí)擁有支持 HTML 和 Vue 組件的能力，并且能夠呈現(xiàn)像素級完美的布局，還在你的演講稿中內(nèi)置了互動的演示樣例。

它使用了功能豐富的 markdown 文件來生成精美的幻燈片，具有即時(shí)重載的體驗(yàn)。它還擁有很多內(nèi)置的集成功能，如實(shí)時(shí)編碼、導(dǎo)出 PDF、演講錄制等。由于 Slidev 是由 web 驅(qū)動的，因此你可以使用它進(jìn)行任何操作 —— 具有無限的可能性。

??https://github.com/slidevjs/slidev??

9. nocodb

NocoDB 是 Airtable 的開源替代方案，可以“一鍵”將 MySQL、PostgreSQL、SQL Server、SQLite 和 MariaDB 轉(zhuǎn)換為智能電子表格，提供了豐富的電子表格界面，支持搜索、排序、過濾、隱藏列等功能。

??https://github.com/nocodb/nocodb??

10. vue

Vue.js 是一個(gè)漸進(jìn)式 JavaScript 框架，也是目前前端最流行的框架。

易用

• 已經(jīng)會了 HTML、CSS、JavaScript?即刻閱讀指南開始構(gòu)建應(yīng)用!

靈活

• 不斷繁榮的生態(tài)系統(tǒng)，可以在一個(gè)庫和一套完整框架之間自如伸縮。

高效

• 20kB min+gzip 運(yùn)行大小
• 超快虛擬 DOM
• 最省心的優(yōu)化

https://github.com/vuejs/vueVue

相關(guān)的項(xiàng)目可以看看：推薦 7 個(gè) Vue2、Vue3 源碼解密分析的開源項(xiàng)目和 Vue3 的學(xué)習(xí)教程匯總、源碼解釋項(xiàng)目、支持的 UI 組件庫、優(yōu)質(zhì)實(shí)戰(zhàn)項(xiàng)目，你會找到 Vue 的學(xué)習(xí)寶藏庫。