@bleedingdev/modern-js-main-doc 3.2.0-ultramodern.120 → 3.2.0-ultramodern.121
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/en/apis/app/commands.mdx +59 -69
- package/docs/en/community/blog/v2-release-note.mdx +5 -5
- package/docs/en/community/blog/v3-release-note.mdx +1 -1
- package/docs/en/community/releases.mdx +1 -5
- package/docs/en/components/build-output.mdx +1 -1
- package/docs/en/components/debug-app.mdx +1 -1
- package/docs/en/components/deploy-command.mdx +3 -3
- package/docs/en/components/init-app.mdx +4 -0
- package/docs/en/components/serve-command.mdx +3 -3
- package/docs/en/configure/app/bff/effect.mdx +27 -3
- package/docs/en/configure/app/performance/rsdoctor.mdx +7 -4
- package/docs/en/configure/app/usage.mdx +6 -6
- package/docs/en/guides/advanced-features/bff/data-platform.mdx +3 -1
- package/docs/en/guides/advanced-features/bff/frameworks.mdx +3 -1
- package/docs/en/guides/advanced-features/international/api.mdx +1 -1
- package/docs/en/guides/advanced-features/international/configuration.mdx +1 -1
- package/docs/en/guides/advanced-features/international/locale-detection.mdx +1 -1
- package/docs/en/guides/advanced-features/international/routing.mdx +5 -3
- package/docs/en/guides/basic-features/debug/rsdoctor.mdx +2 -3
- package/docs/en/guides/basic-features/debug/using-storybook.mdx +1 -1
- package/docs/en/guides/basic-features/deploy.mdx +14 -14
- package/docs/en/guides/basic-features/env-vars.mdx +2 -2
- package/docs/en/guides/basic-features/render/_meta.json +1 -10
- package/docs/en/guides/basic-features/render/overview.mdx +0 -1
- package/docs/en/guides/basic-features/render/rsc.mdx +0 -1
- package/docs/en/guides/basic-features/routes/config-routes.mdx +2 -2
- package/docs/en/guides/basic-features/routes/routes.mdx +7 -7
- package/docs/en/guides/concept/server.mdx +2 -2
- package/docs/en/guides/get-started/quick-start.mdx +1 -1
- package/docs/en/guides/get-started/ultramodern.mdx +10 -4
- package/docs/en/guides/topic-detail/module-federation/application.mdx +1 -1
- package/docs/en/guides/topic-detail/module-federation/deploy.mdx +2 -2
- package/docs/en/guides/topic-detail/module-federation/usage.mdx +5 -5
- package/docs/en/guides/troubleshooting/builder.mdx +1 -1
- package/docs/en/guides/upgrade/config.mdx +1 -2
- package/docs/en/guides/upgrade/other.mdx +4 -4
- package/docs/zh/apis/app/commands.mdx +56 -66
- package/docs/zh/community/blog/v2-release-note.mdx +5 -5
- package/docs/zh/community/blog/v3-release-note.mdx +1 -1
- package/docs/zh/community/releases.mdx +1 -5
- package/docs/zh/components/build-output.mdx +1 -1
- package/docs/zh/components/debug-app.mdx +1 -1
- package/docs/zh/components/deploy-command.mdx +3 -3
- package/docs/zh/components/init-app.mdx +16 -47
- package/docs/zh/components/serve-command.mdx +3 -3
- package/docs/zh/configure/app/bff/effect.mdx +26 -2
- package/docs/zh/configure/app/performance/rsdoctor.mdx +7 -4
- package/docs/zh/configure/app/usage.mdx +6 -6
- package/docs/zh/guides/advanced-features/bff/data-platform.mdx +3 -1
- package/docs/zh/guides/advanced-features/bff/frameworks.mdx +3 -1
- package/docs/zh/guides/advanced-features/international/api.mdx +1 -1
- package/docs/zh/guides/advanced-features/international/configuration.mdx +1 -1
- package/docs/zh/guides/advanced-features/international/locale-detection.mdx +1 -1
- package/docs/zh/guides/advanced-features/international/routing.mdx +5 -3
- package/docs/zh/guides/basic-features/debug/rsdoctor.mdx +2 -3
- package/docs/zh/guides/basic-features/debug/using-storybook.mdx +1 -1
- package/docs/zh/guides/basic-features/deploy.mdx +13 -13
- package/docs/zh/guides/basic-features/env-vars.mdx +2 -2
- package/docs/zh/guides/basic-features/render/_meta.json +1 -10
- package/docs/zh/guides/basic-features/render/overview.mdx +0 -1
- package/docs/zh/guides/basic-features/render/rsc.mdx +0 -1
- package/docs/zh/guides/basic-features/routes/config-routes.mdx +2 -2
- package/docs/zh/guides/basic-features/routes/routes.mdx +7 -7
- package/docs/zh/guides/concept/server.mdx +2 -2
- package/docs/zh/guides/get-started/quick-start.mdx +1 -1
- package/docs/zh/guides/get-started/ultramodern.mdx +17 -22
- package/docs/zh/guides/topic-detail/module-federation/application.mdx +1 -1
- package/docs/zh/guides/topic-detail/module-federation/deploy.mdx +2 -2
- package/docs/zh/guides/topic-detail/module-federation/usage.mdx +5 -5
- package/docs/zh/guides/troubleshooting/builder.mdx +1 -1
- package/docs/zh/guides/upgrade/config.mdx +1 -2
- package/docs/zh/guides/upgrade/other.md +4 -4
- package/package.json +5 -4
- package/rspress.config.ts +17 -5
- package/src/components/Footer/index.tsx +3 -3
- package/src/components/SecondaryTitle/index.module.css +7 -2
- package/src/components/ShowcaseList/useShowcases.ts +23 -65
- package/src/i18n/enUS.ts +0 -9
- package/src/i18n/zhCN.ts +0 -9
- package/src/sandbox/csr-auth/src/routes/page-tsx.txt +1 -1
- package/static/img/logo.svg +7 -0
- package/static/img/social-card.svg +12 -0
- package/builder-doc/docs/en/config/performance/rsdoctor.md +0 -37
- package/builder-doc/docs/zh/config/performance/rsdoctor.md +0 -37
- package/docs/en/guides/basic-features/render/tanstack-rsc.mdx +0 -226
- package/docs/zh/guides/basic-features/render/tanstack-rsc.mdx +0 -226
- package/main-doc/docs/en/guides/get-started/ultramodern.mdx +0 -403
- package/main-doc/docs/zh/guides/get-started/ultramodern.mdx +0 -363
|
@@ -86,20 +86,20 @@ title: Modern.js v2 发布
|
|
|
86
86
|
|
|
87
87
|
大家对 Modern.js 框架的第一印象可能是「一个大而全的框架」,但事实上,为了避免变得臃肿,**Modern.js 采取了渐进式设计**,将所有功能建立在灵活的插件系统之上,因此具备按需启用和可插拔的能力。
|
|
88
88
|
|
|
89
|
-
Modern.js 期望能支持不同规模的项目研发,考虑到中大型项目和小型项目对功能的诉求存在差异,**Modern.js 的大多数功能都是按需启用的**。在创建项目时,Modern.js 默认只安装核心模块,使 npm 依赖保持轻量;当需要用到额外功能时,你可以通过
|
|
89
|
+
Modern.js 期望能支持不同规模的项目研发,考虑到中大型项目和小型项目对功能的诉求存在差异,**Modern.js 的大多数功能都是按需启用的**。在创建项目时,Modern.js 默认只安装核心模块,使 npm 依赖保持轻量;当需要用到额外功能时,你可以通过 modern new 命令一键开启,并自动安装相关依赖。
|
|
90
90
|
|
|
91
|
-

