Modern.js 9-10 月最新版本为 v1.21.0，本双月的主要更新有：

• 支持 pnpm v7：完成框架对 pnpm v7 的支持。
• 服务端增加 Typescript 作为 ts 文件编译器。

支持 pnpm v7​

Modern.js 框架完成了对 pnpm v7 的变更适配。

使用 npx @modern-js/create@modern-1 创建项目时会根据用户当前环境的 pnpm 版本进行安装依赖操作，并且在初始化项目中会在 .npmrc 中添加 strict-peer-dependencies=false 配置，避免安装时由于 peerDependencies 缺失导致安装依赖失败问题。 同时适配 release、deploy 命令对 pnpm v7 的支持。

pnpm v7 在命令传参方面姿势发生了变化，需注意：

在使用 pnpm 调用 package.json 中的命令时，如果需要传递参数至 pnpm，需要将参数放到命令前。

例如使用 pnpm --filter 参数执行 prepare 命令：

pnpm run --filter "./packages/**" prepare

如果需要传递参数至命令，需要将参数放到命令后。

例如，在如下 package.json 配置中：

{
  "scripts": {
    "command": "modern command"
  }
}

执行 command 命令时携带参数方式为：

pnpm run command --options

服务端增加 Typescript 作为 ts 文件编译器​

在 Modernjs 之前的版本中，我们为了保证前后端编译器的统一，使用了 Babel 作为前后端默认的编译器，并保持相同的编译逻辑，但随着使用的项目增多，我们发现在一些服务端常用的语法场景下，Babel 编译 ts 有一些问题。

因此，我们将服务端编译 ts 的编译器由 Babel 改为了 Typescript，在别名解析逻辑上与 Babel 版本保持一致，同样支持使用 tsconfig.json 或者插件设置别名。

在执行 build 命令时，已默认使用 Typescript 编译，并默认开启了类型校验，很多项目在9、10双月已经在使用。

执行 dev 命令时，如果希望使用 Typescript 编译，需要安装 ts-node，tsconfig-paths 到 devDependencies，否则默认仍然使用 Babel 编译。在 Modern.js 2.0 中，我们将使用 ts-node 作为默认的编译器。

其他更新​

配置更新​

• 支持在 tools.webpackChain 中获取 HtmlWebpackPlugin 对象，使用方式请参考文档。

底层依赖升级​

• husky 升级至 v8

使用 npx @modern-js/create@modern-1 创建项目时，husky 会默认安装 v8 版本，并移除 package.json 中 husky 的配置，使用 .husky 文件夹的形式管理 husky 配置。

在初次安装依赖时需要执行 npx husky install 进行 husky 初始化，默认项目会在 prepare 命令中完成，如果 husky 配置未生效，可通过手动执行完成 husky 配置。

功能预告​

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 7-8 月最新版本为 v1.17.0，本双月的主要更新有：

• 支持 React 18：完成框架和插件对 React 18 的适配。
• 包版本统一：Modern.js 所有组成包的版本号进行统一，提供升级命令。
• 模块工程支持 bundle 构建：模块工程类型的项目，支持对产物做 bundle 构建。
• Reduck v1.1：发布 Reduck v1.1，使用文档全面更新。

支持 React 18​

Modern.js 框架和相关插件完成对 React 18 的适配。现在，只需要将项目中的 react、react-dom 两个包的版本，升级到最新的 React 18 大版本，就可以使用 React 18 的新功能。

注意，使用 @modern-js/create 命令默认创建的项目，安装的依赖 react、react-dom 的版本仍然为 17，如果希望使用 React 18，请手动升级这两个包的版本。

另外，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 所有组成包的版本号是一一对应的。

我们提供了专门的升级工具： @modern-js/upgrade，可以自动升级 Modern.js 到当前的最新版本。使用方式为，在项目根路径下执行：

npx @modern-js/upgrade

模块工程支持 bundle 构建​

模块工程（ @modern-js/module-tools ）对底层实现进行重构，新增 output.buildConfig 配置，用于提供更加丰富的构建功能。

新的模块工程项目，不仅支持对产物做 bundless 构建，也支持 bundle 构建。通过配置 buildConfig 下的 buildType ，即可进行 bundle 构建：

// modern.config.ts
import { defineConfig } from '@modern-js/module-tools';

export default defineConfig({
  output: {
    buildConfig: {
      buildType: 'bundle',  // 采用 bundle 构建
    },
  },
});

buildConfig 下还支持 bundleOptions 配置，可以对构建行为做更多的自定义：如设置产物文件名、是否进行代码分片、设置代码压缩方式等。

Reduck v1.1​

Reduck 作为 Modern.js 的第一方状态管理方案，发布 v1.1 版本，增加对 React 18 Concurrent Rendering 的支持，并对开发体验和功能稳定性做了大量优化。

新增 API：

• useStore ：可以在组件内获取当前组件树共享的 Store，满足在组件外访问 Model 的场景需求。
• handleEffect：一个工具函数，可以极大地简化异步数据获取的逻辑代码。
• connect： HOC 风格的 API，用于访问 Model。

开发体验方面，优化 Reduck 组成包的组织结构，减少用户侧依赖数量，现在只需要引入 @modern-js-reduck/react 一个包（Modern.js 中 Reduck 功能已内置，无需手动引入包）；优化 API 的 TS 类型定义，改进类型信息的自动推导，整体达到 TS 支持开箱即用。

此外，对 Reduck 使用文档 和 API 文档 做了全面更新，提供了更加丰富和详尽的内容。

其他更新​

命令和配置​

新增命令

• upgrade：自动升级 Modern.js 版本。功能同执行 npx @modern-js/upgrade 命令。
• inspect：通过该命令可以输出当前项目使用的完整 webpack 配置。
• gen-release-note：自动根据当前仓库的 changesets 信息生成发布日志。此外，我们提供了包版本管理专题文档，方便大家更好的认识和使用 changesets 及相关功能。

新增配置

• source.preEntry：用于配置全局脚本，这段脚本会早于页面的代码执行。

BFF​

• 新增 afterLambdaRegisted hook。用于使用 Express 框架时，在 BFF 函数注册路由之后执行。可以用来添加错误处理逻辑，新增路由等。
• 优化使用 Express 框架开发场景下的热更新性能。在比较大的项目中，BFF 函数更改，热更新也可以在几十毫秒内完成。

SSR​

• SSR 产物添加 Sourcemap，优化服务端调试 SSR 代码的体验。

Web Server​

• 支持按入口设置响应头，使用方式请参考文档。