@bleedingdev/modern-js-main-doc 3.2.0-ultramodern.8 → 3.2.0-ultramodern.81
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 +32 -32
- package/docs/en/community/blog/2022-0708-updates.md +1 -1
- package/docs/en/community/blog/2022-0910-updates.md +2 -2
- 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/contributing-guide.mdx +2 -3
- package/docs/en/community/releases.mdx +2 -2
- 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 +38 -36
- package/docs/en/components/init-rspack-app.mdx +1 -1
- package/docs/en/components/prerequisites.mdx +1 -2
- package/docs/en/components/serve-command.mdx +3 -3
- package/docs/en/configure/app/bff/runtime-framework.mdx +1 -1
- package/docs/en/configure/app/usage.mdx +6 -6
- package/docs/en/guides/advanced-features/international/api.mdx +4 -1
- package/docs/en/guides/advanced-features/international/configuration.mdx +1 -0
- package/docs/en/guides/advanced-features/international/locale-detection.mdx +1 -1
- package/docs/en/guides/advanced-features/international/routing.mdx +43 -2
- 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/routes/config-routes.mdx +2 -2
- package/docs/en/guides/basic-features/testing/_meta.json +1 -1
- package/docs/en/guides/concept/server.mdx +2 -2
- package/docs/en/guides/get-started/quick-start.mdx +2 -2
- package/docs/en/guides/get-started/tech-stack.mdx +10 -4
- package/docs/en/guides/get-started/ultramodern.mdx +93 -16
- 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/other.mdx +7 -7
- package/docs/zh/apis/app/commands.mdx +32 -32
- package/docs/zh/community/blog/2022-0708-updates.md +1 -1
- package/docs/zh/community/blog/2022-0910-updates.md +2 -2
- 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/contributing-guide.mdx +2 -3
- package/docs/zh/community/releases.mdx +2 -2
- 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 +36 -34
- package/docs/zh/components/init-rspack-app.mdx +1 -1
- package/docs/zh/components/prerequisites.mdx +1 -2
- package/docs/zh/components/serve-command.mdx +3 -3
- package/docs/zh/configure/app/bff/runtime-framework.mdx +1 -1
- package/docs/zh/configure/app/usage.mdx +5 -5
- package/docs/zh/guides/advanced-features/international/api.mdx +4 -1
- package/docs/zh/guides/advanced-features/international/configuration.mdx +1 -0
- package/docs/zh/guides/advanced-features/international/locale-detection.mdx +1 -1
- package/docs/zh/guides/advanced-features/international/routing.mdx +43 -2
- 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/routes/config-routes.mdx +2 -2
- package/docs/zh/guides/basic-features/testing/_meta.json +1 -1
- package/docs/zh/guides/concept/server.mdx +2 -2
- package/docs/zh/guides/get-started/quick-start.mdx +2 -2
- package/docs/zh/guides/get-started/tech-stack.mdx +10 -4
- package/docs/zh/guides/get-started/ultramodern.mdx +90 -1
- 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/other.md +7 -8
- package/main-doc/docs/en/guides/get-started/ultramodern.mdx +64 -14
- package/main-doc/docs/zh/guides/get-started/ultramodern.mdx +62 -3
- package/package.json +8 -8
- package/docs/en/guides/basic-features/testing/cypress.mdx +0 -95
- package/docs/en/guides/basic-features/testing/jest.mdx +0 -148
- package/docs/en/guides/basic-features/testing/vitest.mdx +0 -100
- package/docs/zh/guides/basic-features/testing/cypress.mdx +0 -95
- package/docs/zh/guides/basic-features/testing/jest.mdx +0 -148
- package/docs/zh/guides/basic-features/testing/vitest.mdx +0 -100
|
@@ -15,7 +15,7 @@ Modern.js 9 ~ 10 月的最新版本为 v1.21.0,本双月的主要更新有:
|
|
|
15
15
|
|
|
16
16
|
Modern.js 框架完成了对 pnpm v7 的变更适配。
|
|
17
17
|
|
|
18
|
-
使用 `
|
|
18
|
+
使用 `pnpm dlx @bleedingdev/modern-js-create` 创建项目时会根据用户当前环境的 pnpm 版本进行安装依赖操作,并且在初始化项目中会在 `.npmrc` 中添加
|
|
19
19
|
`strict-peer-dependencies=false` 配置,避免安装时由于 `peerDependencies` 缺失导致安装依赖失败问题。
|
|
20
20
|
同时适配 `release`、`deploy` 命令对 pnpm v7 的支持。
|
|
21
21
|
|
|
@@ -67,7 +67,7 @@ pnpm run command --options
|
|
|
67
67
|
|
|
68
68
|
- husky 升级至 v8
|
|
69
69
|
|
|
70
|
-
使用 `
|
|
70
|
+
使用 `pnpm dlx @bleedingdev/modern-js-create` 创建项目时,husky 会默认安装 v8 版本,并移除 `package.json` 中 husky 的配置,使用 `.husky` 文件夹的形式管理 husky 配置。
|
|
71
71
|
|
|
72
72
|
在初次安装依赖时需要执行 `npx husky install` 进行 husky 初始化,默认项目会在 prepare 命令中完成,如果 husky 配置未生效,可通过手动执行完成 husky 配置。
|
|
73
73
|
|
|
@@ -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 依赖保持轻量;当需要用到额外功能时,你可以通过 ultramodern new 命令一键开启,并自动安装相关依赖。
|
|
90
90
|
|
|
91
|
-

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

