Modern.js：把 React 應用開發流程組織起來
基於 React 和 Rsbuild 的漸進式 Web 框架。 Rsbuild：基於 Rspack 的 Web 建置工具，由 Modern.js Builder 更名。
秒懂
- 它是什麼？
- Modern.js 將 React 應用的路由、資料取得、建置與部署流程收進同一套框架，README 也把它放在 Web Infra Dev 的工具鏈中。實際採用仍要看既有 React 程式與框架約束能否對接。
- 適合誰用？
- 適合需要依 web-infra-dev/modern.js README 建立明確工作流程、並能承擔 MIT 授權與維運責任的團隊；不適合把專案描述當成完整保證的人。先用 modern.js 的最小命令或設定完成一次受控測試，核對輸入、輸出、錯誤和目標環境，再決定是否擴大採用。
- 可以商用嗎？
- 可以。MIT 是寬鬆授權：你可以使用、修改並販售以它為基礎的軟體，只需保留著作權與授權聲明。
- 還在維護嗎？
- 有在維護。儲存庫最近一次提交在 2 天前。
- 用什麼語言寫的？
- 主要是 TypeScript（依據 GitHub 的語言統計）。
以上回答依據專案的 GitHub 資料（最近同步於 2026年9月14日）與我們的分析，不構成法律意見。
開源專案深度解析
modern.js｜為渐进式采用而構建的 React 框架 · web-infra-dev-modern-js-deep-analysis
Modern.js 的 README 將其描述為基于 React 的渐进式 Web 框架，倉庫元數據进一步写明它基于 React 和 Rsbuild。README 開头的標语是 'Inspire creativity in modern web development.' ByteDance 團隊用 Modern.js 構建上层框架，這些框架已支撑數千個 Web 應用。按 README 的说法，React 應用通常需要為某些功能設計實現方案或借助其他庫；Modern.js 支持 React 應用所需的各種配置和工具，并內置了额外功能與优化。開發者可以用 React 構建 UI，再逐步采用 Modern.js 的功能来解决路由、數據获取和状态管理等常见需求。倉庫元數據列出 5,031 個 star、414 個 fork 和 36 個 open issues，默認分支為 main；项目未標记為归檔，表示当前仍在維护。
第 1 節的核對點要落在 web-infra-dev/modern.js README 明確列出的命令、檔案或設定，而不是抽象功能名稱。請以 modern.js 的實際輸入與輸出記錄一次成功和一次失敗，保留錯誤文字、退出碼與產物位置；素材沒有說明的相容性、容量或安全承諾，本文維持文件未說明。
針對第 1 節，先確認 modern.js 的執行前置條件，再觀察它如何處理輸入、產生結果，以及遇到錯誤時留下什麼訊號。若涉及網路、權限、資料庫、瀏覽器或虛擬化環境，應把該依賴單獨記錄，不能從一次成功執行推定所有部署都相同。將測試放在隔離工作區，保存使用的版本與設定檔，之後再以同一個案例比較變更前後的行為。這項紀錄能直接回到 web-infra-dev/modern.js 的專案語境，也能指出 README 沒有回答的問題。
modern.js｜快速開始指引放在外部頁面 · web-infra-dev-modern-js-deep-analysis
README 的 Getting Started 部分只有一句话 'See Quick Start'，并链接到 Modern.js 網站上的 Quick Start 頁面；主頁是 modernjs.dev。顶部的 npm 徽章指向 @modern-js/core 并显示版本和下载量，但 README 正文没有给出任何安装命令、脚手架命令或最小示例。README 還提供英文和简體中文两種版本，简中版在倉庫中对應 README.zh-CN.md。包管理器、Node.js 版本要求和開發服務器啟動方式都没有在 README 中说明，需要到快速開始指南或已發布的包文檔中确認。
第 2 節的核對點要落在 web-infra-dev/modern.js README 明確列出的命令、檔案或設定，而不是抽象功能名稱。請以 modern.js 的實際輸入與輸出記錄一次成功和一次失敗，保留錯誤文字、退出碼與產物位置；素材沒有說明的相容性、容量或安全承諾，本文維持文件未說明。
針對第 2 節，先確認 modern.js 的執行前置條件，再觀察它如何處理輸入、產生結果，以及遇到錯誤時留下什麼訊號。若涉及網路、權限、資料庫、瀏覽器或虛擬化環境，應把該依賴單獨記錄，不能從一次成功執行推定所有部署都相同。將測試放在隔離工作區，保存使用的版本與設定檔，之後再以同一個案例比較變更前後的行為。這項紀錄能直接回到 web-infra-dev/modern.js 的專案語境，也能指出 README 沒有回答的問題。
modern.js｜生态系统中的四個相關项目 · web-infra-dev-modern-js-deep-analysis
README 的 Ecosystem 部分列出四個相邻项目，并分別给出 GitHub 链接。Rspack 被描述為基于 Rust 的快速 Web 打包器；Rsbuild 是 Rspack 之上的 Web 構建工具，由 Modern.js Builder 更名而来；Rspress 是基于 Rspack 的快速静态站点生成器；Rslib 是基于 Rspack 的庫開發工具。這些链接都指向 web-infra-dev GitHub 组织下的倉庫，與 Modern.js 同属一個组织。四個项目的描述都以 Rspack 為基础，说明生态围绕 Rspack 構建。README 没有说明 Modern.js 運行時必须依赖其中哪一個，也没有说明這些项目之間如何做版本协調或發布同步。
第 3 節的核對點要落在 web-infra-dev/modern.js README 明確列出的命令、檔案或設定，而不是抽象功能名稱。請以 modern.js 的實際輸入與輸出記錄一次成功和一次失敗，保留錯誤文字、退出碼與產物位置；素材沒有說明的相容性、容量或安全承諾，本文維持文件未說明。
針對第 3 節，先確認 modern.js 的執行前置條件，再觀察它如何處理輸入、產生結果，以及遇到錯誤時留下什麼訊號。若涉及網路、權限、資料庫、瀏覽器或虛擬化環境，應把該依賴單獨記錄，不能從一次成功執行推定所有部署都相同。將測試放在隔離工作區，保存使用的版本與設定檔，之後再以同一個案例比較變更前後的行為。這項紀錄能直接回到 web-infra-dev/modern.js 的專案語境，也能指出 README 沒有回答的問題。
modern.js｜公開的基准测試與路線图 · web-infra-dev-modern-js-deep-analysis
项目維护一個公開的 Modern.js Benchmark 站点，地址為 web-infra-qos.pages.dev，用来观察打包體积、编译速度和安装體积等關键指標的趋势。README 没有给出当前的具體數值、测試方法、基准運行频率或历史數據，也没有说明這些指標如何計算。路線图放在 GitHub issue 4741 中，README 称會定期更新，但未列出任何里程碑日期、目標版本或具體功能项。想了解路線图细节只能訪問該 issue。
第 4 節的核對點要落在 web-infra-dev/modern.js README 明確列出的命令、檔案或設定，而不是抽象功能名稱。請以 modern.js 的實際輸入與輸出記錄一次成功和一次失敗，保留錯誤文字、退出碼與產物位置；素材沒有說明的相容性、容量或安全承諾，本文維持文件未說明。
針對第 4 節，先確認 modern.js 的執行前置條件，再觀察它如何處理輸入、產生結果，以及遇到錯誤時留下什麼訊號。若涉及網路、權限、資料庫、瀏覽器或虛擬化環境，應把該依賴單獨記錄，不能從一次成功執行推定所有部署都相同。將測試放在隔離工作區，保存使用的版本與設定檔，之後再以同一個案例比較變更前後的行為。這項紀錄能直接回到 web-infra-dev/modern.js 的專案語境，也能指出 README 沒有回答的問題。
modern.js｜示例、贡献與社区链接 · web-infra-dev-modern-js-deep-analysis
Modern.js 提供一個示例集合，放在单独的 modern-js-examples 倉庫中，README 称這些示例是現成可用的。贡献方面，README 链接到 CONTRIBUTING.md，并写明欢迎新贡献者；项目還采用了 Bytedance Open Source Code of Conduct，倉庫內包含 CODE_OF_CONDUCT.md。README 嵌入了一张来自 opencollective 的贡献者图片，并提供 Discord 邀请链接，称團隊和用戶會在那里交流。Discord 邀请链接是唯一列出的即時通讯渠道。README 没有描述贡献流程、響應時間、issue 處理策略或 Discord 的管理规则。
第 5 節的核對點要落在 web-infra-dev/modern.js README 明確列出的命令、檔案或設定，而不是抽象功能名稱。請以 modern.js 的實際輸入與輸出記錄一次成功和一次失敗，保留錯誤文字、退出碼與產物位置；素材沒有說明的相容性、容量或安全承諾，本文維持文件未說明。
針對第 5 節，先確認 modern.js 的執行前置條件，再觀察它如何處理輸入、產生結果，以及遇到錯誤時留下什麼訊號。若涉及網路、權限、資料庫、瀏覽器或虛擬化環境，應把該依賴單獨記錄，不能從一次成功執行推定所有部署都相同。將測試放在隔離工作區，保存使用的版本與設定檔，之後再以同一個案例比較變更前後的行為。這項紀錄能直接回到 web-infra-dev/modern.js 的專案語境，也能指出 README 沒有回答的問題。
modern.js｜致谢與 MIT 許可證 · web-infra-dev-modern-js-deep-analysis
README 的 Credits 部分说明部分實現修改自其他项目，包括 create-react-app、remix、jest 和 bundle-require，并具體列出：@modern-js/bundle-require 修改自 bundle-require，@modern-js/plugin 的 hooks API 參考了 farrow-pipeline，@modern-js/plugin-data-loader 部分代码參考了 remix，@modern-js/babel-plugin-module-resolver 修改自 babel-plugin-module-resolver。Netlify 被感谢用于托管網站。项目采用 MIT 許可證，版權声明為 2021-present Modern.js；MIT 文本允許使用、復製、修改、合并、發布、分發、再許可和销售副本，并声明軟件按原樣提供，不附带任何担保。第三方的許可證列在 THIRD-PARTY-LICENSE 中。README 没有涉及安全支持、維护承诺或版本兼容性。
第 6 節的核對點要落在 web-infra-dev/modern.js README 明確列出的命令、檔案或設定，而不是抽象功能名稱。請以 modern.js 的實際輸入與輸出記錄一次成功和一次失敗，保留錯誤文字、退出碼與產物位置；素材沒有說明的相容性、容量或安全承諾，本文維持文件未說明。
針對第 6 節，先確認 modern.js 的執行前置條件，再觀察它如何處理輸入、產生結果，以及遇到錯誤時留下什麼訊號。若涉及網路、權限、資料庫、瀏覽器或虛擬化環境，應把該依賴單獨記錄，不能從一次成功執行推定所有部署都相同。將測試放在隔離工作區，保存使用的版本與設定檔，之後再以同一個案例比較變更前後的行為。這項紀錄能直接回到 web-infra-dev/modern.js 的專案語境，也能指出 README 沒有回答的問題。
編輯結論
適合需要依 web-infra-dev/modern.js README 建立明確工作流程、並能承擔 MIT 授權與維運責任的團隊；不適合把專案描述當成完整保證的人。先用 modern.js 的最小命令或設定完成一次受控測試，核對輸入、輸出、錯誤和目標環境，再決定是否擴大採用。
社群筆記