Modern.js v2 正式发布
好消息，2023年3月16号字节跳动 Web Infra 团队宣布 Modern.js v2 正式发布。字节跳动Web Infra 团队从2021年10月27号发起 Modern.js 正式开源起，距离现在开发维护迭代已经505天时间。Web Infra 团队 神一般的存在，非常了不起，也是咱们国人自主研发的Web 框架，也是国人的骄傲，好框架必须分享给大家。下面给大家详细介绍 Modern.js 和 v2 版本更新内容。在这篇文章里，我们会和大家一起聊一聊 Modern.js 在过去一年多时间里的变化。
全文大纲
- Modern.js 介绍
- Modern.js 三个解决方案
- 回顾2022 Modern.js 更新内容
- Modern.js v2 正式发布更新内容
Modern.js 介绍
官网：https://modernjs.dev/
Github：https://github.com/web-infra-dev/modern.js
Modem.js 的由来
不知道关注小编的粉丝们，还记得2021年10 月 27 日举办的稀土开发者大会上，字节跳动 Web Infra 正式发起 Modern.js 开源项目，希望推动现代 Web 开发范式的普及，发展完整的现代 Web 工程体系，突破应用开发效率的瓶颈。
传统的 Web 开发是“服务器端为中心”的开发范式，近年来，已经越来越多的转移到“客户端为中心”的现代 Web 开发范式，开发门槛不断降低，效率不断提升。产品研发可以更少的关注底层技术细节，更专注在用户需求和市场价值上。而传统的前端技术栈难以解决“开发者体验”和“用户体验”的矛盾，越来越成为提效的瓶颈。
字节跳动 Web Infra 一直在字节内部支持 “现代 Web 开发” 的实践，发展了完整的字节前端研发体系，Modern.js 项目就是来自其中的现代 Web 工程体系。
Modern.js 将以往海量的前端工程模板，收敛成三大工程类型：应用、模块、Monorepo，每种类型都只需要同一套模板、同一套工程方案。其中“应用”工程方案又被称作 “MWA”（现代 Web 应用），基于一套客户端为中心、前后端一体化的应用开发框架，实现了强大的 “Universal App” 模式。即一套应用源代码，能同时在客户端、服务器端、编译时里运行，能以静态 Web（SPA、MPA、SSG）、动态 Web（SSR、SPR）、微前端、桌面应用、小程序等不同模式运行，同时支持低门槛、全功能、一体化的 BFF （针对特定界面的服务器端 API）开发。
“MWA” 是 Serverless 优先的，内置产品级 Web Server。它能在开发、调试、部署、运行等所有环节做到尽可能“无服务器化”，同时确保“开发者体验”和“用户体验”，让更多“前端开发者”成为独立、全面的“应用开发者”和“产品开发者”。Modern.js 也原生支持微前端、Electron 桌面应用、Monorepo 等研发场景。
Modern.js 从最初就设计为 ESM 优先，在“编译时”环节能更好的支持 Unbundled 开发、非 JS 语言的编译器等第三代 JS 工具的发展。在“运行时”环节，Modern.js 提供开箱即用的应用架构，提供在“应用”工程方案、“模块”工程方案里都能无缝使用的 Runtime API 标准库。在“编写时”环节，Modern.js 鼓励尽可能让机器来生成源码的智能编程。字节跳动 Web Infra 负责人表示：“希望 Modern.js 项目能帮助业界更快更好的发展基于前端技术的成熟 GUI 应用软件研发体系，让前端技术栈的开发者们能够‘责任越大，能力越强’。”
Modern.js 是字节跳动 Web 工程体系的开源版本，它提供多个解决方案，来帮助开发者解决不同研发场景下的问题。
生态
Modern.js 生态提供了以下解决方案：
- Rspack: 基于 Rust 的高性能模块打包工具。Rspack 详细介绍请见：Rspack v0.1.0 正式发布
- Garfish: 一站式微前端解决方案。
- Reduck: 基于 Redux 的状态管理库。
Modern.js 官网
Modern.js 四个解决方案
作为 Modern.js 工程体系的一部分，以上每个解决方案都可以被单独使用，并且各自部署了独立的文档站点。开发者可以按需选择其中的一个或多个解决方案来使用。
Modern.js 是一个 Web 工程体系，包含以下解决方案：
- Modern.js Framework: 基于 React 的渐进式 Web 开发框架。
- Modern.js Module: 简单、高性能的 npm 包开发方案。
- Modern.js Doc: 现代文档站解决方案。
- Modern.js Builder: 面向 Web 开发场景的构建引擎。
快速上手
- 使用 Modern.js Framework 来开发一个 Web 应用。
- 使用 Modern.js Module 来开发一个 npm 包。
- 使用 Modern.js Doc 来开发一个文档站点。
- 使用 Modern.js Builder 来为你的 Web 框架提供构建能力。
Modern.js 框架
- 开箱即用的双构建工具支持：Webpack、Rspack(已支持在 Rspack 模式下使用框架的 70% 功能和配置项，几分钟即可平滑迁移)
- 渐进式设计：可以通过 modern new 按需开启功能，支持不同规模项目开发诉求
- 插件系统：包括 CLI 插件、Server 插件、Runtime 插件
- 嵌套路由：基于 React Router v6，进行了资源加载、共享布局和数据获取方面的优化
- 支持流式渲染（Streaming SSR ）
如下图：
Modern.js 框架 详细介绍
Modern.js Module
- 构建：基于 esbuild + swc，并扩展插件机制。支持 bundle/bundleless，支持对类型文件的 bundle 处理和文件里的别名处理
- 调试：基于 Storybook
- 测试：集成 Jest
- 版本管理：基于 Changeset
- 扩展能力：包含丰富 Hooks 的插件机制，支持扩展调试能力
如下图：
Modern.js Module Tools 模块工具解决方案
Modern.js Doc
- 基于 Rspack 构建
- 支持 MDX
- 全文搜索：基于 FlexSearch
- 国际化
- 自定义主题
- 插件机制
如下图：
Modern.js Builder
- Rust 构建：轻松切换到 Rspack 构建工具，编译飞快。
- 深度优化：自动优化静态资源，产物性能有保障。
- 开箱即用：基于字节跳动数千个应用的实践经验，各种能力开箱即用。
- 易于配置：以零配置启动，然后一切皆可配置。
- 可插拔：自带轻量级插件系统，满足你的定制诉求。
- 多种产物：支持构建出运行在 Node.js、Web Worker 等环境的产物。
如下图：
回顾2022更新内容
2022 年 7 ~ 8 月更新内容：
Modern.js 7 ~ 8 月的最新版本为 v1.17.0，本双月的主要更新有：
- 支持 React 18：完成框架和插件对 React 18 的适配。
- 包版本统一：Modern.js 所有组成包的版本号进行统一，提供升级命令。
- 模块工程支持 bundle 构建：模块工程类型的项目，支持对产物做 bundle 构建。
- Reduck v1.1：发布 Reduck v1.1，使用文档全面更新。
- 其他更新：新增命令和配置、新增 afterLambdaRegisted hook。用于使用 Express 框架时，在 BFF 函数注册路由之后执行。可以用来添加错误处理逻辑，新增路由等。SSR 产物添加 Sourcemap，优化服务端调试 SSR 代码的体验。Web Server 支持按入口设置响应头，使用方式请参考文档。
2022 年 9 ~ 10 月更新内容：
Modern.js 9 ~ 10 月的最新版本为 v1.21.0，本双月的主要更新有：
- 支持 pnpm v7：完成框架对 pnpm v7 的支持。
- 服务端增加 Typescript 作为 ts 文件编译器。
- 其他更新：配置更新、底层依赖升级、
功能预告
Modern.js 团队目前除了正常开发维护 Modern 1.0 外，正在全力打造 Modern.js 2.0。
Modern.js 2.0 将带来新的构建体系，除了支持使用稳定的 webpack 进行构建，还即将支持将底层构建工具切换为自研的 Rust bundler，提供更流畅的编译速度。
Modern.js 2.0 将基于 React-Router v6 推荐嵌套路由作为新的路由方式；将默认支持 React 18 并提供 Streaming SSR 的支持，使用户体验更加流畅。
Modern.js v2 正式发布更新内容：支持 Rspack 构建
不认识 Rspack 是基于rust 研发的打包工具，请详见：Rspack v0.1.0 正式发布
Modern.js 是字节跳动 Web Infra 团队开源的一套 Web 工程体系。在开源以来的一年多时间里，Modern.js 保持稳定的迭代节奏，数十位贡献者参与了开发，累计提交 2000+ 个 Pull Request，并支持了 Rspack 构建、嵌套路由、流式渲染等新特性。
背景
首先介绍一下我们为什么要做 Modern.js v2 版本，主要有以下几个原因：
- 下沉更多能力：在字节跳动内部，Web Infra 团队整合了多个 Web 开发框架和解决方案，收敛技术栈，将通用能力下沉到底层的 Modern.js 工程体系中。
- 拥抱 Rust 生态：随着社区中更多的前端工具链基于 Rust 重写，Modern.js 正在积极拥抱这一变化，将底层工具逐步替换为 Rust 实现。
- 底层依赖升级：为了对 Modern.js 的底层依赖进行大版本升级，包括 React v18、React Router v6 等，从而引入流式渲染、嵌套路由等新能力。
- 定位调整：从 2021 年开源以来，社区中的伙伴们给予我们很多有价值的反馈，这帮助我们对 Modern.js 的定位和架构进行更多地思考。
以上因素促使我们完成了 Modern.js v2 版本。
定位
在 v2 版本中，我们重新明确了 Modern.js 的定位：Modern.js 是字节跳动 Web 工程体系的开源版本，它提供多个解决方案，来帮助开发者解决不同研发场景下的问题。
Modern.js 解决方案
作为 Modern.js 工程体系的一部分，以上每个解决方案都可以被单独使用，并且各自部署了独立的文档站点。开发者可以按需选择其中的一个或多个解决方案来使用。
在代码层面，这三个解决方案按照统一的研发规范迭代，并复用同一套插件机制，因此，它们提供的研发体验也较为一致。大家如果对内部实现感兴趣，可以在 GitHub 上的 Modern.js 仓库 中找到它们的源代码。
Rspack 构建模式
Modern.js v2 提供开箱即用的双构建工具支持，开发者可以在成熟的 Webpack 和更快的 Rspack 之间进行切换。大家对 Rspack 可能还不太了解，Rspack 是由字节跳动开源的 Web 构建工具，基于 Rust 语言开发，具有高性能、可定制、兼容 Webpack 生态等特性。
Rspack Logo
相较于 Webpack，Rspack 的构建性能有明显提升，除了 Rust 带来的语言优势，这也来自于它的并行架构和增量编译等特性。经过 benchmark 验证，Rspack 可以给 Modern.js 项目带来 5 ～ 10 倍编译性能的提升。
Rspack Benchmark
Modern.js 已支持在 Rspack 模式下使用框架的 70% 功能和配置项，包括服务器端渲染（SSR），静态站点生成（SSG）、嵌套路由、CSS Modules 和 Tailwind CSS 等功能。除了功能，Modern.js 在 Rspack 模式下的配置项也与 Webpack 模式基本一致，在我们的实际验证中，一个小型项目花几分钟就可以平滑切换到 Rspack 模式。
目前，Rspack 项目以及 Modern.js 的 Rspack 模式仍在快速迭代中。在未来几个月内，我们将逐步对齐 Webpack 模式和 Rspack 模式的绝大多数功能和配置，使更多项目能从 Webpack 平滑地过渡到 Rspack。
今天针对Modern.js v2 正式发布 就详细介绍到这里。
最后
一台电脑,一个键盘,尽情挥洒智慧的人生;几行数字,几个字母,认真编写生活的美好;
一 个灵感,一段程序,推动科技进步,促进社会发展。
创作不易，喜欢的老铁们加个关注，点个赞，打个赏，后面会不定期更新干货和技术相关的资讯，速速收藏，谢谢！你们的一个小小举动就是对小编的认可，更是创作的动力。
