大家好，我是你們的 貓哥，那個(gè)不喜歡吃魚、又不喜歡喵 的超級(jí)貓 ~

GitHub 上面有個(gè) Trending 榜 (趨勢(shì)榜)，在 Trending 頁(yè)面，你可以看到最近一些熱門的開源項(xiàng)目或者開發(fā)者，這個(gè)頁(yè)面可以算是很多人主動(dòng)獲取一些開源項(xiàng)目和活躍開發(fā)者最好的途徑。

所以貓哥會(huì)在每周的周一給大家推薦一篇上周的 前端周趨勢(shì)榜的 10 大項(xiàng)目，每月給大家推薦一篇上個(gè)月的 前端月趨勢(shì)榜的 20 大項(xiàng)目，方便大家知道最近都開源了哪些好的前端項(xiàng)目，還有用到的主流前端技術(shù)棧又是哪些，以免錯(cuò)過(guò)了好的開源項(xiàng)目。

平時(shí)如何發(fā)現(xiàn)好的開源項(xiàng)目，可以看看這篇文章：GitHub 上能挖礦的神仙技巧 - 如何發(fā)現(xiàn)優(yōu)秀開源項(xiàng)目

1. nocodb

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

https://github.com/nocodb/nocodb

2. prisma

Prisma 是包含以下工具的下一代 ORM：

• Prisma Client：針對(duì)Node.js和TypeScript的自動(dòng)生成且類型安全的查詢生成器

• Prisma Migrate：聲明性數(shù)據(jù)建模和遷移系統(tǒng)

• Prisma Studio：用于查看和編輯數(shù)據(jù)庫(kù)中數(shù)據(jù)的GUI

• Prisma Client 可以在任何 Node.js 或 TypeScript 后端應(yīng)用程序（包括無(wú)服務(wù)器應(yīng)用程序和微服務(wù)）中使用。這可以是 REST API，GraphQL API，gRPC API 或任何其他需要數(shù)據(jù)庫(kù)的東西。

https://github.com/prisma/prisma

3. n8n

n8n 是一款開源的自動(dòng)工作流服務(wù)，類似 IFTTT、Zapier，可以互聯(lián)互通包括 GitHub、Dropbox、Google、NextCLoud、RSS、Slack、Telegram 在內(nèi)的幾十款在線服務(wù)。實(shí)現(xiàn)當(dāng) A 條件發(fā)生，觸發(fā) B 服務(wù)這樣的自動(dòng)工作流程。

https://github.com/n8n-io/n8n

4. electron

electron 是一個(gè)使用 JavaScript、HTML 和 CSS 構(gòu)建跨平臺(tái)的桌面應(yīng)用程序。

它基于 Node.js 和 Chromium，被 Atom 編輯器和許多其他應(yīng)用程序使用。

https://github.com/electron/electron

5. next.js

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

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

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

6. tailwindcss

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

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

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

https://github.com/tailwindlabs/tailwindcss

7. React

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

聲明式

React 使創(chuàng)建交互式 UI 變得輕而易舉。為你應(yīng)用的每一個(gè)狀態(tài)設(shè)計(jì)簡(jiǎn)潔的視圖，當(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í)，隨處編寫

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

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

https://github.com/facebook/react

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

8. Vite

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

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

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

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

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

• 快速的冷啟動(dòng)

• 即時(shí)熱模塊更新（HMR，Hot Module Replacement）

• 真正按需編譯

https://github.com/vitejs/vite

9. graphql-engine

Hasura GraphQL Engine 是一個(gè)超快的 GraphQL 服務(wù)器，可以讓你基于 Postgres 數(shù)據(jù)庫(kù)快速簡(jiǎn)歷 GraphQL API 服務(wù)。通過(guò)數(shù)據(jù)庫(kù)事件實(shí)現(xiàn) webhook triggers ，其 remote schemas 用于構(gòu)建業(yè)務(wù)邏輯。

https://github.com/hasura/graphql-engine

10. vscode

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

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

https://github.com/microsoft/vscode

11. zx

zx 是一個(gè)更方便、更友好幫助開發(fā)者寫腳本的工具。

Bash 很好，但是在編寫腳本的時(shí)候，人們通常會(huì)選擇一種更方便的編程語(yǔ)言，JavaScript 就是一個(gè)很完美的選擇。但是標(biāo)準(zhǔn)的 Node.js 庫(kù)在使用之前需要許多額外的操作，比如安裝、引入庫(kù)等，zx 提供一個(gè)包裝器 child_process，用于轉(zhuǎn)義參數(shù)并提供合并的默認(rèn)值。

#!/usr/bin/env?zx??await?$`cat?package.json?|?grep?name`??let?branch?=?await?$`git?branch?--show-current`?? await?$`dep?deploy?--branch=${branch}`??await?Promise.all([??$`sleep?1;?echo?1`,??$`sleep?2;?echo?2`,??$`sleep?3;?echo?3`,?? ])??let?name?=?'foo?bar'?? await?$`mkdir?/tmp/${name}`??

https://github.com/google/zx

12. animate.css

Animate.css 是一個(gè)有趣的，跨瀏覽器的 css3 動(dòng)畫庫(kù)，內(nèi)置了很多典型的 css3 動(dòng)畫，兼容性好使用方便。

https://github.com/animate-css/animate.css

13. bootstrap

Bootstrap 是快速開發(fā) Web 應(yīng)用程序的前端工具包。它是一個(gè) CSS，HTML 和 JS 的集合，它使用了最新的瀏覽器技術(shù)，給你的 Web 開發(fā)提供了時(shí)尚的版式，表單，buttons，表格，網(wǎng)格系統(tǒng)等等。

