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

1. jQuery

2006 年 8 月

jQuery 由 John Resig 創(chuàng)建并于 2006 年發(fā)布，在 Ajax 框架與 Prototype.js，Dojo 或 YUI 之類的庫(kù)的爭(zhēng)奪中勝出。

成為幾乎所有網(wǎng)頁(yè)中都包含的事實(shí)上的標(biāo)準(zhǔn)庫(kù)，即使在今天。

一個(gè)源于廣闊的“插件”生態(tài)系統(tǒng)的精美軟件。

提供統(tǒng)一的 API 來(lái)處理瀏覽器不一致的工作非常出色。

本月趨勢(shì)：GitHub上的+ 114 ☆

https://github.com/jquery/jquery

2. Node.js

2009 年 5 月

由 Ryan Dahl 在 JavaScript V8 引擎之上創(chuàng)建的 Node.js 將 JavaScript 帶到了服務(wù)器端。

強(qiáng)大的 API，命令行工具，IoT 設(shè)備和所有現(xiàn)代 Web 開(kāi)發(fā)工具。

本月趨勢(shì)：GitHub 上的 + 743 ☆

https://github.com/nodejs/node

3. Express

2009 年 6 月

Express 幾乎與 Node.js 一樣古老，但仍被認(rèn)為是 Node.js 的標(biāo)準(zhǔn) Web 框架。

由于其極簡(jiǎn)的方法，因此擁有深厚的中間件生態(tài)系統(tǒng)。

更現(xiàn)代的替代方法包括Nest，F(xiàn)astify或Next.js。

本月趨勢(shì)：GitHub 上的 + 402 ☆

https://github.com/expressjs/express

4. D3

2010 年 9 月

Mike Bostok 創(chuàng)建的經(jīng)典數(shù)據(jù)可視化庫(kù)在將近 10 年后仍然有用。

許多圖表庫(kù)都建立在其強(qiáng)大的原語(yǔ)之上。

本月趨勢(shì)：GitHub 上的 + 351 ☆

https://github.com/d3/d3

5. Angular

2010 年 1 月

2010 年，來(lái)自 Google 的 Angular 通過(guò)提供可在瀏覽器中運(yùn)行的完整框架，開(kāi)始顛覆開(kāi)發(fā)人員構(gòu)建應(yīng)用程序的方式。

它沒(méi)有增強(qiáng)服務(wù)器生成的 DOM，而是將頁(yè)面的控制移至客戶端，從而進(jìn)入了“單頁(yè)面應(yīng)用程序”時(shí)代。

Angular 2 在 2014 年作為一個(gè)單獨(dú)的項(xiàng)目發(fā)布。

本月趨勢(shì)： + 2 ☆ 在 GitHub 上

https://github.com/angular/angular.js

6. ember.js

2011 年 5 月

一個(gè) UI框架，該框架傾向于使用強(qiáng)約定以使 Web 開(kāi)發(fā)人員更加高效。

在 JavaScript 的現(xiàn)代化過(guò)程中發(fā)揮了重要作用。

本月趨勢(shì)：GitHub 上 + 35 ☆

https://github.com/emberjs/ember.js

7. Bootstrap

2011 年 7 月

Bootstrap 由 Twitter 在 2011 年開(kāi)源，是一組 JavaScript 和 CSS 元素，用于向網(wǎng)頁(yè)添加常見(jiàn)的小部件。

得益于整潔的文檔，一致的開(kāi)發(fā)人員體驗(yàn)和靈巧設(shè)計(jì)的響應(yīng)式設(shè)計(jì)功能，它閃閃發(fā)光。

當(dāng)開(kāi)發(fā)人員在智能手機(jī)上瀏覽網(wǎng)頁(yè)時(shí)，已幫助開(kāi)發(fā)人員使網(wǎng)頁(yè)適合移動(dòng)設(shè)備瀏覽。

本月趨勢(shì)：GitHub 上的 + 530 ☆

https://github.com/twbs/bootstrap

8. Webpack

2012 年 3 月

Webpack 是前端工具的關(guān)鍵部分，它能夠從任何種類的資產(chǎn)生成 JavaScript 捆綁包。

第五版主要版本將于 2020 年仍在 Create React App 或 Next.js 等項(xiàng)目中使用，即將推出。

包裹和匯總是最受歡迎的兩種。

本月趨勢(shì)：+ 247 ☆在GitHub上

https://github.com/twbs/bootstrap

9. TypeScript

2012 年 10 月

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

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

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

趨勢(shì)這個(gè)月：+ 740 ☆ GitHub 上

https://github.com/microsoft/TypeScript

10. electron

2013 年 4 月

使用 Web 技術(shù)構(gòu)建桌面應(yīng)用程序的解決方案。

由流行的桌面應(yīng)用程序使用，例如 VS Code，Slack ...

本月趨勢(shì)：GitHub 上的 + 440 ☆

https://github.com/electron/electron

11. React

2013 年 5 月

React 由 Facebook 開(kāi)源，以創(chuàng)建動(dòng)態(tài)，快速的 UI。

不是像 Angular 這樣的完整框架，因?yàn)樗鼉H處理視圖層。

它的組件方法和 JSX 語(yǔ)法變得非常流行，并啟發(fā)了許多項(xiàng)目。

本月趨勢(shì)：GitHub 上的 + 1646 ☆

https://github.com/facebook/react

12. Vue.js

2013 年 7 月