|
|
101
101
|
|
|
102
|
-
目前,你可以通过 `
|
|
102
|
+
目前,你可以通过 `ultramodern 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 ultramodern routes` 命令即可在 `dist/routes-inspect.json` 文件中生成完整的路由结构分析报告。
|
|
342
342
|
|
|
343
343
|
报告中会显示每个路由的路径、组件文件、数据加载器、错误边界、Loading 组件等完整信息,帮助开发者快速了解项目的路由配置,快速定位和排查路由相关问题。结构化的 JSON 格式也便于 AI agent 理解和分析路由结构,提升 AI 辅助开发的效率。
|
|
344
344
|
|
|
@@ -38,8 +38,7 @@ nvm use 22
|
|
|
38
38
|
### 安装 pnpm
|
|
39
39
|
|
|
40
40
|
```bash
|
|
41
|
-
|
|
42
|
-
corepack enable
|
|
41
|
+
mise install
|
|
43
42
|
```
|
|
44
43
|
|
|
45
44
|
### 安装依赖
|
|
@@ -124,7 +123,7 @@ pnpm run reset
|
|
|
124
123
|
|
|
125
124
|
如果你进行了 bugfix,或者添加了需要测试的代码,请添加一些测试代码。
|
|
126
125
|
|
|
127
|
-
|
|
126
|
+
Modern.js 仓库的单元测试统一使用 [Rstest](https://rstest.rs/)。你可以在 `<PACKAGE_DIR>/tests` 文件夹中添加测试用例,测试语法基于 Rstest。
|
|
128
127
|
|
|
129
128
|
### 运行单元测试
|
|
130
129
|
|
|
@@ -24,8 +24,8 @@ Modern.js 遵循 [Semantic Versioning](https://semver.org/lang/zh-CN/) 语义化
|
|
|
24
24
|
|
|
25
25
|
## 版本升级
|
|
26
26
|
|
|
27
|
-
当你需要升级项目中的 Modern.js 版本时,可以使用 `
|
|
27
|
+
当你需要升级项目中的 Modern.js 版本时,可以使用 `ultramodern upgrade` 命令,参考 [版本升级](/guides/get-started/upgrade)。
|
|
28
28
|
|
|
29
29
|
```bash
|
|
30
|
-
npx
|
|
30
|
+
npx ultramodern upgrade
|
|
31
31
|
```
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
##
|
|
1
|
+
## ultramodern deploy
|
|
2
2
|
|
|
3
|
-
`
|
|
3
|
+
`ultramodern deploy` 命令,用于生成部署平台需要的产物。
|
|
4
4
|
|
|
5
5
|
```bash
|
|
6
|
-
Usage:
|
|
6
|
+
Usage: ultramodern deploy [options]
|
|
7
7
|
|
|
8
8
|
Options:
|
|
9
9
|
-c --config <config> 指定配置文件路径,可以为相对路径或绝对路径
|
|
@@ -1,64 +1,48 @@
|
|
|
1
|
-
|
|
1
|
+
UltraModern.js 提供 BleedingDev create 包来创建项目,不需要全局安装,直接使用 `pnpm dlx` 按需运行即可。
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
你可以在当前已有的空目录中初始化项目:
|
|
4
4
|
|
|
5
5
|
```bash
|
|
6
6
|
mkdir myapp && cd myapp
|
|
7
|
-
|
|
7
|
+
pnpm dlx @bleedingdev/modern-js-create .
|
|
8
8
|
```
|
|
9
9
|
|
|
10
10
|
也可以直接用新目录创建项目:
|
|
11
11
|
|
|
12
12
|
```bash
|
|
13
|
-
|
|
14
|
-
```
|
|
15
|
-
|
|
16
|
-
初始化 TanStack Router 模板:
|
|
17
|
-
|
|
18
|
-
```bash
|
|
19
|
-
npx @modern-js/create@latest myapp --router tanstack
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
初始化 Tailwind CSS v4 模板:
|
|
23
|
-
|
|
24
|
-
```bash
|
|
25
|
-
npx @modern-js/create@latest myapp --tailwind
|
|
13
|
+
pnpm dlx @bleedingdev/modern-js-create myapp
|
|
26
14
|
```
|
|
27
15
|
|
|
28
|
-
|
|
16
|
+
默认会初始化 TanStack Router。如需强制使用 React Router 兼容路径:
|
|
29
17
|
|
|
30
18
|
```bash
|
|
31
|
-
|
|
19
|
+
pnpm dlx @bleedingdev/modern-js-create myapp --router react-router
|
|
32
20
|
```
|
|
33
21
|
|
|
34
|
-
|
|
22
|
+
默认会初始化 Tailwind CSS v4 模板。如需关闭:
|
|
35
23
|
|
|
36
24
|
```bash
|
|
37
|
-
|
|
25
|
+
pnpm dlx @bleedingdev/modern-js-create myapp --no-tailwind
|
|
38
26
|
```
|
|
39
27
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
```bash
|
|
43
|
-
npx @modern-js/create@latest myapp --bff-runtime effect
|
|
44
|
-
```
|
|
28
|
+
默认会初始化 Effect HttpApi BFF 模板。
|
|
45
29
|
|
|
46
30
|
初始化带 Hono 运行时的 BFF 模板:
|
|
47
31
|
|
|
48
32
|
```bash
|
|
49
|
-
|
|
33
|
+
pnpm dlx @bleedingdev/modern-js-create myapp --bff-runtime hono
|
|
50
34
|
```
|
|
51
35
|
|
|
52
36
|
使用 workspace 协议依赖初始化(用于在本地 monorepo 中联调未发布的 Modern.js 包):
|
|
53
37
|
|
|
54
38
|
```bash
|
|
55
|
-
|
|
39
|
+
pnpm dlx @bleedingdev/modern-js-create myapp --workspace
|
|
56
40
|
```
|
|
57
41
|
|
|
58
|
-
|
|
42
|
+
BleedingDev create 包会直接创建应用,不再提供问答界面:
|
|
59
43
|
|
|
60
44
|
```bash
|
|
61
|
-
🚀 欢迎使用
|
|
45
|
+
🚀 欢迎使用 UltraModern.js
|
|
62
46
|
|
|
63
47
|
📦 正在创建项目 "myapp"...
|
|
64
48
|
|
|
@@ -101,17 +85,35 @@ npx @modern-js/create@latest myapp --router tanstack --bff-runtime effect --work
|
|
|
101
85
|
└── tsconfig.json
|
|
102
86
|
```
|
|
103
87
|
|
|
104
|
-
|
|
88
|
+
默认会生成 Tailwind CSS v4;传入 `--no-tailwind` 时会省略 `postcss.config.mjs`、`tailwind.config.ts` 和 Tailwind 导入。
|
|
105
89
|
|
|
106
|
-
|
|
90
|
+
默认会在 `modern.config.ts` 中启用 `@modern-js/plugin-bff`,生成 `api/effect/index.ts` 与 `shared/effect/api.ts`,并将 `bff.runtimeFramework` 设置为 `effect`。
|
|
107
91
|
当启用 `--bff-runtime hono` 时,会在 `modern.config.ts` 中启用 `@modern-js/plugin-bff`,生成 `api/lambda/hello.ts`,并将 `bff.runtimeFramework` 设置为 `hono`。
|
|
108
92
|
当启用 `--workspace` 时,`@modern-js/*` 依赖会使用 `workspace:*` 版本,便于本地 monorepo 联调。
|
|
109
93
|
|
|
110
|
-
|
|
111
|
-
|
|
94
|
+
它默认创建一个简单、可上线的 UltraModern 应用,并安装已发布的
|
|
95
|
+
BleedingDev 包别名:
|
|
112
96
|
|
|
113
97
|
```bash
|
|
114
98
|
pnpm dlx @bleedingdev/modern-js-create myapp
|
|
115
99
|
```
|
|
116
100
|
|
|
117
|
-
|
|
101
|
+
只有在需要多个独立归属的 vertical 时,才显式创建 SuperApp workspace:
|
|
102
|
+
|
|
103
|
+
```bash
|
|
104
|
+
pnpm dlx @bleedingdev/modern-js-create my-super-app --ultramodern-workspace
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
在已生成的 SuperApp workspace 根目录中,可以就地添加业务
|
|
108
|
+
MicroVertical:
|
|
109
|
+
|
|
110
|
+
```bash
|
|
111
|
+
pnpm dlx @bleedingdev/modern-js-create transportation --vertical
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
`--vertical` 会修改当前 workspace:新增 vertical 包,并写入 topology、
|
|
115
|
+
ownership 元数据、shell Module Federation、开发 overlays、包依赖、生成契约、
|
|
116
|
+
路由归属 i18n、CSS 隔离,以及 Effect BFF/client surface。
|
|
117
|
+
|
|
118
|
+
底层 `--ultramodern-package-*` 参数只保留给发布工程和本地包源测试使用。
|
|
119
|
+
BleedingDev 包通过 GitHub Actions trusted publishing 发布;不要从开发机器手动发布。
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
##
|
|
1
|
+
## ultramodern serve
|
|
2
2
|
|
|
3
|
-
`
|
|
3
|
+
`ultramodern serve` 命令用于在生产环境下启动 UltraModern.js 工程, 也可以用于在本地预览生产环境构建的产物。注意你需要提前执行 [`build`](/apis/app/commands#ultramodern-build) 命令构建出对应产物。
|
|
4
4
|
|
|
5
5
|
```bash
|
|
6
|
-
Usage:
|
|
6
|
+
Usage: ultramodern serve [options]
|
|
7
7
|
|
|
8
8
|
Options:
|
|
9
9
|
-c --config <config> 指定配置文件路径,可以为相对路径或绝对路径
|
|
@@ -25,4 +25,4 @@ export default defineConfig({
|
|
|
25
25
|
- 设置为 `'hono'` 时,仅从 `api/lambda/**` 的文件约定处理函数运行 BFF。
|
|
26
26
|
|
|
27
27
|
两种运行时之间没有隐式回退,应用需要显式选择其一。
|
|
28
|
-
|
|
28
|
+
生成的 UltraModern 应用默认使用 Effect 分支;仅在需要兼容运行时时设置 `runtimeFramework: 'hono'`。
|
|
@@ -86,8 +86,8 @@ export default defineConfig(({ env, command }) => ({
|
|
|
86
86
|
该函数接受以下入参:
|
|
87
87
|
|
|
88
88
|
- `env`:对应 `process.env.NODE_ENV` 的值。
|
|
89
|
-
- 当运行 `
|
|
90
|
-
- 当运行 `
|
|
89
|
+
- 当运行 `ultramodern dev` 时,`env` 的值为 `development`。
|
|
90
|
+
- 当运行 `ultramodern build` 或 `ultramodern serve` 时,`env` 的值为 `production`。
|
|
91
91
|
- `command`:对应当前运行的命令,如 `dev`、`build`、`serve`。
|
|
92
92
|
|
|
93
93
|
#### 导出异步函数
|
|
@@ -118,7 +118,7 @@ Modern.js 命令行支持通过 `--config` 选项来指定配置文件的名称
|
|
|
118
118
|
{
|
|
119
119
|
"scripts": {
|
|
120
120
|
"dev": "modern modern",
|
|
121
|
-
"build": "
|
|
121
|
+
"build": "ultramodern 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
|
+
$ ultramodern 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` 文件仅会在执行 `ultramodern dev` 命令时被加载,当执行 `ultramodern 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
|
|
|
@@ -15,10 +15,13 @@ title: API 参考
|
|
|
15
15
|
| `language` | `string` | 当前语言代码 |
|
|
16
16
|
| `changeLanguage` | `(lang: string) => Promise<void>` | 切换语言 |
|
|
17
17
|
| `supportedLanguages` | `string[]` | 支持的语言列表(来自 `localeDetection.languages`) |
|
|
18
|
+
| `localisedUrls` | `boolean \| Record<string, Record<string, string>>` | 来自 `localeDetection.localisedUrls` 的本地化 URL 映射 |
|
|
18
19
|
| `isLanguageSupported` | `(lang: string) => boolean` | 检查语言是否在支持列表中 |
|
|
19
20
|
| `isResourcesReady` | `boolean` | 当前语言的翻译资源是否已加载完成 |
|
|
20
21
|
| `i18nInstance` | `I18nInstance` | i18next 实例(用于高级场景) |
|
|
21
22
|
|
|
23
|
+
启用 `localePathRedirect` 且省略 `localisedUrls` 时,Modern.js 会将本地化 URL 路径视为已启用。除非设置 `localisedUrls: false`,否则路由生成仍要求每个可本地化路径都为所有已配置语言提供路径。
|
|
24
|
+
|
|
22
25
|
### 基本用法
|
|
23
26
|
|
|
24
27
|
```tsx
|
|
@@ -91,7 +94,7 @@ function MyComponent() {
|
|
|
91
94
|
| `children` | `React.ReactNode` | 是 | 链接内容 |
|
|
92
95
|
| `replace` | `boolean` | 否 | 使用 `history.replace` 而非 `push` |
|
|
93
96
|
| `state` | `any` | 否 | 传递给目标路由的状态 |
|
|
94
|
-
| 其他 Link props | — | 否 |
|
|
97
|
+
| 其他 Link props | — | 否 | 有可用路由时会传递给当前路由的 Link 组件 |
|
|
95
98
|
|
|
96
99
|
### 用法
|
|
97
100
|
|
|
@@ -48,6 +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>>` | 启用 `localePathRedirect` 时为 `true` | 本地化路由路径映射。每个可本地化路由都必须为所有已配置语言提供路径。设置为 `false` 时只保留语言前缀,不翻译路径片段。 |
|
|
51
52
|
| `i18nextDetector` | `boolean` | `false` | 启用 i18next 检测器(Cookie / Header 等) |
|
|
52
53
|
| `detection` | `LanguageDetectorOptions` | — | i18next 检测器详细配置,见[语言检测](./locale-detection.md) |
|
|
53
54
|
| `ignoreRedirectRoutes` | `string[] \| Function` | — | 跳过重定向的路由,见[语言检测](./locale-detection.md#ignoreredirectroutes) |
|
|
@@ -113,7 +113,7 @@ i18nPlugin({
|
|
|
113
113
|
|
|
114
114
|
## ignoreRedirectRoutes
|
|
115
115
|
|
|
116
|
-
|
|
116
|
+
指定哪些额外路径跳过语言路径重定向。Modern.js 会自动跳过服务端 API 路由和 BFF 前缀,包括配置的 `bff.prefix`。`ignoreRedirectRoutes` 适用于其他不需要语言前缀的非 API 业务路径。
|
|
117
117
|
|
|
118
118
|
**写法一:字符串数组**(支持精确匹配和前缀匹配)
|
|
119
119
|
|
|
@@ -32,7 +32,48 @@ i18nPlugin({
|
|
|
32
32
|
| `/en/about` | 正常访问,语言为 `en` |
|
|
33
33
|
| `/zh/about` | 正常访问,语言为 `zh` |
|
|
34
34
|
|
|
35
|
-
|
|
35
|
+
API 和 BFF 前缀会自动跳过,因此服务端 API 路由不需要语言前缀,也不需要配置 `localisedUrls`。如果还有其他业务路径不应该重定向,可以使用 `ignoreRedirectRoutes`,详见[语言检测 → ignoreRedirectRoutes](./locale-detection.md#ignoreredirectroutes)。
|
|
36
|
+
|
|
37
|
+
## 本地化 URL 路径
|
|
38
|
+
|
|
39
|
+
启用 `localePathRedirect` 后,`localisedUrls` 默认启用。每个可本地化的路由路径都必须为所有已配置语言提供 URL。如果向 `languages` 中新增语言,Modern.js 会在路由生成阶段失败,直到每个 `localisedUrls` 条目都补齐该语言。
|
|
40
|
+
|
|
41
|
+
`localisedUrls` 同时适用于 React Router 和 TanStack Router 项目的约定式路由。不要为 API 路由、BFF 前缀或配置的 `bff.prefix` 添加本地化 URL 条目;这些路径会自动排除在语言重定向之外。
|
|
42
|
+
|
|
43
|
+
```ts
|
|
44
|
+
// modern.config.ts
|
|
45
|
+
i18nPlugin({
|
|
46
|
+
localeDetection: {
|
|
47
|
+
localePathRedirect: true,
|
|
48
|
+
languages: ['en', 'cs'],
|
|
49
|
+
fallbackLanguage: 'en',
|
|
50
|
+
localisedUrls: {
|
|
51
|
+
'/terms-of-service': {
|
|
52
|
+
en: '/terms-of-service',
|
|
53
|
+
cs: '/podminky-pouzivani',
|
|
54
|
+
},
|
|
55
|
+
'/products': {
|
|
56
|
+
en: '/products',
|
|
57
|
+
cs: '/produkty',
|
|
58
|
+
},
|
|
59
|
+
'/products/:slug': {
|
|
60
|
+
en: '/products/:slug',
|
|
61
|
+
cs: '/produkty/:slug',
|
|
62
|
+
},
|
|
63
|
+
},
|
|
64
|
+
},
|
|
65
|
+
});
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
**效果:**
|
|
69
|
+
|
|
70
|
+
| 访问路径 | 结果 |
|
|
71
|
+
| --- | --- |
|
|
72
|
+
| `/terms-of-service` | 重定向到 `/en/terms-of-service` |
|
|
73
|
+
| `/cs/terms-of-service` | 重定向到 `/cs/podminky-pouzivani` |
|
|
74
|
+
| `/cs/podminky-pouzivani` | 正常访问,语言为 `cs` |
|
|
75
|
+
|
|
76
|
+
只有在希望保留语言前缀、但不翻译路径片段时,才设置 `localisedUrls: false`。
|
|
36
77
|
|
|
37
78
|
## 路由配置
|
|
38
79
|
|
|
@@ -131,4 +172,4 @@ function Navigation() {
|
|
|
131
172
|
<I18nLink to="/en/about">关于</I18nLink>
|
|
132
173
|
```
|
|
133
174
|
|
|
134
|
-
`I18nLink`
|
|
175
|
+
`I18nLink` 会使用当前启用的 Modern.js 路由。在 React Router 项目中渲染 React Router 的 `Link`;在 TanStack Router 项目中通过 TanStack Router 导航。完整 Props 类型见 [API 参考](./api.md#i18nlink-组件)。
|
|
@@ -15,11 +15,11 @@ sidebar_position: 15
|
|
|
15
15
|
|
|
16
16
|
## 构建部署产物
|
|
17
17
|
|
|
18
|
-
执行 `
|
|
18
|
+
执行 `ultramodern deploy` 命令将自动输出部署产物。此过程包括优化 Bundler 构建产物及产物依赖,检测当前部署平台,并自动生成可以在该平台运行的产物。
|
|
19
19
|
如果你希望在本地生成并测试特定部署平台的产物,可以通过设置环境变量来指定平台:
|
|
20
20
|
|
|
21
21
|
```bash
|
|
22
|
-
MODERNJS_DEPLOY=netlify npx
|
|
22
|
+
MODERNJS_DEPLOY=netlify npx ultramodern deploy
|
|
23
23
|
```
|
|
24
24
|
|
|
25
25
|
:::info
|
|
@@ -35,10 +35,10 @@ MODERNJS_DEPLOY=netlify npx modern deploy
|
|
|
35
35
|
你可以使用以下命令构建项目:
|
|
36
36
|
|
|
37
37
|
```bash
|
|
38
|
-
npx
|
|
38
|
+
npx ultramodern deploy
|
|
39
39
|
```
|
|
40
40
|
|
|
41
|
-
当执行 `
|
|
41
|
+
当执行 `ultramodern 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 && ultramodern 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 && ultramodern 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 = "ultramodern 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 = "ultramodern 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 && ultramodern 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": "ultramodern 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 && ultramodern 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 ultramodern 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 ultramodern 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`:执行 `ultramodern build`、`ultramodern serve` 命令时的默认值。
|
|
20
|
+
- `development`:执行 `ultramodern dev` 命令时的默认值,同时也是其他所有情况下的默认值。
|
|
21
21
|
|
|
22
22
|
### MODERN_ENV
|
|
23
23
|
|
|
@@ -270,7 +270,7 @@ Modern.js 会自动查找并加载:
|
|
|
270
270
|
|
|
271
271
|
:::info
|
|
272
272
|
|
|
273
|
-
当前路由结构可以通过 [`
|
|
273
|
+
当前路由结构可以通过 [`ultramodern 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 ultramodern routes
|
|
322
322
|
```
|
|
323
323
|
|
|
324
324
|
该命令会在 `dist/routes-inspect.json` 文件中生成最终的路由结构,帮助你了解合并后的完整路由信息。
|
|
@@ -1 +1 @@
|
|
|
1
|
-
["
|
|
1
|
+
["rstest", "playwright"]
|
|
@@ -26,10 +26,10 @@ Modern.js 开发环境和生产环境的 Web 服务器流程是完全同构的
|
|
|
26
26
|
|
|
27
27
|
Modern.js 支持在任何 Node.js 环境运行构建产物。在 CI 环境中,通常情况下已经安装了应用全部的依赖。
|
|
28
28
|
|
|
29
|
-
你可以执行 [`
|
|
29
|
+
你可以执行 [`ultramodern build`](/apis/app/commands#ultramodern-build) 来构建应用,执行 [`ultramodern serve`](/apis/app/commands#ultramodern-serve) 命令来运行 Web 服务器,启动 UltraModern.js 应用。
|
|
30
30
|
|
|
31
31
|
## 在生产环境中运行
|
|
32
32
|
|
|
33
33
|
在部署到生产环境时,产物体积应该尽可能小,而上述在 CI 中运行的方案,会保留原项目的所有产物。因此在生产环境,不推荐通过上述命令运行应用。
|
|
34
34
|
|
|
35
|
-
|
|
35
|
+
UltraModern.js 提供了独立的部署方案,当运行 [`ultramodern deploy`](/apis/app/commands#ultramodern-deploy) 命令时,产物中会包含可运行 Web 服务器的入口文件。
|
|
@@ -25,7 +25,7 @@ import DebugApp from '@site-docs/components/debug-app';
|
|
|
25
25
|
|
|
26
26
|
## 使用配置
|
|
27
27
|
|
|
28
|
-
通过 `@modern-js
|
|
28
|
+
通过 `@bleedingdev/modern-js-create` 创建的 UltraModern.js 项目中,会默认生成 `modern.config.ts` 文件。
|
|
29
29
|
|
|
30
30
|
你可以通过该配置文件修改配置,覆盖 Modern.js 的默认行为。例如添加如下配置,开启 SSR:
|
|
31
31
|
|
|
@@ -46,7 +46,7 @@ export default defineConfig({
|
|
|
46
46
|
|
|
47
47
|
在新创建的工程中,默认会安装 `@modern-js/app-tools` npm 包,它是 Modern.js 框架的核心包,主要提供以下能力:
|
|
48
48
|
|
|
49
|
-
- 提供 `
|
|
49
|
+
- 提供 `ultramodern dev`, `ultramodern build` 等常用的 CLI 命令。
|
|
50
50
|
- 集成 Rsbuild,提供构建能力。
|
|
51
51
|
- 集成 Modern.js Server,提供开发和生产服务器相关能力。
|
|
52
52
|
|
|
@@ -18,13 +18,13 @@ Modern.js 底层的 Rsbuild 支持构建 Vue 应用,如果你需要使用 Vue
|
|
|
18
18
|
|
|
19
19
|
Modern.js 提供两套一方路由方案:
|
|
20
20
|
|
|
21
|
-
- 默认使用 [
|
|
22
|
-
-
|
|
21
|
+
- 默认使用 [TanStack Router](https://tanstack.com/router),通过 `@modern-js/plugin-tanstack/runtime` 导出 API。
|
|
22
|
+
- 兼容 [React Router 7](https://reactrouter.com/en/main),通过 `@modern-js/runtime/router` 导出 API。
|
|
23
23
|
|
|
24
|
-
|
|
24
|
+
创建 UltraModern 项目时,默认会包含 TanStack Router:
|
|
25
25
|
|
|
26
26
|
```bash
|
|
27
|
-
|
|
27
|
+
pnpm dlx @bleedingdev/modern-js-create myapp
|
|
28
28
|
```
|
|
29
29
|
|
|
30
30
|
Modern.js 支持约定式路由、自控式路由或其他路由方案,请参考 [页面入口](/guides/concept/entries) 进行选择。
|
|
@@ -84,6 +84,12 @@ Modern.js 可以与社区中任意的 React 组件库搭配使用,比如 [MUI]
|
|
|
84
84
|
|
|
85
85
|
Modern.js 支持使用 [Storybook](https://storybook.js.org/) 来开发 UI 组件。该功能为可选功能,请参考 [使用 Storybook](/guides/basic-features/debug/using-storybook) 启用。
|
|
86
86
|
|
|
87
|
+
## 测试框架
|
|
88
|
+
|
|
89
|
+
Modern.js 推荐使用 [Rstest](https://rstest.rs/) 编写单元测试和组件测试。Rstest 基于 Rspack 构建,启动和执行速度快,并且可以通过 [`@modern-js/adapter-rstest`](/guides/basic-features/testing/rstest) 复用 Modern.js 的应用配置。
|
|
90
|
+
|
|
91
|
+
如果需要编写端到端(E2E)测试,可以使用 [Playwright](/guides/basic-features/testing/playwright)。
|
|
92
|
+
|
|
87
93
|
## Node.js 框架
|
|
88
94
|
|
|
89
95
|
import TechStackNodeFramework from '@site-docs/components/tech-stack-node-framework';
|