Skip to content

Commit 15e08a2

Browse files
committed
docs: add some break change docs
1 parent f8b90e8 commit 15e08a2

File tree

9 files changed

+633
-41
lines changed

9 files changed

+633
-41
lines changed

custom-server.md

Lines changed: 473 additions & 0 deletions
Large diffs are not rendered by default.

packages/document/docs/en/guides/_meta.json

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,5 @@
2828
"type": "dir",
2929
"name": "troubleshooting",
3030
"label": "troubleshooting"
31-
},
32-
"deprecated"
31+
}
3332
]

packages/document/docs/en/guides/deprecated.md

Lines changed: 0 additions & 17 deletions
This file was deleted.

packages/document/docs/zh/guides/_meta.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@
2929
"name": "troubleshooting",
3030
"label": "troubleshooting"
3131
},
32-
"deprecated",
3332
{
3433
"type": "dir",
3534
"name": "upgrade",

packages/document/docs/zh/guides/deprecated.md

Lines changed: 0 additions & 19 deletions
This file was deleted.
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
["overview", "config", "entry"]
1+
["overview", "config", "entry", "web-server", "other"]

packages/document/docs/zh/guides/upgrade/config.mdx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -389,6 +389,12 @@ resolve: {
389389

390390
**变更内容**: 该配置已废弃,直接移除。
391391

392+
393+
### source.disableEntryDirs
394+
395+
**变更内容**: 该配置已废弃,直接移除。
396+
397+
392398
## tools
393399

394400
### tools.esbuild
@@ -502,7 +508,7 @@ dev: {
502508

503509
// 改动后
504510
server: {
505-
port: process.env.NODE_ENV === 'development' && 8080
511+
port: process.env.NODE_ENV === 'development' ? 8080 : undefined
506512
}
507513
```
508514

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
# 其他重要变更
2+
3+
本篇文档介绍从 Modern.js 2.0 升级到 3.0 时,其他重要的不兼容变更以及相关的迁移说明。
4+
5+
## 不再支持 webpack 构建
6+
7+
Modern.js 3.0 不再支持使用 webpack 作为构建工具,默认使用 Rspack 作为构建 bundler。Rspack 基于 Rust 实现,构建速度相比 webpack 有显著提升,同时与 webpack 配置高度兼容,大部分配置可以直接迁移。
8+
9+
如果你的项目之前使用了 webpack 特定的配置或插件,需要检查项目中是否有 webpack 相关的自定义配置,并确认使用的 webpack 插件是否有 Rspack 对应版本。
10+
11+
:::tip
12+
Rspack 与 webpack 配置高度兼容,大部分情况下无需修改即可使用。
13+
:::
14+
15+
## 入口名称变化
16+
17+
Modern.js 3.0 将项目默认入口名称改为 `index`,默认构建出的 HTML 文件为 `index.html``index.html` 是大多数 Web 服务器的默认首页文件,无需额外配置。
18+
19+
如果你的项目部署配置中指定了特定的入口文件名,需要更新为 `index.html`
20+
21+
## 别名改动
22+
23+
Modern.js 3.0 对部分运行时路径别名进行了调整,需要更新相关的导入路径。路径映射对照如下:
24+
25+
| 旧版路径 | 新版路径 | 说明 |
26+
|---------|---------|------|
27+
| `@modern-js/runtime/bff` | `@modern-js/plugin-bff/runtime` | BFF 运行时路径 |
28+
| `@modern-js/runtime/server` | `@modern-js/server-runtime` | 服务端运行时路径 |
29+
30+
## 不再支持 pages 目录的约定式路由
31+
32+
Modern.js 3.0 不再支持 Modern.js 1.0 版本引入的 `pages` 目录的约定式路由,统一使用 `routes` 目录的约定式路由。
33+
34+
如果你的项目使用了 `pages` 目录,需要将 `src/pages` 目录重命名为 `src/routes`,并更新项目中所有引用 `pages` 目录的导入路径。详细迁移步骤请参考 [约定式路由文档](/guides/basic-features/routes/routes)
35+
36+
## 使用 React Router v7
37+
38+
Modern.js 3.0 默认使用 React Router v7 作为路由库。React Router v7 相比 v6 只有少量的 [不兼容变更](https://reactrouter.com/upgrading/v6)
39+
40+
如果需要使用 React Router v5 或 React Router v6,需要使用**自控式路由**模式。自控式路由允许你完全控制路由配置,不受 Modern.js 约定式路由的限制。
41+
42+
## 使用 @modern-js/create 创建 Monorepo
43+
44+
Modern.js 之前提供的 Monorepo 方案是基于 [pnpm Workspace](https://pnpm.io/workspaces) 实现的,并未提供实质性的 Monorepo 管理能力。在 [v2.53.0](https://github.com/web-infra-dev/modern.js/releases/tag/v2.53.0) 版本中,移除了使用 `@modern-js/create` 创建 Monorepo 项目的功能。推荐直接使用社区提供的 Monorepo 方案。
45+
46+
## new 命令开启 test 能力
47+
48+
Modern.js 之前提供的测试能力是基于 Jest 的简单封装。该封装导致 Jest 配置不直观、用户配置更加复杂等问题。在 [v2.53.0](https://github.com/web-infra-dev/modern.js/releases/tag/v2.53.0) 版本中,移除了在应用项目和模块项目中开启 test 功能的选项。推荐直接使用社区提供的测试方案。
49+
50+
## Eslint 规则集
51+
52+
Modern.js 之前提供了 ESLint 的完整规则集,涵盖了 @modern-js(针对 Node.js 项目的 Lint 规则)和 @modern-js-app(针对前端项目的 Lint 规则)。在 [v2.60.0](https://github.com/web-infra-dev/modern.js/releases/tag/v2.60.0) 版本中,我们正式移除了这些规则集。我们鼓励开发者根据自身需求选择合适的代码规范工具,直接使用 ESLint 并结合社区推荐的规则,或使用 Biome 以提升代码格式化的性能。
53+
54+
55+
56+
57+
58+
Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
# 自定义 Web Server 变化
2+
3+
本章节覆盖两类旧版自定义 Server API 的升级
4+
5+
- **unstableMiddleware**
6+
- **Hook**
7+
8+
这两种写法在旧版中互斥,迁移时请根据项目实际使用的能力选择对应路径。
9+
10+
11+
## unstableMiddleware
12+
13+
### 核心差异
14+
15+
- **文件结构**`server/index.ts``server/modern.server.ts`
16+
- **导出方式**`unstableMiddleware` 数组 → `defineServerConfig`
17+
- **Context API**:Modern.js Server Context → Hono Context(`c.req`/`c.res`
18+
- **中间件执行**:旧版可不调用 `next()`,新版必须调用后续链路才会执行
19+
- **响应方式**`c.response.raw()``c.text()` / `c.json()`
20+
21+
### 文件与导出
22+
23+
```typescript
24+
// 旧版 - server/index.ts
25+
export const unstableMiddleware: UnstableMiddleware[] = [middleware1, middleware2];
26+
27+
// 新版 - server/modern.server.ts
28+
import { defineServerConfig } from '@modern-js/server-runtime';
29+
30+
export default defineServerConfig({
31+
middlewares: [
32+
{ name: 'middleware1', handler: middleware1 },
33+
{ name: 'middleware2', handler: middleware2 },
34+
],
35+
});
36+
```
37+
38+
### 类型与 next 调用
39+
40+
```typescript
41+
// 旧版
42+
import type { UnstableMiddleware, UnstableMiddlewareContext } from '@modern-js/server-runtime';
43+
const middleware: UnstableMiddleware = async (c: UnstableMiddlewareContext, next) => {
44+
return c.response.raw('response'); // 不调用 next 也会继续渲染
45+
};
46+
47+
// 新版
48+
import { defineServerConfig, type MiddlewareHandler } from '@modern-js/server-runtime';
49+
const middleware: MiddlewareHandler = async (c, next) => {
50+
await next(); // 必须调用
51+
return c.text('response');
52+
};
53+
```
54+
55+
### Context API 对照
56+
57+
| 旧版 API | 新版 API | 说明 |
58+
| -------------------- | ---------------------- | ------------- |
59+
| `c.request.cookie` | `getCookie(c, 'key')` | Cookie 读取 |
60+
| `c.req.cookie()` | `getCookie(c, 'key')` | Hono v4 已废弃 |
61+
| `c.request.pathname` | `c.req.path` | 请求路径 |
62+
| `c.request.host` | `c.req.header('Host')` | 请求主机 |
63+
| `c.request.query` | `c.req.query()` | 查询参数 |
64+
| `c.request.headers` | `c.req.header()` | 请求头 |
65+
| `c.response.status` | `c.status()` | 响应状态码 |
66+
| `c.response.set` | `c.res.headers.set` | 设置响应头 |
67+
| `c.response.raw` | `c.text` / `c.json` | 响应体 |
68+
69+
70+
## afterRender Hook
71+
72+
`afterRender` 仅用于页面渲染完成后的 HTML 处理。
73+
74+
```typescript
75+
import { defineServerConfig, type MiddlewareHandler } from '@modern-js/server-runtime';
76+
77+
const renderMiddleware: MiddlewareHandler = async (c, next) => {
78+
await next(); // 先等待页面渲染
79+
const { res } = c;
80+
const html = await res.text();
81+
82+
const modified = html
83+
.replace('<head>', '<head><meta name="author" content="ByteDance">')
84+
.replace('<body>', '<body><div id="loading">Loading...</div>')
85+
.replace('</body>', '<script>console.log("Page loaded")</script></body>');
86+
87+
c.res = c.body(modified, { status: res.status, headers: res.headers });
88+
};
89+
90+
export default defineServerConfig({
91+
renderMiddlewares: [{ name: 'custom-content-injection', handler: renderMiddleware }],
92+
});
93+
```

0 commit comments

Comments
 (0)