Modern.js 2022 年 7~8 月版本更新深度解读：React 18 适配、包版本统一与 Module Bundle 构建-北京尧图网络

前端后端Web框架【免费下载链接】modern.jsA progressive web framework based on React and Rsbuild.项目地址https://gitcode.com/gh_mirrors/mo/modern.js点击查看免费下载本篇基于官方双月更新公告2022-0708-updates.md编写并结合当前仓库源码对各项能力的实现细节进行印证。Modern.js 在 2022 年 7~8 月双月发布了 v1.17.0核心变化包括框架与插件体系全面适配 React 18、所有组成包版本号统一并配套自动升级工具、Modern.js Module 引入基于output.buildConfig的 bundle 构建能力、第一方状态管理方案 Reduck 发布 v1.1。读完本文你将掌握 React 18 的升级路径、npx modern-js/upgrade的使用方法、Module 项目buildType配置的写法以及preEntry、inspect、afterLambdaRegisted、按入口设置响应头等新命令与配置的实战用法。版本总览Modern.js 7~8 月的最新版本为v1.17.0本双月的主要更新集中在四个方向支持 React 18完成框架和插件对 React 18 的适配包版本统一Modern.js 所有组成包的版本号进行统一并提供升级命令Modern.js Module 支持 bundle 构建Module 项目支持对产物做 bundle 构建Reduck v1.1发布 Reduck v1.1使用文档全面更新。以下各节将逐一展开并结合仓库源码说明其底层实现。支持 React 18Modern.js 框架和相关插件完成对 React 18 的适配。现在只需要将项目中的react、react-dom两个包的版本升级到最新的 React 18 大版本就可以使用 React 18 的新功能。从当前仓库的运行时实现看React 18 的适配深入到浏览器端渲染的底层packages/runtime/plugin-runtime/CHANGELOG.md记录了「浏览器运行时移除 React 17 支持并改为静态引入react-dom/client」的重构以及「移动解析 window ssr data 到createRoot方法」的调整。也就是说React 18 标志性的createRoot并发渲染入口已内建到 Modern.js 的运行时中react-dom/client的静态引入保证了createRoot(...).render(...)这一新 API 在框架生成代码中的稳定可用。需要特别注意的是使用modern-js/create命令默认创建的项目安装的依赖react、react-dom版本仍然为 17如果希望使用 React 18请手动升级这两个包的版本SSR 流式渲染功能在当时尚在开发中暂不支持。也就是说v1.17.0 的 React 18 支持主要体现在客户端渲染与常规 SSR 场景流式 SSR 需要等待后续版本。Modern.js 包版本统一与升级工具在此之前组成 Modern.js 的各个包的版本号并不统一Modern.js 自身的版本和这些包的版本缺少明确的对应关系。这不仅增加了官方维护成本也给用户的使用和升级带来了很多困扰。从v1.15.0版本开始Modern.js 自身的版本号和所有组成包的版本号进行了统一Modern.js v1.15.0 意味着所有组成包的版本号也是 v1.15.0。每次发布新版本Modern.js 所有包都会使用统一的版本号执行发布GitHub 仓库的 tag 编号与所有组成包的版本号一一对应。这种「单一版本号」策略让用户在升级时可以确信升级主框架版本即等同于升级其依赖的全部组成包无需再逐一核对各包的版本兼容矩阵。使用 modern-js/upgrade 自动升级官方提供了专门的升级工具modern-js/upgrade可以自动升级 Modern.js 到当前的最新版本。使用方式为在项目根路径下执行npx modern-js/upgrade从命令注册层面看upgrade被纳入 Modern.js CLI 的一等命令集合packages/solutions/app-tools/src/run/index.ts中的SUPPORT_CONFIG_PARAM_COMMANDS列表同时包含dev、build、start、serve、inspect、info与upgrade意味着upgrade命令同样支持通过--config/-c参数指定配置文件来运行行为与其余框架命令保持一致。Modern.js Module 支持 bundle 构建Modern.js Module 对底层实现进行重构新增output.buildConfig配置用于提供更加丰富的构建功能。新的 Modern.js Module 项目不仅支持对产物做bundless 构建也支持bundle 构建。通过配置buildConfig下的buildType即可进行 bundle 构建import { defineConfig } from modern-js/module-tools; export default defineConfig({ output: { buildConfig: { buildType: bundle, // 采用 bundle 构建 }, }, });buildConfig 的定制能力buildConfig下还支持bundleOptions配置可以对构建行为做更多的自定义例如设置产物文件名定制 bundle 产物的输出命名规则是否进行代码分片控制是否将公共依赖拆分为独立 chunk设置代码压缩方式选择产物压缩工具与压缩级别。对库开发者而言这一组合意味着同一个 Module 项目既能以 bundless 方式产出供源码级联调的多文件产物也能一键切换到 bundle 模式产出单文件、经过压缩的发布包从而兼顾「开发调试友好」与「发布体积可控」两种诉求。buildType: bundle与bundleOptions搭配使用即可在保持项目结构不变的前提下按需调整产物体积与形态。Reduck v1.1Reduck 作为 Modern.js 的第一方状态管理方案发布 v1.1 版本增加对React 18 Concurrent Rendering的支持并对开发体验和功能稳定性做了大量优化。新增 APIuseStore可以在组件内获取当前组件树共享的 Store满足在组件外访问 Model 的场景需求handleEffect一个工具函数可以极大地简化异步数据获取的逻辑代码connectHOC 风格的 API用于访问 Model。开发体验优化Reduck 优化了组成包的组织结构减少用户侧依赖数量现在只需要引入modern-js-reduck/react一个包在 Modern.js 中 Reduck 功能已内置无需手动引入包优化 API 的 TypeScript 类型定义改进类型信息的自动推导整体达到TS 支持开箱即用。此外Reduck 的使用文档与 API 文档都做了全面更新提供了更加丰富和详尽的内容。对于从 React 17 迁移到 React 18 的项目Reduck v1.1 对 Concurrent Rendering 的支持让状态更新可以更好地配合 React 18 的并发调度特性避免在并发模式下出现状态读取时序问题。其他更新命令和配置新增命令upgrade自动升级 Modern.js 版本功能同执行npx modern-js/upgrade命令inspect通过该命令可以输出当前项目使用的完整 rspack 配置。从源码实现看packages/solutions/app-tools/src/commands/inspect.ts该命令首先获取已初始化的appContext.builder然后调用builder.inspectConfig({ mode, verbose, outputPath, writeToDisk: true })并将归一化后的完整 Modern.js 配置以extraConfigs形式一并输出——也就是说inspect不仅能查看底层 rspack 配置还能同时看到框架最终生效的完整配置对象非常适合排查配置合并问题gen-release-note自动根据当前仓库的 changesets 信息生成发布日志。官方同时提供了包版本管理专题文档帮助开发者认识和使用 changesets 及相关功能。新增配置source.preEntry用于配置全局脚本这段脚本会早于页面的代码执行。在类型层面packages/solutions/app-tools/src/types/config/source.tspreEntry的类型为string | string[]默认值为[]注释明确说明其作用是在每个页面入口之前加入代码、先于页面代码执行可用于注入 polyfill、设置全局样式等。在实现层面packages/runtime/plugin-runtime/src/cli/code.ts框架会通过normalizePreEntry将配置统一归一化为字符串数组再通过resolvePreEntryImportPath把相对路径解析为绝对路径若路径位于src目录内还会优先转换为内部src别名以保持导入简短稳定。最终在生成入口文件index.jsx时将import ...语句注入到真实入口代码之前从而保证 preEntry 脚本一定先于页面逻辑执行。该文档的详细说明见 pre-entry.mdx。BFF新增afterLambdaRegistedhook用于使用 Express 框架时在 BFF 函数注册路由之后执行。可用来添加错误处理逻辑、新增路由等优化使用 Express 框架开发场景下的热更新性能。在比较大的项目中BFF 函数更改热更新也可以在几十毫秒内完成。SSRSSR 产物添加 Sourcemap优化服务端调试 SSR 代码的体验。启用后服务端渲染代码出现异常时可以直接映射回 TypeScript/JSX 源码定位问题而不再面对压缩混淆后的产物堆栈。Web Server支持按入口设置响应头。在 server.routes 中通过配置入口的resHeaders即可为指定页面入口定制响应头例如export default defineConfig({ server: { routes: { page-a: { route: [/a, /b], resHeaders: { x-modern-test: 1, }, }, }, }, });该配置在生产与开发环境均生效也可以根据NODE_ENV区分环境设置不同的响应头若只需要在开发环境设置响应头官方建议改用tools.devServer.headers。小结v1.17.0 作为 2022 年 7~8 月的双月版本为 Modern.js 的后续演进奠定了三个关键基础React 18 的运行时适配以静态引入react-dom/client与createRoot重构为标志、统一版本号的发布与升级体系modern-js/upgrade一键升级、以及Module 工具链的 bundle 构建能力output.buildConfig/buildType/bundleOptions。配合inspect、gen-release-note、source.preEntry、afterLambdaRegisted、按入口响应头等新命令与配置这一版本同时改善了框架自身的可维护性和终端用户的应用开发、调试与发布体验。赞分享前端后端Web框架【免费下载链接】modern.jsA progressive web framework based on React and Rsbuild.项目地址https://gitcode.com/gh_mirrors/mo/modern.js点击查看免费下载相关推荐Modern.js v1.17.0 双月更新解读React 18 适配、包版本统一与 Module bundle 构建Modern.js v1.17.0 双月更新解读React 18 适配、包版本统一与 Module bundle 构建本文基于 Modern.js 官方社区前端后端Web框架Apollo-2B部署指南从本地推理到云端服务的完整解决方案Apollo 2B部署指南从本地推理到云端服务的完整解决方案 Apollo 2B是一款轻量级多语言医疗大语言模型专为医学领域设计支持英语、中文、法语、西班VS Code 1.352019 年 5 月版本更新深度解读编辑器导航、TypeScript 重构与扩展开发新能力VS Code 1.352019 年 5 月版本更新深度解读编辑器导航、TypeScript 重构与扩展开发新能力本指南以 Visual Studio文档教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

