【整理分享】阿里巴巴的15個頂級前端開源項目，看看你都用過哪些！

這篇文章來看看阿里巴巴那些熱門的前端開源項目，你都用過哪些？沒有用過的，可以試試！

全文概覽：

• Ant Design： 企業級UI 設計語言和React 元件庫

• Element UI： 基於Vue 2.0 的桌面端元件庫

• Egg. js： 企業級Node.js 框架

• Icejs： 基於React 的中後台應用解決方案

• UmiJS： 可插拔的企業級React 應用框架

• #G2： 資料驅動的高互動視覺化圖形語法

• ahooks： 高品質可靠的React Hooks 函式庫

• Formily： MVVM 表單解決方案

• Rax： 跨容器的渲染引擎

• LowCodeEngine： 低程式碼引擎

• #Midway： 面向未來的雲端一體Node.js 框架

• BizCharts： 通用圖表元件庫

• Hilo： HTML5 互動遊戲引擎

• #XRender： 中後台表單、表格、圖表解決方案

• Fusion Design： 企業級中後台UI 解決方案

1. Ant Design

Ant Design 是一套企業級UI 設計語言和React 元件庫。其具有以下特性：

• 提煉自企業級中後台產品的互動語言和視覺風格。
• 開箱即用的高品質 React 元件。
• 使用 TypeScript 開發，提供完整的類型定義檔。
• 全鏈路開發和設計工具體系。
• 數十個國際化語言支援。
• 深入每個細節的主題自訂能力。

• Ant Design Github（⭐️ 81.5k）：github.com/ant-design/…
• Ant Design Pro Github（⭐️ 32.7k）：github.com/ant-design/…
• Ant Design Mobile Github（⭐️ 10.5k）：github.com/ant-design/…

2. Element UI

##Element 是一套為開發者、設計師和產品經理準備的基於Vue 2.0 的桌面端元件庫。

Github（⭐️ 52.5k）：github.com/ElemeFE/ele…

#3. Egg.js

Egg.js 是一個企業級Node.js 框架，Egg 的外掛機制有很高的可擴充性，一個外掛只做一件事。 Egg 透過框架聚合這些插件，並根據自己的業務場景定製配置，這樣應用的開發成本就變得很低。其具有以下特性：

• 提供基於Egg 客製化上層框架的能力
• #高度可擴展的外掛機制
• 內建多進程管理
• 基於Koa 開發，性能優異
• 框架穩定，測試覆蓋率高
• 漸進式開發

Github （⭐️ 18.1k）：github.com/eggjs/egg

4. Icejs

飛冰是一個基於React 的研發解決方案，圍繞著應用研發框架icejs 提供基礎的建置、路由、調試等基礎能力以及微前端、一體化等領域能力，同時結合視覺化操作、物料復用等方案降低研發門檻。其具有以下特性：

• 同時支援Vite & Webpack 模式，業務可以按需選擇
• 開箱即用的工程能力：TypeScript/Webpack5/Vite/樣式方案/Mock/...
• 貼合業務的最佳實踐：目錄規範、程式碼規格、路由方案、狀態管理、資料請求等
• 多種應用模式：支援SPA、MPA，同時支援服務端渲染SSR 以及靜態構建SSG
• 強大的插件能力：官方所有能力都透過外掛程式實現，業務可以透過外掛程式擴展各種能力
• 豐富的領域方案：微前端解決方案icestark、一體化方案、React Hooks 解決方案ahooks、表單方案Formily 等

Github（⭐️ 17.3k）：github.com/alibaba/ice

5. UmiJS

umi 是可插拔的企業級react 應用框架。 Umi 以路由為基礎的，同時支援配置式路由和約定式路由，確保路由的功能完備，並以此進行功能擴展。然後配以生命週期完善的插件體系，涵蓋從來源碼到建構產物的每個生命週期，支援各種功能擴展和業務需求。它具有許多非常有趣的特性，例如：

• 企業級，在安全性、穩定性、最佳實踐、約束能力方面會考慮更多
• 插件化，啥都能改，Umi 本身也是由插件構成
• MFSU，比Vite 還快的Webpack 打包方案
• 基於React Router 6 的完備路由
• #預設最快的請求
• SSR & SSG
• 穩定白盒效能好的ESLint 和Jest
• React 18 的框架級存取
• Monorepo 最佳實踐

Github（⭐️ 12.9k）：github.com/umijs/umi

#6. G2

G2 一套面向常規統計圖表，以資料驅動的高互動視覺化圖形語法，具有高度的易用性和擴展性。使用 G2，你可以無需關注圖表各種繁瑣的實作細節，一條語句即可使用 Canvas 或 SVG 建立出各種各樣的可互動的統計圖表。

Github（⭐️ 11.3k）：github.com/antvis/g2

#7.ahooks

ahooks 是一套高品質可靠的React Hooks 函式庫，在目前React 專案研發過程中，一套好用的React Hooks 函式庫是不可或缺的，希望ahooks 能成為您的選擇。其具有以下特性：

• 易學易用
• 支援SSR
• 對輸入輸出函數做了特殊處理，且避免閉包問題
• 包含大量提煉自業務的高級Hooks
• 包含豐富的基礎Hooks
• 使用TypeScript 構建，提供完整的類型定義檔

Github（⭐️ 10.1k）：github.com/alibaba/hoo…

8. Formily