https://github.com/twbs/bootstrap

14. Vue.js

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

易用

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

靈活

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

高效

• 20kB min+gzip 運(yùn)行大小

• 超快虛擬 DOM

• 最省心的優(yōu)化

https://github.com/vuejs/vue

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

15. playwright

Node.js 庫(kù)可通過(guò)單個(gè) API 自動(dòng)化 Chromium，Firefox 和 WebKit。

Playwright 由 Microsoft 創(chuàng)建，是一個(gè)開放源代碼瀏覽器自動(dòng)化框架，使 JavaScript 工程師可以在 Chromium，Webkit 和 Firefox 瀏覽器上測(cè)試其 Web 應(yīng)用程序。

https://github.com/microsoft/playwright

16. docz

docz 強(qiáng)大簡(jiǎn)單的文檔管理工具

使用 docz 我們可以用來(lái)方便的編寫以及發(fā)布文檔，同時(shí)提供漂亮友好的交互，可以快速的制作一個(gè)產(chǎn)品級(jí)的站點(diǎn)，使用了 mdx 文件（還是markdown），同時(shí)可以方便的集成到自己的 web 項(xiàng)目中。

https://github.com/pedronauck/docz

17. docusaurus

Docusaurus 幫你快速構(gòu)建并優(yōu)化網(wǎng)站，讓你專注于創(chuàng)作內(nèi)容。

https://github.com/facebook/docusaurus

18. TypeScript

為 JavaScript 提供靜態(tài)類型安全性的 JavaScript 的超集。

贏得了轉(zhuǎn)譯者與競(jìng)爭(zhēng)對(duì)手 Flow 的戰(zhàn)斗，幾乎成為前端和后端開發(fā)的標(biāo)準(zhǔn)。

DefinitelyTyped 項(xiàng)目為 7000 多個(gè)軟件包提供了其他類型！

https://github.com/microsoft/TypeScript

更多學(xué)習(xí)資料請(qǐng)看 推薦 7 個(gè)學(xué)習(xí) TypeScript 的寶庫(kù)。

19. ant-design

一套企業(yè)級(jí) UI 設(shè)計(jì)語(yǔ)言和 React 組件庫(kù)。

? 特性

• ???? 提煉自企業(yè)級(jí)中后臺(tái)產(chǎn)品的交互語(yǔ)言和視覺風(fēng)格。

• ???? 開箱即用的高質(zhì)量 React 組件。

• ???? 使用 TypeScript 開發(fā)，提供完整的類型定義文件。

• ?? 全鏈路開發(fā)和設(shè)計(jì)工具體系。

• ???? 數(shù)十個(gè)國(guó)際化語(yǔ)言支持。

• ???? 深入每個(gè)細(xì)節(jié)的主題定制能力。

https://github.com/ant-design/ant-design

20. react-use

必不可少的?React Hooks 集合.?libreact 的端口

https://github.com/streamich/react-use

最后

好了，6 月的前端月趨勢(shì)榜中最熱門的 20 大前端開源項(xiàng)目就是上面那些了。

大家發(fā)現(xiàn)了沒有，上面的項(xiàng)目中的很多個(gè)，貓哥都已經(jīng)推薦過(guò)了的。

這個(gè)世界發(fā)展的真相就是馬太效應(yīng)，強(qiáng)者越強(qiáng)，弱者越弱。

開源項(xiàng)目也符合上面的規(guī)律，好的開源項(xiàng)目， Star 數(shù)會(huì)越來(lái)越多，會(huì)得到很多外力的推廣(比如貓哥的推薦)，并且是呈現(xiàn)出指數(shù)型增長(zhǎng)的。

往期精文請(qǐng)看下方寶藏倉(cāng)庫(kù)，請(qǐng)慎入！

https://github.com/FrontEndGitHub/FrontEndGitHub

往期精文

• 2K+ Star！超過(guò) 50 個(gè)專題、450 個(gè)好項(xiàng)目，推薦過(guò)的重磅項(xiàng)目合集

• 前端月趨勢(shì)榜：5 月最熱門的 20 個(gè)前端開源項(xiàng)目 - 2105

• 推薦 7 個(gè) Vue2、Vue3 源碼解密分析的開源項(xiàng)目

• Vue3 的學(xué)習(xí)教程匯總、源碼解釋項(xiàng)目、支持的 UI 組件庫(kù)、優(yōu)質(zhì)實(shí)戰(zhàn)項(xiàng)目

微信搜索?前端GitHub，回復(fù) 電子書就送你 1000+本精華編程電子書；回復(fù)?1024送你一套完整的 前端視頻教程，絕對(duì)免費(fèi)，無(wú)套路獲取。。

不知不覺，原創(chuàng)文章已經(jīng)寫到第 49 期了呢，幾乎每一篇都是貓哥精心挑選的優(yōu)質(zhì)開源項(xiàng)目，推送的每一篇文章里面的項(xiàng)目幾乎都是對(duì)前端開發(fā)很有幫助的。

更新并運(yùn)營(yíng)大半年不易，大佬們看完文章后順手點(diǎn)個(gè)贊或者轉(zhuǎn)發(fā)吧，就當(dāng)給貓哥一點(diǎn)鼓勵(lì)吧，謝謝。

---

貓哥周六帶無(wú)人機(jī)去大觀濕地公園玩了一圈，做了個(gè)有意思的視頻，分享給大家看看，預(yù)告一下，視頻里，貓哥有真人出鏡哦?????

總結(jié)

以上是生活随笔為你收集整理的前端月趋势榜：6 月新增的、最热门的 20 个前端开源项目 - 2106的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。