Modern.js 2022 年 7~8 月版本更新深度解读：React 18 适配、包版本统一与 Module Bundle 构建

相关推荐

Python爬虫批量下载巨潮资讯年报：接口分析与脚本实战

从NIO到Netty：Java网络编程为何选择框架而非原生API

SpringBoot+Vue+MyBatis助农平台：从业务设计到部署上线

更多资讯

NPDP BoK第2版深度拆解：七大知识域与产品创新落地实践

陆基导弹打航母分段轨道建模：从参数方程到MATLAB实现

Litellm实战：统一大模型API网关，解决多服务商接入与成本管控难题

Agent-Skills实战：从工具函数到技能封装，打造真正会干活的智能体

数字经济与实体经济深度融合：从商业模式创新到数字化转型落地路径

PSO有约束优化：粒子群算法处理工程限制条件寻优实战

今日更新

声子晶体仿真：三角晶格与六角晶格的能带计算实战

度假村安保定岗定编：岗位梳理、编制测算与排班设计

COMSOL等离子体模块实战：氩气双层DBD仿真建模全解析

本周精选

交通拥堵预测毕设：基于Python+LSTM的车辆流量预测系统全流程解析

MATLAB/Simulink搭建10机39节点电力系统暂态稳定仿真实战

无人机航拍三维重建全流程：从SfM到网格生成的避坑指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？