Vue.js 在 React 之后僅兩個(gè)月發(fā)布，采用了另一種方法來(lái)處理反應(yīng)性。

通常被認(rèn)為對(duì)初學(xué)者更友好。

沒(méi)有像 React 與 Facebook 或 Angular 與 Google 這樣的大型公司的支持，而是由 Evan You 創(chuàng)建的。

強(qiáng)大的社區(qū)，尤其是在中國(guó)。

版本 3 提供了巨大的改進(jìn)，包括更好的 TypeScript 支持和 Composition API。

本月趨勢(shì)：GitHub 上 + 1415 ☆

https://github.com/vuejs/vue

13. babel

2014 年 9 月

最初稱為 6 to 5 的編譯器 Babel 幫助使 JavaScript 的 ES6 版本流行，這是 React 成功的關(guān)鍵部分。

讓開(kāi)發(fā)人員使用 JavaScript 的最新功能編寫代碼，而不必?fù)?dān)心瀏覽器的支持。

作為許多項(xiàng)目的依賴項(xiàng)包括在內(nèi)。

本月趨勢(shì)：+ 184 ☆在 GitHub 上

https://github.com/babel/babel

14. VsCode

2015 年 9 月

基于 Electron 的最流行的 IDE，用于編碼 JavaScript 和 TypeScript 應(yīng)用程序。

GitHub 上的 Atom 于 2012 年推出，它是該概念的先驅(qū)：使用 Web 技術(shù)構(gòu)建的代碼編輯器，可通過(guò)安裝插件進(jìn)行擴(kuò)展。

憑借其 TypeScript 支持而發(fā)光……這兩個(gè)項(xiàng)目均來(lái)自 Microsoft。

本月趨勢(shì)：GitHub上為+ 1562 ☆

https://github.com/microsoft/vscode

15. react-native

2015 年 1 月

利用 React Native，開(kāi)發(fā)人員可以利用對(duì) React 框架的了解，為 iOS 或 Android 構(gòu)建移動(dòng)應(yīng)用程序。

本月趨勢(shì)：GitHub 上的 + 577 ☆

https://github.com/facebook/react-native

16. next.js

2016 年 10 月

成為最受歡迎的框架，用于構(gòu)建全棧 JavaScript 應(yīng)用程序（在前端和后端均運(yùn)行的應(yīng)用程序）。

在前端使用 React，并提供服務(wù)器端渲染功能，以提供最佳的用戶體驗(yàn)。

本月趨勢(shì)：GitHub 上的 + 1345 ☆

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

17. puppeteer

2017 年 5 月

一個(gè) Node.js 庫(kù)，用于控制無(wú)頭 Chrome 瀏覽器執(zhí)行諸如瀏覽器測(cè)試或 Web 抓取之類的操作。

本月趨勢(shì)：GitHub 上的 + 746 ☆

https://github.com/puppeteer/puppeteer

18. deno

2018 年 5 月

Node.js 發(fā)行 9 年后，Ryan Dahl 再次采用新的服務(wù)器端 JavaScript 運(yùn)行時(shí)。

旨在解決與 Node.js 相關(guān)的幾個(gè)問(wèn)題。

沒(méi)有集中的程序包管理器，可以從任何 URL 加載任何 JavaScript 依賴項(xiàng)。

2020 年最受歡迎的項(xiàng)目之一。

本月趨勢(shì)：GitHub 上的 + 1304 ☆

https://github.com/denoland/deno

19. snowpack

2019 年 2 月

一種構(gòu)建工具，可利用有關(guān) JavaScript 模塊的最新更改來(lái)提供出色的開(kāi)發(fā)人員體驗(yàn)。

本月趨勢(shì)：GitHub 上的 + 431 ☆

https://github.com/snowpackjs/snowpack

20. Rome

2020 年 2 月

Rome 由 Seb McKenzie 創(chuàng)建，旨在提供一個(gè)依賴項(xiàng)來(lái)處理所有前端工具（皮棉，測(cè)試，構(gòu)建...）。

這個(gè)冒似還不是非常出名，這將是 2020 年的成功項(xiàng)目嗎？還將有待時(shí)間驗(yàn)證！

本月趨勢(shì)：GitHub 上的 + 114 ☆

https://github.com/rome/tools

21. Vite 

2020 年

Vite 下一代前端工具

Vite 是 Vue 的作者尤雨溪開(kāi)發(fā)的 Web 開(kāi)發(fā)構(gòu)建工具，它是一個(gè)基于瀏覽器原生 ES 模塊導(dǎo)入的開(kāi)發(fā)服務(wù)器，在開(kāi)發(fā)環(huán)境下，利用瀏覽器去解析 import，在服務(wù)器端按需編譯返回，完全跳過(guò)了打包這個(gè)概念，服務(wù)器隨啟隨用。同時(shí)不僅對(duì) Vue 文件提供了支持，還支持熱更新，而且熱更新的速度不會(huì)隨著模塊增多而變慢。在生產(chǎn)環(huán)境下使用 Rollup 打包。

• :bulb: 即時(shí)服務(wù)器啟動(dòng)

• :zap:️ 快如閃電的 HMR

• ️ 豐富的功能

• :package: 優(yōu)化的構(gòu)建

• :nut_and_bolt: 通用插件接口

• :key: 全類型 API

這將是 2021 年的成功項(xiàng)目嗎？還將有待時(shí)間驗(yàn)證！

本月趨勢(shì)：GitHub 上的 + 1403 ☆

https://github.com/vitejs/vite