Formily 是抽象了表單領域模型的MVVM 表單解決方案。在 React 中，在受控模式下，表單的整樹渲染問題非常明顯。特別是對於資料連動的場景，很容易導致頁面卡頓，為了解決這個問題，Formily 將每個表單欄位的狀態做了分散式管理，這大大提升了表單操作效能。同時，深度整合了 JSON Schema 協議，可以幫助你快速解決後端驅動表單渲染的問題。其具有以下特點：

• 高效能
• 開箱即用
• 連動邏輯實現高效
• 跨端能力，邏輯可跨框架，跨終端復用
• 動態渲染能力

#Github（⭐️ 8.3k）：#github. com/alibaba/for…

9. Rax

Rax 是阿里巴巴應用最廣泛的跨端解決方案，支援開發者透過類別React DSL 編寫Web、小程式、 Flutter 等不同容器的跨端應用。其具有以下特性：

• Rax 語法層面以React 為標準，可以使用Hooks、Context 等80% 以上支援度的React API
• 官方配套的研發框架Rax App，支援TypeScript、Less/Sass 等基礎工程能力，同時支援MPA、SPA、SSR 多種能力
• 支援透過完整的Rax 語法開發跨支付寶/微信/位元組等不同廠商的小程序，同時可降級到Web
• #基於Web 標準支援跨多容器的跨端應用，包含Web 應用、Flutter 應用（Kraken）、Weex 應用
• 豐富的跨端生態，例如跨端元件Fusion Mobile，跨端API Uni API

Github（⭐️ 7.8k）：github.com/alibaba/rax

#10 . LowCodeEngine

LowCodeEngine 低程式碼引擎是一款為低程式碼平台開發者提供的，具備強大擴展能力的低程式碼研發框架。由阿里巴巴前端委員會、釘釘宜搭聯合出品。用戶只需要基於低程式碼引擎便可以快速自訂符合自己業務需求的低程式碼平台。其具有以下特點：

• 提煉自企業級低程式碼平台的面向擴展設計的內核引擎，奉行最小內核，最強生態的設計理念
• 開箱即用的高品質生態元素，包括物料體系、設定器、外掛程式等
• 完善的工具鏈，支援物料體系、設定器、外掛程式等生態元素的全鏈路研發週期
• 強大的擴充能力，已支援近100 個各種垂直類別低程式碼平台
• 使用TypeScript 開發，提供完整的類型定義檔

##Github（⭐️ 7.6k）：github.com/alibaba/low…

11. Midway

Midway 是一個適用於建立Serverless 服務，傳統應用、微服務，小程式後端的Node.js 框架。它可以使用 Koa，Express 或 Egg.js 作為基礎 Web 框架。它還提供了獨立使用的基本解決方案，例如 Socket.io，GRPC，Dubbo.js 和 RabbitMQ 等。此外，Midway 也適用於前端/全端開發人員的 Node.js 無伺服器框架。建構下一個十年的應用程式。可在 AWS，阿里雲，騰訊雲和傳統 VM /容器上運行。與 React 和 Vue 輕鬆整合。

Github（⭐️ 5.9k）：github.com/midwayjs/mi…

#12. BizCharts

BizCharts是阿里通用圖表元件庫，致力於打造企業中後台高效、專業、便捷的資料視覺化解決方案，基於G2與G2Plot封裝的React圖表庫，已經歷阿里複雜業務場景長達三年的洗禮，在靈活性、易用性、豐富度上滿足常規圖表和高度自訂圖表的業務實現。

Github（⭐️ 5.9k）：github.com/alibaba/Biz…

#13. Hilo

Hilo 是阿里巴巴集團開發的HTML5跨終端遊戲解決方案，ta可以幫助開發者快速創建HTML5遊戲。其具有以下特性：

Hilo 支援多種模組範式的包裝版本，包括AMD，CMD，COM​​MONJS，Standalone多種方式存取。另外，你可以根據需要新增和擴展模組和類型；
• 極精簡的模組設計，完全面向對象；
• 多種渲染方式, 提供DOM，Canvas，Flash，WebGL等多種渲染方案（目前已申請專利）；
• 全端瀏覽器的支援與高效能方案，獨有的Flash渲染方案，即使在低版IE瀏覽器下也可以跑起來「酷炫「遊戲； DOM渲染方案能顯著解決低效能手機瀏覽器遇到的效能問題；
• 實體引擎支援－Chipmunk，支援自擴充實體實作；骨骼動畫支援－DragonBones，同時內建骨骼動畫系統－Tahiti（目前內部使用）；
• 案例豐富，框架成熟，已經經歷多屆阿里巴巴雙十一，年中大促互動行銷活動考驗；

Github（⭐️ 5.8k）：github.com/hiloteam/Hi…

14. XRender

XRender 是一個很容易使用的中後台「表單 / 表格 / 圖表」解決方案。

Github（⭐️ 4.9k）：github.com/alibaba/x-r…

#15. Fusion Design

Fusion Design 是一種旨在提升設計與開發之間UI 建置效率的工作方式。透過建立基於 DPL 模式的，設計、前端之間的標準協定與工作流程，來快速建構符合業務訴求的 DPL，提升 DPL 的建置效率和應用效率，幫助業務快速實現 UI 建置。

Github（⭐️ 4.2k）：github.com/alibaba-fus…

#原文網址：https://juejin.cn/post/7135382523672002590

（學習影片分享：web前端入門）

以上是【整理分享】阿里巴巴的15個頂級前端開源項目，看看你都用過哪些！的詳細內容。更多資訊請關注PHP中文網其他相關文章！