@bleedingdev/modern-js-main-doc 3.2.0-ultramodern.98 → 3.4.0-ultramodern.0
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 +23 -51
- package/docs/en/components/prerequisites.mdx +1 -1
- 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/tools/ts-checker.mdx +30 -2
- 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/advanced-features/web-server.mdx +12 -0
- 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 +25 -10
- package/docs/en/guides/basic-features/testing/rstest.mdx +29 -0
- 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 +135 -26
- 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/prerequisites.mdx +1 -1
- 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/tools/ts-checker.mdx +30 -2
- 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/advanced-features/web-server.mdx +12 -0
- 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 +25 -10
- package/docs/zh/guides/basic-features/testing/rstest.mdx +29 -0
- 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 +121 -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 +17 -14
- package/rspress.config.ts +17 -5
- package/src/components/Footer/index.tsx +3 -3
- package/src/components/Footer/styles.module.scss +1 -1
- package/src/components/Mermaid/style.scss +52 -52
- package/src/components/RandomMemberList/index.module.scss +8 -8
- package/src/components/SecondaryTitle/index.module.css +7 -2
- package/src/components/ShowcaseList/index.module.scss +1 -1
- package/src/components/ShowcaseList/useShowcases.ts +23 -65
- package/src/i18n/enUS.ts +0 -9
- package/src/i18n/zhCN.ts +0 -9
- package/src/pages/index.module.scss +6 -6
- 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
|
@@ -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`。
|
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
title: tsChecker
|
|
3
3
|
---
|
|
4
4
|
|
|
5
|
+
import { PackageManagerTabs } from '@theme';
|
|
6
|
+
|
|
5
7
|
# tools.tsChecker
|
|
6
8
|
|
|
7
9
|
- **类型:** `Object | Function`
|
|
@@ -14,6 +16,8 @@ const defaultOptions = {
|
|
|
14
16
|
memoryLimit: 8192,
|
|
15
17
|
// use tsconfig of user project
|
|
16
18
|
configFile: tsconfigPath,
|
|
19
|
+
// use TypeScript Go checker by default
|
|
20
|
+
tsgo: true,
|
|
17
21
|
// use TS-Go native preview of user project
|
|
18
22
|
typescriptPath: require.resolve('@typescript/native-preview/package.json'),
|
|
19
23
|
},
|
|
@@ -35,7 +39,7 @@ const defaultOptions = {
|
|
|
35
39
|
},
|
|
36
40
|
```
|
|
37
41
|
|
|
38
|
-
默认情况下,Modern.js 会开启 [@rsbuild/plugin-type-check](https://github.com/
|
|
42
|
+
默认情况下,Modern.js 会开启 [@rsbuild/plugin-type-check](https://github.com/rstackjs/rsbuild-plugin-type-check) 进行类型检查。你可以通过 `output.disableTsChecker` 配置项来关闭类型检查。
|
|
39
43
|
|
|
40
44
|
## 示例
|
|
41
45
|
|
|
@@ -53,4 +57,28 @@ export default {
|
|
|
53
57
|
};
|
|
54
58
|
```
|
|
55
59
|
|
|
56
|
-
|
|
60
|
+
## TypeScript Go 默认开启
|
|
61
|
+
|
|
62
|
+
类型检查默认使用 [TypeScript Go](https://github.com/microsoft/typescript-go)(`tsgo`)。该能力由 [`@rsbuild/plugin-type-check`](https://github.com/rstackjs/rsbuild-plugin-type-check) 底层集成的 [`ts-checker-rspack-plugin`](https://github.com/rstackjs/ts-checker-rspack-plugin) 提供,可以将类型检查耗时减少约 5-10 倍。
|
|
63
|
+
|
|
64
|
+
`@typescript/native-preview` 已随构建器内置,无需额外安装。如需固定版本,可在项目中自行安装:
|
|
65
|
+
|
|
66
|
+
<PackageManagerTabs command="install @typescript/native-preview -D" />
|
|
67
|
+
|
|
68
|
+
开启 `tsgo` 后,默认的 `typescript.typescriptPath` 会解析到 `@typescript/native-preview/package.json`。如果你手动设置了 `typescript.typescriptPath`,它必须是指向 `@typescript/native-preview/package.json` 的绝对路径。
|
|
69
|
+
|
|
70
|
+
如需回退到经典 TypeScript 检查器,请将 `typescript.tsgo` 设置为 `false`,并确保项目中安装了 `typescript`:
|
|
71
|
+
|
|
72
|
+
```ts
|
|
73
|
+
export default {
|
|
74
|
+
tools: {
|
|
75
|
+
tsChecker: {
|
|
76
|
+
typescript: {
|
|
77
|
+
tsgo: false,
|
|
78
|
+
},
|
|
79
|
+
},
|
|
80
|
+
},
|
|
81
|
+
};
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
关于 `tsgo` 模式下生效的配置项和相关限制,请参考 [ts-checker-rspack-plugin - TypeScript Go support](https://github.com/rstackjs/ts-checker-rspack-plugin#typescript-go-support)。
|
|
@@ -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
|
|
|
@@ -48,6 +48,18 @@ export default defineServerConfig({
|
|
|
48
48
|
|
|
49
49
|
创建文件后,可以在这个文件中编写自定义逻辑。
|
|
50
50
|
|
|
51
|
+
3. 你可以将 `server` 目录包含在 `tsconfig.json` 中
|
|
52
|
+
|
|
53
|
+
```json5
|
|
54
|
+
{
|
|
55
|
+
// ...
|
|
56
|
+
"include": [
|
|
57
|
+
// ...
|
|
58
|
+
"server"
|
|
59
|
+
]
|
|
60
|
+
}
|
|
61
|
+
```
|
|
62
|
+
|
|
51
63
|
## 自定义 Web Server 能力
|
|
52
64
|
|
|
53
65
|
Modern.js 的服务器基于 Hono 实现,在最新版本的自定义 Web Server 中,我们向用户暴露了 Hono 的中间件能力,你可以参考 [Hono 文档](https://hono.dev/docs/api/context) 了解更多用法。
|
|
@@ -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` 文件中生成最终的路由结构,帮助你了解合并后的完整路由信息。
|