|
|
92
92
|
|
|
93
|
-
<div style={{ textAlign: 'center', fontStyle: 'italic' }}>
|
|
93
|
+
<div style={{ textAlign: 'center', fontStyle: 'italic' }}>modern new 命令</div>
|
|
94
94
|
|
|
95
95
|
比如:
|
|
96
96
|
|
|
97
97
|
- 对于基础的开发场景,项目中只需安装 Modern.js 的 CLI 工具 `@modern-js/app-tools`,即具备了开发调试、生产构建的能力。
|
|
98
|
-
- 当你需要在应用中增加一些 BFF 接口时,可以执行
|
|
98
|
+
- 当你需要在应用中增加一些 BFF 接口时,可以执行 modern new 命令来启用 BFF 功能。启用后,Modern.js 会自动安装所需的 BFF 插件,以及某个 Node.js 框架对应的插件(如 Koa / Express):
|
|
99
99
|
|
|
100
100
|

|
|
101
101
|
|
|
102
|
-
目前,你可以通过 `
|
|
102
|
+
目前,你可以通过 `modern new` 命令来按需开启以下功能,未来我们也会将更多功能加入到 `new` 命令中,使其能够被便捷地集成。
|
|
103
103
|
|
|
104
104
|

|
|
105
105
|
|
|
@@ -338,7 +338,7 @@ export default defineRoutes(({ route, layout, page }) => {
|
|
|
338
338
|
|
|
339
339
|
#### 路由调试
|
|
340
340
|
|
|
341
|
-
运行 `npx
|
|
341
|
+
运行 `npx modern routes` 命令即可在 `dist/routes-inspect.json` 文件中生成完整的路由结构分析报告。
|
|
342
342
|
|
|
343
343
|
报告中会显示每个路由的路径、组件文件、数据加载器、错误边界、Loading 组件等完整信息,帮助开发者快速了解项目的路由配置,快速定位和排查路由相关问题。结构化的 JSON 格式也便于 AI agent 理解和分析路由结构,提升 AI 辅助开发的效率。
|
|
344
344
|
|
|
@@ -24,8 +24,4 @@ Modern.js 遵循 [Semantic Versioning](https://semver.org/lang/zh-CN/) 语义化
|
|
|
24
24
|
|
|
25
25
|
## 版本升级
|
|
26
26
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
```bash
|
|
30
|
-
npx ultramodern upgrade
|
|
31
|
-
```
|
|
27
|
+
Modern.js 3.0 不再提供 `modern upgrade` 命令。需要升级项目时,请按照[版本升级](/guides/get-started/upgrade)中的手动迁移步骤操作。
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
##
|
|
1
|
+
## modern deploy
|
|
2
2
|
|
|
3
|
-
`
|
|
3
|
+
`modern deploy` 命令,用于生成部署平台需要的产物。
|
|
4
4
|
|
|
5
5
|
```bash
|
|
6
|
-
Usage:
|
|
6
|
+
Usage: modern deploy [options]
|
|
7
7
|
|
|
8
8
|
Options:
|
|
9
9
|
-c --config <config> 指定配置文件路径,可以为相对路径或绝对路径
|
|
@@ -1,4 +1,8 @@
|
|
|
1
|
-
UltraModern.js 提供 BleedingDev create
|
|
1
|
+
UltraModern.js 提供 BleedingDev create 包来创建 SuperApp workspace,不需要全局安装,直接使用 `pnpm dlx` 按需运行即可。
|
|
2
|
+
|
|
3
|
+
pnpm 支持的命令契约是 scoped package specifier:
|
|
4
|
+
`pnpm dlx @bleedingdev/modern-js-create <target>`。不要简写成
|
|
5
|
+
`pnpm dlx modern-js-create`;npm 上没有这个未加 scope 的包。
|
|
2
6
|
|
|
3
7
|
你可以在当前已有的空目录中初始化项目:
|
|
4
8
|
|
|
@@ -13,26 +17,6 @@ pnpm dlx @bleedingdev/modern-js-create .
|
|
|
13
17
|
pnpm dlx @bleedingdev/modern-js-create myapp
|
|
14
18
|
```
|
|
15
19
|
|
|
16
|
-
默认会初始化 TanStack Router。如需强制使用 React Router 兼容路径:
|
|
17
|
-
|
|
18
|
-
```bash
|
|
19
|
-
pnpm dlx @bleedingdev/modern-js-create myapp --router react-router
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
默认会初始化 Tailwind CSS v4 模板。如需关闭:
|
|
23
|
-
|
|
24
|
-
```bash
|
|
25
|
-
pnpm dlx @bleedingdev/modern-js-create myapp --no-tailwind
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
默认会初始化 Effect HttpApi BFF 模板。
|
|
29
|
-
|
|
30
|
-
初始化带 Hono 运行时的 BFF 模板:
|
|
31
|
-
|
|
32
|
-
```bash
|
|
33
|
-
pnpm dlx @bleedingdev/modern-js-create myapp --bff-runtime hono
|
|
34
|
-
```
|
|
35
|
-
|
|
36
20
|
使用 workspace 协议依赖初始化(用于在本地 monorepo 中联调未发布的 Modern.js 包):
|
|
37
21
|
|
|
38
22
|
```bash
|
|
@@ -71,37 +55,22 @@ BleedingDev create 包会直接创建应用,不再提供问答界面:
|
|
|
71
55
|
|
|
72
56
|
```
|
|
73
57
|
.
|
|
74
|
-
├──
|
|
75
|
-
|
|
58
|
+
├── apps
|
|
59
|
+
│ └── shell-super-app
|
|
76
60
|
├── package.json
|
|
77
|
-
├──
|
|
78
|
-
├──
|
|
79
|
-
│ ├──
|
|
80
|
-
│
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
│ └── page.tsx
|
|
85
|
-
└── tsconfig.json
|
|
86
|
-
```
|
|
87
|
-
|
|
88
|
-
默认会生成 Tailwind CSS v4;传入 `--no-tailwind` 时会省略 `postcss.config.mjs`、`tailwind.config.ts` 和 Tailwind 导入。
|
|
89
|
-
|
|
90
|
-
默认会在 `modern.config.ts` 中启用 `@modern-js/plugin-bff`,生成 `api/effect/index.ts` 与 `shared/effect/api.ts`,并将 `bff.runtimeFramework` 设置为 `effect`。
|
|
91
|
-
当启用 `--bff-runtime hono` 时,会在 `modern.config.ts` 中启用 `@modern-js/plugin-bff`,生成 `api/lambda/hello.ts`,并将 `bff.runtimeFramework` 设置为 `hono`。
|
|
92
|
-
当启用 `--workspace` 时,`@modern-js/*` 依赖会使用 `workspace:*` 版本,便于本地 monorepo 联调。
|
|
93
|
-
|
|
94
|
-
它默认创建一个简单、可上线的 UltraModern 应用,并安装已发布的
|
|
95
|
-
BleedingDev 包别名:
|
|
96
|
-
|
|
97
|
-
```bash
|
|
98
|
-
pnpm dlx @bleedingdev/modern-js-create myapp
|
|
61
|
+
├── packages
|
|
62
|
+
│ ├── shared-contracts
|
|
63
|
+
│ ├── shared-design-tokens
|
|
64
|
+
│ └── shared-effect-client
|
|
65
|
+
├── scripts
|
|
66
|
+
├── topology
|
|
67
|
+
└── verticals
|
|
99
68
|
```
|
|
100
69
|
|
|
101
|
-
|
|
70
|
+
默认 workspace 从 shell 起步,并安装已发布的 BleedingDev 包别名:
|
|
102
71
|
|
|
103
72
|
```bash
|
|
104
|
-
pnpm dlx @bleedingdev/modern-js-create my-super-app
|
|
73
|
+
pnpm dlx @bleedingdev/modern-js-create my-super-app
|
|
105
74
|
```
|
|
106
75
|
|
|
107
76
|
在已生成的 SuperApp workspace 根目录中,可以就地添加业务
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
##
|
|
1
|
+
## modern serve
|
|
2
2
|
|
|
3
|
-
`
|
|
3
|
+
`modern serve` 命令用于在生产环境下启动 UltraModern.js 工程, 也可以用于在本地预览生产环境构建的产物。注意你需要提前执行 [`build`](/apis/app/commands#modern-build) 命令构建出对应产物。
|
|
4
4
|
|
|
5
5
|
```bash
|
|
6
|
-
Usage:
|
|
6
|
+
Usage: modern serve [options]
|
|
7
7
|
|
|
8
8
|
Options:
|
|
9
9
|
-c --config <config> 指定配置文件路径,可以为相对路径或绝对路径
|
|
@@ -123,13 +123,35 @@ export default defineConfig({
|
|
|
123
123
|
}
|
|
124
124
|
```
|
|
125
125
|
|
|
126
|
-
- **默认值:**
|
|
126
|
+
- **默认值:**
|
|
127
|
+
|
|
128
|
+
```ts
|
|
129
|
+
{
|
|
130
|
+
enabled: true,
|
|
131
|
+
requireEnvelope: false,
|
|
132
|
+
envelopeHeader: 'x-modernjs-data-envelope',
|
|
133
|
+
validateOrigin: true,
|
|
134
|
+
requireTraceContext: false,
|
|
135
|
+
batch: {
|
|
136
|
+
enabled: true,
|
|
137
|
+
endpoint: '/_data/batch',
|
|
138
|
+
maxBatchSize: 16,
|
|
139
|
+
maxBatchBytes: 64 * 1024,
|
|
140
|
+
flushIntervalMs: 8,
|
|
141
|
+
maxConcurrency: 4,
|
|
142
|
+
requestTimeoutMs: 10000,
|
|
143
|
+
allowedMethods: ['GET'],
|
|
144
|
+
},
|
|
145
|
+
}
|
|
146
|
+
```
|
|
127
147
|
|
|
128
148
|
用于配置 Effect 运行时的数据请求信封(envelope)校验策略。
|
|
129
149
|
|
|
130
150
|
生成的 Effect 客户端会将批处理请求发送到 `${bff.prefix}${batch.endpoint}`(例如 `/bff-api/_data/batch`)。
|
|
131
151
|
|
|
132
|
-
|
|
152
|
+
Envelope 校验默认开启但不是强制的:未携带 envelope 的请求会继续通过,除非将 `requireEnvelope` 设为 `true`。如果请求携带 envelope,运行时会按配置校验命名空间、origin、trace 与 selection 策略。`expectedNamespace` 默认不设置,`selection` 默认也不限制,除非显式配置。
|
|
153
|
+
|
|
154
|
+
Origin 校验默认开启。运行时会优先将 envelope 中的 origin 与请求 `Origin` 头比对;若请求无 `Origin`,则回退到请求 URL 的 origin;设置 `validateOrigin: false` 可关闭该比对。
|
|
133
155
|
|
|
134
156
|
```ts title="modern.config.ts"
|
|
135
157
|
export default defineConfig({
|
|
@@ -150,3 +172,5 @@ export default defineConfig({
|
|
|
150
172
|
```
|
|
151
173
|
|
|
152
174
|
`batch.flushIntervalMs` 用于控制生成的 Effect 客户端微批处理窗口;`maxConcurrency` 与 `requestTimeoutMs` 由服务端批处理网关用于内部请求分发。
|
|
175
|
+
|
|
176
|
+
生成的 `effectBff.client.*` API 只存在于 loader 物化后的 `@api/effect/*` 导入中。直接导入服务端入口(`api/effect/index`)时拿到的是 Effect BFF 定义;其中的 `client` 属性只是占位,并会在访问具体操作时报错。
|
|
@@ -11,22 +11,23 @@ type RsdoctorConfig =
|
|
|
11
11
|
| boolean
|
|
12
12
|
| {
|
|
13
13
|
enabled?: boolean;
|
|
14
|
+
disableClientServer?: boolean;
|
|
14
15
|
};
|
|
15
16
|
```
|
|
16
17
|
|
|
17
|
-
- **默认值:**
|
|
18
|
+
- **默认值:** `undefined`,未配置该选项时不会启用 Rsdoctor。
|
|
18
19
|
|
|
19
|
-
用于配置 Modern.js 构建过程中的 Rsdoctor
|
|
20
|
+
用于配置 Modern.js 构建过程中的 Rsdoctor 诊断能力。将该选项设为 `true` 即可启用 Rsdoctor:
|
|
20
21
|
|
|
21
22
|
```ts title="modern.config.ts"
|
|
22
23
|
export default defineConfig({
|
|
23
24
|
performance: {
|
|
24
|
-
rsdoctor:
|
|
25
|
+
rsdoctor: true,
|
|
25
26
|
},
|
|
26
27
|
});
|
|
27
28
|
```
|
|
28
29
|
|
|
29
|
-
|
|
30
|
+
你也可以使用对象形式。提供对象配置时,除非将 `enabled` 设为 `false`,否则会启用 Rsdoctor:
|
|
30
31
|
|
|
31
32
|
```ts title="modern.config.ts"
|
|
32
33
|
export default defineConfig({
|
|
@@ -37,3 +38,5 @@ export default defineConfig({
|
|
|
37
38
|
},
|
|
38
39
|
});
|
|
39
40
|
```
|
|
41
|
+
|
|
42
|
+
如果需要在共享配置中关闭已经启用的 Rsdoctor,可以将 `rsdoctor` 设为 `false`,或将 `enabled` 设为 `false`。
|
|
@@ -86,8 +86,8 @@ export default defineConfig(({ env, command }) => ({
|
|
|
86
86
|
该函数接受以下入参:
|
|
87
87
|
|
|
88
88
|
- `env`:对应 `process.env.NODE_ENV` 的值。
|
|
89
|
-
- 当运行 `
|
|
90
|
-
- 当运行 `
|
|
89
|
+
- 当运行 `modern dev` 时,`env` 的值为 `development`。
|
|
90
|
+
- 当运行 `modern build` 或 `modern serve` 时,`env` 的值为 `production`。
|
|
91
91
|
- `command`:对应当前运行的命令,如 `dev`、`build`、`serve`。
|
|
92
92
|
|
|
93
93
|
#### 导出异步函数
|
|
@@ -117,8 +117,8 @@ Modern.js 命令行支持通过 `--config` 选项来指定配置文件的名称
|
|
|
117
117
|
```json title="package.json"
|
|
118
118
|
{
|
|
119
119
|
"scripts": {
|
|
120
|
-
"dev": "modern
|
|
121
|
-
"build": "
|
|
120
|
+
"dev": "modern dev",
|
|
121
|
+
"build": "modern build --config modern.prod.config.ts"
|
|
122
122
|
}
|
|
123
123
|
}
|
|
124
124
|
```
|
|
@@ -126,7 +126,7 @@ Modern.js 命令行支持通过 `--config` 选项来指定配置文件的名称
|
|
|
126
126
|
你也可以将 `--config` 选项缩写为 `-c`:
|
|
127
127
|
|
|
128
128
|
```bash
|
|
129
|
-
$
|
|
129
|
+
$ modern build -c modern.prod.config.js
|
|
130
130
|
```
|
|
131
131
|
|
|
132
132
|
### 在 package.json 中配置(不推荐)
|
|
@@ -187,7 +187,7 @@ export default defineConfig({
|
|
|
187
187
|
|
|
188
188
|
在使用 `modern.config.local.ts` 时,请注意以下事项:
|
|
189
189
|
|
|
190
|
-
- `modern.config.local.ts` 文件仅会在执行 `
|
|
190
|
+
- `modern.config.local.ts` 文件仅会在执行 `modern dev` 命令时被加载,当执行 `modern build` 时不会被加载。
|
|
191
191
|
- `modern.config.local.ts` 文件的优先级不仅高于 `modern.config.ts`,也高于 `package.json` 中的 `modernConfig` 字段。
|
|
192
192
|
- 由于 `modern.config.local.ts` 仅在本地调试时使用,因此不建议将其提交到代码仓库中,请确保项目的 `.gitignore` 文件中包含 `modern.config.local.ts` 等文件。
|
|
193
193
|
|
|
@@ -55,12 +55,14 @@ export default defineConfig({
|
|
|
55
55
|
});
|
|
56
56
|
```
|
|
57
57
|
|
|
58
|
-
|
|
58
|
+
Envelope 校验默认开启,但只有设置 `requireEnvelope` 时才强制要求请求携带 envelope。Origin 校验默认开启;设置 `validateOrigin: false` 后,运行时不会再将 envelope 中的 origin 与请求 `Origin` 头比对,也不会在缺少该请求头时回退到请求 URL 的 origin。
|
|
59
59
|
|
|
60
60
|
## Effect 客户端自动行为
|
|
61
61
|
|
|
62
62
|
使用生成的 Effect 客户端(`@api/effect/index`)时,Modern.js 会在同源请求中自动附加序列化的 envelope 请求头(`x-modernjs-data-envelope`)。
|
|
63
63
|
|
|
64
|
+
生成客户端由 loader 物化。请在浏览器或会被客户端打包的代码中通过 `@api/effect/*` 导入;直接导入服务端入口(`api/effect/index`)时拿到的是 Effect BFF 定义,其中只包含占位的 `client`。
|
|
65
|
+
|
|
64
66
|
Envelope 默认包含:
|
|
65
67
|
|
|
66
68
|
- operation 元数据
|
|
@@ -105,7 +105,7 @@ const layer = HttpApiBuilder.layer(bffEffectApi).pipe(
|
|
|
105
105
|
export default defineEffectBff({ api: bffEffectApi, layer });
|
|
106
106
|
```
|
|
107
107
|
|
|
108
|
-
|
|
108
|
+
在浏览器代码中通过 `@api/effect/index` 调用接口:
|
|
109
109
|
|
|
110
110
|
```ts title="src/routes/page.tsx"
|
|
111
111
|
import effectBff from '@api/effect/index';
|
|
@@ -113,6 +113,8 @@ import effectBff from '@api/effect/index';
|
|
|
113
113
|
const response = await effectBff.client.hello.ping({});
|
|
114
114
|
```
|
|
115
115
|
|
|
116
|
+
`effectBff.client.*` 由 BFF loader 针对 `@api/effect/*` 导入物化生成。不要直接导入 `api/effect/index` 并期望在服务端代码、脚本或测试中运行 `client`;直接导入入口时拿到的是服务端运行时定义,其中的 `client` 只是类型占位。
|
|
117
|
+
|
|
116
118
|
import Hono from '@site-docs/components/hono';
|
|
117
119
|
|
|
118
120
|
<Hono />
|
|
@@ -20,7 +20,7 @@ title: API 参考
|
|
|
20
20
|
| `isResourcesReady` | `boolean` | 当前语言的翻译资源是否已加载完成 |
|
|
21
21
|
| `i18nInstance` | `I18nInstance` | i18next 实例(用于高级场景) |
|
|
22
22
|
|
|
23
|
-
启用 `localePathRedirect` 且省略 `localisedUrls` 时,Modern.js
|
|
23
|
+
启用 `localePathRedirect` 且省略 `localisedUrls` 时,Modern.js 会保持 `/en/about` 这类仅语言前缀路径。只有提供非空 `localisedUrls` 映射时,才会启用路径片段翻译。也只有在该映射启用时,路由生成才会校验每个可本地化路径是否覆盖所有已配置语言。
|
|
24
24
|
|
|
25
25
|
### 基本用法
|
|
26
26
|
|
|
@@ -48,7 +48,7 @@ export default defineConfig({
|
|
|
48
48
|
| `languages` | `string[]` | `[]` | 支持的语言列表 |
|
|
49
49
|
| `fallbackLanguage` | `string` | `''` | 语言检测失败时的兜底语言 |
|
|
50
50
|
| `localePathRedirect` | `boolean` | `false` | 接管 URL 语言前缀的识别、重定向和切换,详见[路由集成](./routing.md#启用语言路径前缀) |
|
|
51
|
-
| `localisedUrls` | `boolean \| Record<string, Record<string, string>>` |
|
|
51
|
+
| `localisedUrls` | `boolean \| Record<string, Record<string, string>>` | 仅语言前缀行为 | 本地化路由路径映射。只有非空映射会启用路径片段翻译;省略、`true`、`false` 和 `{}` 都会保留语言前缀但不翻译路径片段。 |
|
|
52
52
|
| `i18nextDetector` | `boolean` | `false` | 启用 i18next 检测器(Cookie / Header 等) |
|
|
53
53
|
| `detection` | `LanguageDetectorOptions` | — | i18next 检测器详细配置,见[语言检测](./locale-detection.md) |
|
|
54
54
|
| `ignoreRedirectRoutes` | `string[] \| Function` | — | 跳过重定向的路由,见[语言检测](./locale-detection.md#ignoreredirectroutes) |
|
|
@@ -113,7 +113,7 @@ i18nPlugin({
|
|
|
113
113
|
|
|
114
114
|
## ignoreRedirectRoutes
|
|
115
115
|
|
|
116
|
-
指定哪些额外路径跳过语言路径重定向。Modern.js 会自动跳过服务端 API
|
|
116
|
+
指定哪些额外路径跳过语言路径重定向。Modern.js 会自动跳过服务端 API 路由、启用 BFF 但未配置前缀时的默认 `/api` 前缀,以及自定义 `bff.prefix`。`ignoreRedirectRoutes` 适用于其他不需要语言前缀的非 API 业务路径。
|
|
117
117
|
|
|
118
118
|
**写法一:字符串数组**(支持精确匹配和前缀匹配)
|
|
119
119
|
|
|
@@ -32,11 +32,13 @@ i18nPlugin({
|
|
|
32
32
|
| `/en/about` | 正常访问,语言为 `en` |
|
|
33
33
|
| `/zh/about` | 正常访问,语言为 `zh` |
|
|
34
34
|
|
|
35
|
-
API 和 BFF
|
|
35
|
+
API 和 BFF 前缀会自动跳过,包括服务端 API 路由、启用 BFF 但未配置前缀时的默认 `/api` 前缀,以及自定义 `bff.prefix`。这些路由不需要语言前缀,也不需要配置 `localisedUrls`。如果还有其他业务路径不应该重定向,可以使用 `ignoreRedirectRoutes`,详见[语言检测 → ignoreRedirectRoutes](./locale-detection.md#ignoreredirectroutes)。
|
|
36
36
|
|
|
37
37
|
## 本地化 URL 路径
|
|
38
38
|
|
|
39
|
-
|
|
39
|
+
默认情况下,`localePathRedirect` 只会添加和识别语言前缀,例如 `/en/about`。翻译路径片段需要显式开启:只有提供非空 `localisedUrls` 映射时才会启用。省略 `localisedUrls`、设置为 `true`、设置为 `false` 或传入空对象时,都会保持仅语言前缀的行为。
|
|
40
|
+
|
|
41
|
+
配置非空 `localisedUrls` 映射后,每个可本地化的路由路径都必须为所有已配置语言提供 URL。如果向 `languages` 中新增语言,Modern.js 会在路由生成阶段失败,直到每个 `localisedUrls` 条目都补齐该语言。
|
|
40
42
|
|
|
41
43
|
`localisedUrls` 同时适用于 React Router 和 TanStack Router 项目的约定式路由。不要为 API 路由、BFF 前缀或配置的 `bff.prefix` 添加本地化 URL 条目;这些路径会自动排除在语言重定向之外。
|
|
42
44
|
|
|
@@ -73,7 +75,7 @@ i18nPlugin({
|
|
|
73
75
|
| `/cs/terms-of-service` | 重定向到 `/cs/podminky-pouzivani` |
|
|
74
76
|
| `/cs/podminky-pouzivani` | 正常访问,语言为 `cs` |
|
|
75
77
|
|
|
76
|
-
|
|
78
|
+
当 preset、共享配置或生成的元数据本来会提供映射,但当前入口只希望保留语言前缀、不翻译路径片段时,可以设置 `localisedUrls: false` 作为逃生口。
|
|
77
79
|
|
|
78
80
|
## 路由配置
|
|
79
81
|
|
|
@@ -2,14 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
Rsdoctor 是一个 Rspack 构建分析工具。在 Modern.js 中,我们推荐使用 Rsdoctor 来对构建过程与构建产物进行诊断和分析。
|
|
4
4
|
|
|
5
|
-
Modern.js
|
|
5
|
+
Modern.js 不会默认启用 Rsdoctor。当你需要在构建中运行 Rsdoctor 时,请配置 `performance.rsdoctor`。
|
|
6
6
|
|
|
7
7
|
## 执行构建
|
|
8
8
|
|
|
9
9
|
```ts title="modern.config.ts"
|
|
10
10
|
export default defineConfig({
|
|
11
11
|
performance: {
|
|
12
|
-
// 在 production build 默认启用
|
|
13
12
|
rsdoctor: true,
|
|
14
13
|
},
|
|
15
14
|
});
|
|
@@ -21,7 +20,7 @@ npm run build
|
|
|
21
20
|
|
|
22
21
|
## 关闭 Rsdoctor
|
|
23
22
|
|
|
24
|
-
|
|
23
|
+
如果你希望在共享配置中关闭已经启用的 Rsdoctor:
|
|
25
24
|
|
|
26
25
|
```ts title="modern.config.ts"
|
|
27
26
|
export default defineConfig({
|
|
@@ -15,11 +15,11 @@ sidebar_position: 15
|
|
|
15
15
|
|
|
16
16
|
## 构建部署产物
|
|
17
17
|
|
|
18
|
-
执行 `
|
|
18
|
+
执行 `modern deploy` 命令将自动输出部署产物。此过程包括优化 Bundler 构建产物及产物依赖,检测当前部署平台,并自动生成可以在该平台运行的产物。
|
|
19
19
|
如果你希望在本地生成并测试特定部署平台的产物,可以通过设置环境变量来指定平台:
|
|
20
20
|
|
|
21
21
|
```bash
|
|
22
|
-
MODERNJS_DEPLOY=netlify npx
|
|
22
|
+
MODERNJS_DEPLOY=netlify npx modern deploy
|
|
23
23
|
```
|
|
24
24
|
|
|
25
25
|
:::info
|
|
@@ -35,10 +35,10 @@ MODERNJS_DEPLOY=netlify npx ultramodern deploy
|
|
|
35
35
|
你可以使用以下命令构建项目:
|
|
36
36
|
|
|
37
37
|
```bash
|
|
38
|
-
npx
|
|
38
|
+
npx modern deploy
|
|
39
39
|
```
|
|
40
40
|
|
|
41
|
-
当执行 `
|
|
41
|
+
当执行 `modern deploy` 命令时,UltraModern.js 将生成可执行的部署产物,并在控制台输出以下内容:
|
|
42
42
|
|
|
43
43
|
```bash
|
|
44
44
|
Static directory: `.output/static`
|
|
@@ -66,7 +66,7 @@ PORT=3000 node .output/index
|
|
|
66
66
|
{
|
|
67
67
|
"scripts": {
|
|
68
68
|
"build:packages": "pnpm --filter 'app^...' run build",
|
|
69
|
-
"deploy": "pnpm run build:packages &&
|
|
69
|
+
"deploy": "pnpm run build:packages && modern deploy"
|
|
70
70
|
}
|
|
71
71
|
}
|
|
72
72
|
```
|
|
@@ -77,7 +77,7 @@ PORT=3000 node .output/index
|
|
|
77
77
|
{
|
|
78
78
|
"scripts": {
|
|
79
79
|
"build:packages": "rush rebuild --to-except app",
|
|
80
|
-
"deploy": "rushx build:packages &&
|
|
80
|
+
"deploy": "rushx build:packages && modern deploy"
|
|
81
81
|
}
|
|
82
82
|
}
|
|
83
83
|
```
|
|
@@ -105,7 +105,7 @@ Netlify 是一个流行的 Web 开发平台,专为构建、发布和维护现
|
|
|
105
105
|
```toml
|
|
106
106
|
[build]
|
|
107
107
|
publish = "dist"
|
|
108
|
-
command = "
|
|
108
|
+
command = "modern deploy"
|
|
109
109
|
```
|
|
110
110
|
|
|
111
111
|
:::info
|
|
@@ -121,7 +121,7 @@ Netlify 是一个流行的 Web 开发平台,专为构建、发布和维护现
|
|
|
121
121
|
```toml title="netlify.toml"
|
|
122
122
|
[build]
|
|
123
123
|
publish = "dist"
|
|
124
|
-
command = "
|
|
124
|
+
command = "modern deploy"
|
|
125
125
|
|
|
126
126
|
[functions]
|
|
127
127
|
directory = ".netlify/functions"
|
|
@@ -167,7 +167,7 @@ Netlify 是一个流行的 Web 开发平台,专为构建、发布和维护现
|
|
|
167
167
|
{
|
|
168
168
|
"scripts": {
|
|
169
169
|
"build:packages": "pnpm --filter 'app^...' run build",
|
|
170
|
-
"deploy": "pnpm run build:packages &&
|
|
170
|
+
"deploy": "pnpm run build:packages && modern deploy"
|
|
171
171
|
}
|
|
172
172
|
}
|
|
173
173
|
```
|
|
@@ -207,7 +207,7 @@ Vercel 是一个面向现代 Web 应用的部署平台,它提供了丰富的
|
|
|
207
207
|
|
|
208
208
|
```json title="vercel.json"
|
|
209
209
|
{
|
|
210
|
-
"buildCommand": "
|
|
210
|
+
"buildCommand": "modern deploy",
|
|
211
211
|
"outputDirectory": ".vercel/output"
|
|
212
212
|
}
|
|
213
213
|
```
|
|
@@ -272,7 +272,7 @@ Vercel 是一个面向现代 Web 应用的部署平台,它提供了丰富的
|
|
|
272
272
|
{
|
|
273
273
|
"scripts": {
|
|
274
274
|
"build:packages": "pnpm --filter 'app^...' run build",
|
|
275
|
-
"deploy": "pnpm run build:packages &&
|
|
275
|
+
"deploy": "pnpm run build:packages && modern deploy"
|
|
276
276
|
}
|
|
277
277
|
}
|
|
278
278
|
```
|
|
@@ -311,12 +311,12 @@ Github Pages 支持两种部署方式,通过分支部署或通过 Github Actio
|
|
|
311
311
|
|
|
312
312
|
1. 在 github 仓库中,选择 `Settings > Pages > Source > Deploy from a branch`。
|
|
313
313
|
2. 安装 `gh-pages` 依赖作为开发依赖。
|
|
314
|
-
3. 在 package.json 的 `scripts` 中添加 `"deploy:gh-pages": "MODERNJS_DEPLOY=ghPages
|
|
314
|
+
3. 在 package.json 的 `scripts` 中添加 `"deploy:gh-pages": "MODERNJS_DEPLOY=ghPages modern deploy && gh-pages -d .output"`。
|
|
315
315
|
4. 执行 `npm run deploy:gh-pages`。
|
|
316
316
|
|
|
317
317
|
:::info
|
|
318
318
|
|
|
319
|
-
1. 执行 `MODERNJS_DEPLOY=ghPages
|
|
319
|
+
1. 执行 `MODERNJS_DEPLOY=ghPages modern deploy`,UltraModern.js 会把可用于 github 部署的产物构建到 `.output` 目录。
|
|
320
320
|
2. 可以参考项目[示例](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/modern-js-deploy-csr)。
|
|
321
321
|
|
|
322
322
|
:::
|
|
@@ -16,8 +16,8 @@ Modern.js 提供了对环境变量的支持,包含内置的环境变量和自
|
|
|
16
16
|
|
|
17
17
|
表示当前的执行环境,是**只读的**的环境变量,其值在不同的执行命令下具有不同的值:
|
|
18
18
|
|
|
19
|
-
- `production`:执行 `
|
|
20
|
-
- `development`:执行 `
|
|
19
|
+
- `production`:执行 `modern build`、`modern serve` 命令时的默认值。
|
|
20
|
+
- `development`:执行 `modern dev` 命令时的默认值,同时也是其他所有情况下的默认值。
|
|
21
21
|
|
|
22
22
|
### MODERN_ENV
|
|
23
23
|
|
|
@@ -48,6 +48,5 @@ Modern.js 支持多种渲染模式组合使用:
|
|
|
48
48
|
- [服务端渲染(SSR)](/guides/basic-features/render/ssr)
|
|
49
49
|
- [流式服务端渲染(Streaming SSR)](/guides/basic-features/render/streaming-ssr)
|
|
50
50
|
- [React Server Components(RSC)](/guides/basic-features/render/rsc)
|
|
51
|
-
- [TanStack Router RSC](/guides/basic-features/render/tanstack-rsc)
|
|
52
51
|
- [静态站点生成(SSG)](/guides/basic-features/render/ssg)
|
|
53
52
|
- [渲染缓存](/guides/basic-features/render/ssr-cache)
|
|
@@ -616,4 +616,3 @@ import DeployTip from '@site-docs/components/rsc-deploy-tip';
|
|
|
616
616
|
- [数据缓存](/guides/basic-features/data/data-cache)
|
|
617
617
|
- [服务端渲染(SSR)](/guides/basic-features/render/ssr)
|
|
618
618
|
- [Streaming SSR](/guides/basic-features/render/streaming-ssr)
|
|
619
|
-
- [TanStack Router RSC](/guides/basic-features/render/tanstack-rsc)
|
|
@@ -270,7 +270,7 @@ Modern.js 会自动查找并加载:
|
|
|
270
270
|
|
|
271
271
|
:::info
|
|
272
272
|
|
|
273
|
-
当前路由结构可以通过 [`
|
|
273
|
+
当前路由结构可以通过 [`modern routes`](#调试路由) 命令查看
|
|
274
274
|
|
|
275
275
|
:::
|
|
276
276
|
|
|
@@ -318,7 +318,7 @@ export default defineRoutes(({ page }, fileRoutes) => {
|
|
|
318
318
|
|
|
319
319
|
```bash
|
|
320
320
|
# 生成路由结构分析报告
|
|
321
|
-
npx
|
|
321
|
+
npx modern routes
|
|
322
322
|
```
|
|
323
323
|
|
|
324
324
|
该命令会在 `dist/routes-inspect.json` 文件中生成最终的路由结构,帮助你了解合并后的完整路由信息。
|
|
@@ -476,27 +476,27 @@ Modern.js 支持通过 `loading.tsx` 文件来解决这个问题,`routes/` 下
|
|
|
476
476
|
|
|
477
477
|
:::tip
|
|
478
478
|
|
|
479
|
-
|
|
479
|
+
在 SSR 项目中,同源路由会为匹配到且带有可调用 loader 的路由预取 [Data Loader](/guides/basic-features/data/data-fetch) 返回的数据。如果某个路由的 loader 数据不应该在导航前请求,可以将该路由的 `handle.navigationWarmup.data` 设置为 `false`。
|
|
480
480
|
|
|
481
481
|
:::
|
|
482
482
|
|
|
483
|
-
默认情况下,同源链接会在 `<Link>`
|
|
483
|
+
默认情况下,同源链接会在 `<Link>` 渲染时预取路由模块和匹配到的 loader 数据。当用户开启 Save-Data 或处于慢速网络时,Modern.js 会跳过这些自动预热。
|
|
484
484
|
|
|
485
485
|
`prefetch` 属性有四个可选值:
|
|
486
486
|
|
|
487
487
|
- `render`,默认值。当 `<Link>` 组件渲染时,就会预热对应的路由模块。
|
|
488
488
|
- `intent`,当用户聚焦、悬停或触摸链接时,会开始预热对应的路由模块。如果意图在预热开始前取消,预热也会取消。
|
|
489
489
|
- `viewport`,当 `<Link>` 组件进入视窗时,会开始预热对应的路由模块。
|
|
490
|
-
- `none`,关闭自动
|
|
490
|
+
- `none`,关闭自动 prefetch。如果没有显式设置 `preload`,也会关闭隐式 preload。
|
|
491
491
|
|
|
492
|
-
`preload`
|
|
492
|
+
`preload` 属性接受同样的时机值,默认跟随 `prefetch` 的时机。显式设置的 `preload` 总是优先生效,`preload={false}` 会关闭 preload 行为。
|
|
493
493
|
|
|
494
|
-
|
|
494
|
+
如果要让某个路由关闭 SSR 数据预热:
|
|
495
495
|
|
|
496
496
|
```ts title="routes/page.config.ts"
|
|
497
497
|
export const handle = {
|
|
498
498
|
navigationWarmup: {
|
|
499
|
-
data:
|
|
499
|
+
data: false,
|
|
500
500
|
},
|
|
501
501
|
};
|
|
502
502
|
```
|
|
@@ -505,7 +505,7 @@ export const handle = {
|
|
|
505
505
|
|
|
506
506
|
- `render` 可以通过 `<Link>` 组件在组件树中的位置控制路由模块预热时机。
|
|
507
507
|
- `viewport` 可以把模块预热推迟到链接接近可操作时再触发。
|
|
508
|
-
- SSR
|
|
508
|
+
- SSR 数据预取默认开启;当路由的 loader 数据不适合在导航前获取时,使用 `handle.navigationWarmup.data = false` 关闭。
|
|
509
509
|
|
|
510
510
|
:::
|
|
511
511
|
|