@modern-js/main-doc 3.9.2 → 3.10.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/hooks/api/lambda.mdx +2 -1
- package/docs/en/apis/app/hooks/config/html.mdx +1 -0
- package/docs/en/apis/app/hooks/config/mock.mdx +1 -0
- package/docs/en/apis/app/hooks/config/public.mdx +1 -0
- package/docs/en/apis/app/hooks/config/upload.mdx +2 -3
- package/docs/en/apis/app/hooks/modern-config.mdx +1 -0
- package/docs/en/apis/app/hooks/shared.mdx +1 -0
- package/docs/en/apis/app/hooks/src/modern.runtime.mdx +1 -0
- package/docs/en/apis/app/hooks/src/routes.mdx +1 -0
- package/docs/en/apis/app/hooks/src/server.mdx +2 -1
- package/docs/en/apis/app/runtime/bff/use-hono-context.mdx +1 -0
- package/docs/en/apis/app/runtime/core/create-root.mdx +4 -1
- package/docs/en/apis/app/runtime/core/render.mdx +6 -2
- package/docs/en/apis/app/runtime/core/runtime-context.mdx +17 -17
- package/docs/en/apis/app/runtime/router/router.mdx +9 -6
- package/docs/en/apis/app/runtime/ssr/no-ssr.mdx +1 -0
- package/docs/en/apis/app/runtime/utility/head.mdx +1 -0
- package/docs/en/apis/app/runtime/utility/loadable.mdx +1 -0
- package/docs/en/community/blog/v3-release-note.mdx +36 -27
- package/docs/en/community/contributing-guide.mdx +15 -33
- package/docs/en/components/default-browserslist.mdx +0 -1
- package/docs/en/components/deploy-command.mdx +1 -1
- package/docs/en/components/deploy.mdx +1 -1
- package/docs/en/components/entry-scan-logic.mdx +1 -1
- package/docs/en/components/init-app.mdx +9 -3
- package/docs/en/components/international/custom-instance-code.mdx +0 -1
- package/docs/en/components/micro-runtime-config.mdx +12 -9
- package/docs/en/components/nodeVersion.mdx +2 -2
- package/docs/en/components/rsc-deploy-tip.mdx +0 -1
- package/docs/en/components/ssr-monitor.mdx +1 -1
- package/docs/en/configure/app/bff/cross-project.mdx +2 -2
- package/docs/en/configure/app/bff/prefix.mdx +1 -1
- package/docs/en/configure/app/dev/lazy-compilation.mdx +17 -1
- package/docs/en/configure/app/dev/start-url.mdx +0 -1
- package/docs/en/configure/app/output/css-modules.mdx +1 -5
- package/docs/en/configure/app/output/disable-svgr.mdx +4 -0
- package/docs/en/configure/app/output/dist-path.mdx +0 -1
- package/docs/en/configure/app/output/inline-scripts.mdx +1 -2
- package/docs/en/configure/app/output/inline-styles.mdx +1 -2
- package/docs/en/configure/app/output/split-route-chunks.mdx +1 -1
- package/docs/en/configure/app/output/ssg.mdx +1 -1
- package/docs/en/configure/app/output/ssgByEntries.mdx +1 -0
- package/docs/en/configure/app/output/svg-default-export.mdx +4 -0
- package/docs/en/configure/app/performance/chunk-split.mdx +1 -4
- package/docs/en/configure/app/runtime/plugins.mdx +6 -4
- package/docs/en/configure/app/server/rsc.mdx +1 -1
- package/docs/en/configure/app/server/ssr.mdx +7 -8
- package/docs/en/configure/app/server/tsconfig-path.mdx +2 -2
- package/docs/en/configure/app/tools/less.mdx +94 -19
- package/docs/en/configure/app/tools/sass.mdx +87 -18
- package/docs/en/configure/app/tools/svgr.mdx +93 -0
- package/docs/en/configure/app/usage.mdx +1 -5
- package/docs/en/guides/advanced-features/bff/cross-project.mdx +5 -4
- package/docs/en/guides/advanced-features/compatibility.mdx +0 -1
- package/docs/en/guides/advanced-features/international/advanced.mdx +1 -1
- package/docs/en/guides/advanced-features/international/api.mdx +34 -28
- package/docs/en/guides/advanced-features/international/best-practices.mdx +15 -15
- package/docs/en/guides/advanced-features/international/configuration.mdx +37 -37
- package/docs/en/guides/advanced-features/international/locale-detection.mdx +37 -28
- package/docs/en/guides/advanced-features/international/resource-loading.mdx +19 -17
- package/docs/en/guides/advanced-features/international/routing.mdx +8 -6
- package/docs/en/guides/advanced-features/international.mdx +8 -8
- package/docs/en/guides/advanced-features/server-monitor/logger.mdx +5 -5
- package/docs/en/guides/advanced-features/server-monitor/metrics.mdx +8 -8
- package/docs/en/guides/advanced-features/server-monitor/monitors.mdx +1 -3
- package/docs/en/guides/advanced-features/source-build.mdx +1 -1
- package/docs/en/guides/advanced-features/web-server.mdx +3 -3
- package/docs/en/guides/basic-features/data/data-fetch.mdx +1 -3
- package/docs/en/guides/basic-features/data/data-write.mdx +24 -28
- package/docs/en/guides/basic-features/debug/mock.mdx +2 -2
- package/docs/en/guides/basic-features/debug/using-storybook.mdx +5 -6
- package/docs/en/guides/basic-features/html.mdx +2 -3
- package/docs/en/guides/basic-features/output-files.mdx +1 -1
- package/docs/en/guides/basic-features/render/overview.mdx +12 -12
- package/docs/en/guides/basic-features/render/rsc.mdx +16 -9
- package/docs/en/guides/basic-features/render/ssr-cache.mdx +5 -5
- package/docs/en/guides/basic-features/render/ssr.mdx +8 -12
- package/docs/en/guides/basic-features/render/streaming-ssr.mdx +2 -1
- package/docs/en/guides/basic-features/routes/config-routes.mdx +60 -59
- package/docs/en/guides/basic-features/static-assets/svg-assets.mdx +29 -17
- package/docs/en/guides/basic-features/testing/playwright.mdx +14 -8
- package/docs/en/guides/basic-features/testing/rstest.mdx +6 -4
- package/docs/en/guides/get-started/ai-coding-agents.mdx +6 -6
- package/docs/en/guides/get-started/introduction.mdx +0 -1
- package/docs/en/guides/topic-detail/module-federation/deploy.mdx +2 -2
- package/docs/en/guides/topic-detail/module-federation/introduce.mdx +0 -1
- package/docs/en/guides/upgrade/config.mdx +12 -0
- package/docs/en/guides/upgrade/other.mdx +4 -4
- package/docs/en/guides/upgrade/tailwindcss.mdx +0 -1
- package/docs/en/guides/upgrade/web-server.md +34 -17
- package/docs/en/index.md +1 -0
- package/docs/en/plugin/cli-plugins/api.mdx +23 -23
- package/docs/en/plugin/cli-plugins/life-cycle.mdx +2 -0
- package/docs/en/plugin/introduction.mdx +6 -6
- package/docs/en/plugin/official/cli-plugins/plugin-bff.mdx +1 -1
- package/docs/en/plugin/official/cli-plugins/plugin-ssg.mdx +1 -1
- package/docs/en/plugin/plugin-system.mdx +19 -26
- package/docs/en/plugin/runtime-plugins/life-cycle.mdx +2 -0
- package/docs/en/plugin/server-plugins/api.mdx +11 -14
- package/docs/en/plugin/server-plugins/life-cycle.mdx +2 -0
- package/docs/zh/apis/app/hooks/api/lambda.mdx +1 -1
- package/docs/zh/apis/app/hooks/config/html.mdx +1 -0
- package/docs/zh/apis/app/hooks/config/mock.mdx +1 -0
- package/docs/zh/apis/app/hooks/config/public.mdx +1 -0
- package/docs/zh/apis/app/hooks/config/upload.mdx +2 -3
- package/docs/zh/apis/app/hooks/modern-config.mdx +1 -0
- package/docs/zh/apis/app/hooks/shared.mdx +1 -0
- package/docs/zh/apis/app/hooks/src/modern.runtime.mdx +1 -0
- package/docs/zh/apis/app/hooks/src/routes.mdx +1 -0
- package/docs/zh/apis/app/hooks/src/server.mdx +2 -1
- package/docs/zh/apis/app/runtime/bff/use-hono-context.mdx +1 -1
- package/docs/zh/apis/app/runtime/core/create-root.mdx +4 -1
- package/docs/zh/apis/app/runtime/core/render.mdx +6 -3
- package/docs/zh/apis/app/runtime/core/runtime-context.mdx +17 -17
- package/docs/zh/apis/app/runtime/router/router.mdx +10 -6
- package/docs/zh/apis/app/runtime/ssr/no-ssr.mdx +1 -0
- package/docs/zh/apis/app/runtime/utility/head.mdx +1 -0
- package/docs/zh/apis/app/runtime/utility/loadable.mdx +1 -0
- package/docs/zh/community/blog/v3-release-note.mdx +38 -29
- package/docs/zh/community/contributing-guide.mdx +16 -34
- package/docs/zh/components/default-browserslist.mdx +0 -1
- package/docs/zh/components/deploy-command.mdx +1 -1
- package/docs/zh/components/deploy.mdx +1 -1
- package/docs/zh/components/entry-scan-logic.mdx +1 -1
- package/docs/zh/components/init-app.mdx +9 -3
- package/docs/zh/components/international/custom-instance-code.mdx +0 -1
- package/docs/zh/components/international/install-command.mdx +0 -1
- package/docs/zh/components/micro-runtime-config.mdx +12 -9
- package/docs/zh/components/nodeVersion.mdx +2 -2
- package/docs/zh/components/rsc-deploy-tip.mdx +0 -1
- package/docs/zh/components/ssr-monitor.mdx +1 -1
- package/docs/zh/configure/app/bff/cross-project.mdx +2 -2
- package/docs/zh/configure/app/bff/prefix.mdx +1 -1
- package/docs/zh/configure/app/dev/lazy-compilation.mdx +17 -1
- package/docs/zh/configure/app/html/crossorigin.mdx +0 -1
- package/docs/zh/configure/app/html/favicon.mdx +0 -1
- package/docs/zh/configure/app/output/convert-to-rem.mdx +0 -1
- package/docs/zh/configure/app/output/css-modules.mdx +1 -5
- package/docs/zh/configure/app/output/disable-svgr.mdx +4 -0
- package/docs/zh/configure/app/output/inline-scripts.mdx +1 -2
- package/docs/zh/configure/app/output/inline-styles.mdx +1 -2
- package/docs/zh/configure/app/output/source-map.mdx +0 -2
- package/docs/zh/configure/app/output/split-route-chunks.mdx +1 -1
- package/docs/zh/configure/app/output/ssg.mdx +1 -0
- package/docs/zh/configure/app/output/ssgByEntries.mdx +1 -1
- package/docs/zh/configure/app/output/svg-default-export.mdx +4 -0
- package/docs/zh/configure/app/performance/chunk-split.mdx +1 -4
- package/docs/zh/configure/app/resolve/dedupe.mdx +0 -1
- package/docs/zh/configure/app/runtime/plugins.mdx +6 -4
- package/docs/zh/configure/app/server/rsc.mdx +1 -1
- package/docs/zh/configure/app/server/ssr.mdx +6 -7
- package/docs/zh/configure/app/server/tsconfig-path.mdx +2 -2
- package/docs/zh/configure/app/tools/less.mdx +93 -19
- package/docs/zh/configure/app/tools/sass.mdx +87 -16
- package/docs/zh/configure/app/tools/svgr.mdx +93 -0
- package/docs/zh/configure/app/usage.mdx +1 -5
- package/docs/zh/guides/advanced-features/bff.mdx +1 -0
- package/docs/zh/guides/advanced-features/international/advanced.mdx +1 -1
- package/docs/zh/guides/advanced-features/international/api.mdx +28 -27
- package/docs/zh/guides/advanced-features/international/best-practices.mdx +15 -15
- package/docs/zh/guides/advanced-features/international/configuration.mdx +38 -36
- package/docs/zh/guides/advanced-features/international/locale-detection.mdx +37 -28
- package/docs/zh/guides/advanced-features/international/resource-loading.mdx +20 -16
- package/docs/zh/guides/advanced-features/international/routing.mdx +6 -4
- package/docs/zh/guides/advanced-features/international.mdx +9 -9
- package/docs/zh/guides/advanced-features/server-monitor/logger.mdx +4 -6
- package/docs/zh/guides/advanced-features/server-monitor/metrics.mdx +9 -10
- package/docs/zh/guides/advanced-features/source-build.mdx +1 -1
- package/docs/zh/guides/advanced-features/web-server.mdx +3 -3
- package/docs/zh/guides/basic-features/data/data-fetch.mdx +1 -3
- package/docs/zh/guides/basic-features/data/data-write.mdx +25 -31
- package/docs/zh/guides/basic-features/debug/mock.mdx +2 -2
- package/docs/zh/guides/basic-features/debug/using-storybook.mdx +5 -5
- package/docs/zh/guides/basic-features/env-vars.mdx +0 -1
- package/docs/zh/guides/basic-features/html.mdx +2 -3
- package/docs/zh/guides/basic-features/render/overview.mdx +12 -13
- package/docs/zh/guides/basic-features/render/rsc.mdx +16 -9
- package/docs/zh/guides/basic-features/render/ssr.mdx +8 -17
- package/docs/zh/guides/basic-features/routes/config-routes.mdx +61 -59
- package/docs/zh/guides/basic-features/static-assets/svg-assets.mdx +29 -17
- package/docs/zh/guides/basic-features/testing/playwright.mdx +15 -10
- package/docs/zh/guides/basic-features/testing/rstest.mdx +6 -4
- package/docs/zh/guides/get-started/ai-coding-agents.mdx +7 -7
- package/docs/zh/guides/topic-detail/module-federation/deploy.mdx +2 -2
- package/docs/zh/guides/upgrade/config.mdx +12 -0
- package/docs/zh/guides/upgrade/other.md +4 -11
- package/docs/zh/guides/upgrade/overview.mdx +1 -4
- package/docs/zh/guides/upgrade/tailwindcss.mdx +0 -1
- package/docs/zh/guides/upgrade/web-server.md +34 -19
- package/docs/zh/index.md +1 -0
- package/docs/zh/plugin/cli-plugins/api.mdx +24 -24
- package/docs/zh/plugin/cli-plugins/life-cycle.mdx +2 -0
- package/docs/zh/plugin/introduction.mdx +6 -6
- package/docs/zh/plugin/official/cli-plugins/plugin-bff.mdx +1 -1
- package/docs/zh/plugin/official/cli-plugins/plugin-ssg.mdx +1 -1
- package/docs/zh/plugin/plugin-system.mdx +19 -26
- package/docs/zh/plugin/runtime-plugins/life-cycle.mdx +2 -0
- package/docs/zh/plugin/server-plugins/api.mdx +11 -14
- package/docs/zh/plugin/server-plugins/life-cycle.mdx +2 -0
- package/package.json +11 -13
- package/{rspress.config.ts → rstack.config.mts} +7 -10
- package/src/components/Footer/styles.module.scss +1 -1
- package/src/components/SolutionCards/index.module.scss +3 -1
|
@@ -44,11 +44,11 @@ Modern.js 3.0 集成 React Server Component,支持 CSR 和 SSR 项目,并支
|
|
|
44
44
|
|
|
45
45
|
React Server Components(服务端组件)是一种新的组件类型,它允许**组件逻辑完全在服务端执行**,并直接将渲染后的 UI 流式传输到客户端。与传统的客户端组件相比,服务端组件带来了以下特性:
|
|
46
46
|
|
|
47
|
-
| 特性
|
|
48
|
-
|
|
|
49
|
-
| 零客户端包体积 | 组件代码不包含在客户端 JS Bundle 中,仅在服务端执行,加快首屏加载与渲染速度
|
|
50
|
-
| 更高的内聚性
|
|
51
|
-
| 渐进增强
|
|
47
|
+
| 特性 | 说明 |
|
|
48
|
+
| -------------- | ------------------------------------------------------------------------------------------ |
|
|
49
|
+
| 零客户端包体积 | 组件代码不包含在客户端 JS Bundle 中,仅在服务端执行,加快首屏加载与渲染速度 |
|
|
50
|
+
| 更高的内聚性 | 组件可直接连接数据库、调用内部 API、读取本地文件,提高开发效率 |
|
|
51
|
+
| 渐进增强 | 可与客户端组件无缝混合使用,按需下放交互逻辑到客户端,在保持高性能的同时,支持复杂交互体验 |
|
|
52
52
|
|
|
53
53
|
需要明确的是,RSC 和 SSR 是**截然不同的概念**:
|
|
54
54
|
|
|
@@ -67,7 +67,7 @@ React Server Components(服务端组件)是一种新的组件类型,它允
|
|
|
67
67
|
export default defineConfig({
|
|
68
68
|
server: {
|
|
69
69
|
rsc: true,
|
|
70
|
-
}
|
|
70
|
+
},
|
|
71
71
|
});
|
|
72
72
|
```
|
|
73
73
|
|
|
@@ -75,7 +75,14 @@ export default defineConfig({
|
|
|
75
75
|
配置启用后,所有的路由组件都会默认成为 Server Component。项目中可能存在无法在服务端运行的组件,你可以先为这些组件添加 `'use client'` 标记,以保持原有行为,再逐步迁移。
|
|
76
76
|
:::
|
|
77
77
|
|
|
78
|
-
<video
|
|
78
|
+
<video
|
|
79
|
+
src="https://lf3-static.bytednsdoc.com/obj/eden-cn/nuvjhpqnuvr/rsc.mp4"
|
|
80
|
+
controls
|
|
81
|
+
autoplay
|
|
82
|
+
loop
|
|
83
|
+
muted
|
|
84
|
+
style={{ width: '100%', borderRadius: 8 }}
|
|
85
|
+
/>
|
|
79
86
|
|
|
80
87
|
#### Modern.js 3.0 的 RSC 特性
|
|
81
88
|
|
|
@@ -156,7 +163,7 @@ import('./module').then(({ value }) => {
|
|
|
156
163
|
});
|
|
157
164
|
|
|
158
165
|
// 函数体内的解构访问
|
|
159
|
-
import('./module').then(
|
|
166
|
+
import('./module').then(mod => {
|
|
160
167
|
const { value } = mod;
|
|
161
168
|
console.log(value);
|
|
162
169
|
});
|
|
@@ -236,7 +243,10 @@ export default defineRuntimeConfig({
|
|
|
236
243
|
在 Modern.js 3.0 中,我们使用 [Hono](https://hono.dev) 重构了 Web Server,并正式开放了服务端中间件与插件的能力。开发者可以使用 Hono 的中间件来完成需求:
|
|
237
244
|
|
|
238
245
|
```ts title="server/modern.server.ts"
|
|
239
|
-
import {
|
|
246
|
+
import {
|
|
247
|
+
defineServerConfig,
|
|
248
|
+
type MiddlewareHandler,
|
|
249
|
+
} from '@modern-js/server-runtime';
|
|
240
250
|
|
|
241
251
|
const timingMiddleware: MiddlewareHandler = async (c, next) => {
|
|
242
252
|
const start = Date.now();
|
|
@@ -249,8 +259,8 @@ const htmlMiddleware: MiddlewareHandler = async (c, next) => {
|
|
|
249
259
|
await next();
|
|
250
260
|
const html = await c.res.text();
|
|
251
261
|
const modified = html.replace(
|
|
252
|
-
|
|
253
|
-
'<head><meta name="generator" content="Modern.js">'
|
|
262
|
+
'<head>',
|
|
263
|
+
'<head><meta name="generator" content="Modern.js">',
|
|
254
264
|
);
|
|
255
265
|
c.res = c.body(modified, { status: c.res.status, headers: c.res.headers });
|
|
256
266
|
};
|
|
@@ -321,13 +331,13 @@ React Router v6 是一个重要的过渡版本,它引入了许多新特性(
|
|
|
321
331
|
因此,Modern.js 3.0 提供了完整的配置式路由支持,可以与约定式路由一起使用,或两者分别单独使用。
|
|
322
332
|
|
|
323
333
|
```ts title="src/modern.routes.ts"
|
|
324
|
-
import { defineRoutes } from
|
|
334
|
+
import { defineRoutes } from '@modern-js/runtime/config-routes';
|
|
325
335
|
|
|
326
336
|
export default defineRoutes(({ route, layout, page }) => {
|
|
327
337
|
return [
|
|
328
|
-
route(
|
|
329
|
-
route(
|
|
330
|
-
route(
|
|
338
|
+
route('home.tsx', '/'),
|
|
339
|
+
route('about.tsx', 'about'),
|
|
340
|
+
route('blog.tsx', 'blog/:id'),
|
|
331
341
|
];
|
|
332
342
|
});
|
|
333
343
|
```
|
|
@@ -364,8 +374,7 @@ Modern.js 3.0 重做了 SSG 能力,提供了灵活的缓存能力,对降级
|
|
|
364
374
|
- 简化了 API,降低理解成本
|
|
365
375
|
- 与约定式路由更好地结合
|
|
366
376
|
|
|
367
|
-
|
|
368
|
-
在新版本中,你可以通过 data loader 进行数据获取,与非 SSG 场景保持一致。然后在 ssg.routes 配置中即可直接指定要渲染的路由:
|
|
377
|
+
在新版本中,你可以通过 data loader 进行数据获取,与非 SSG 场景保持一致。然后在 ssg.routes 配置中即可直接指定要渲染的路由:
|
|
369
378
|
|
|
370
379
|
```ts title="modern.config.ts"
|
|
371
380
|
export default defineConfig({
|
|
@@ -414,19 +423,19 @@ export const cacheOption: CacheOption = {
|
|
|
414
423
|
我们在新版本中提供了 `cache` 函数,相比渲染缓存它提供了更精细的数据粒度控制。当多个数据请求依赖同一份数据时,`cache` 可以避免重复请求:
|
|
415
424
|
|
|
416
425
|
```ts title="server/loader.ts"
|
|
417
|
-
import { cache } from
|
|
418
|
-
import { fetchUserData, fetchUserProjects, fetchUserTeam } from
|
|
426
|
+
import { cache } from '@modern-js/runtime/cache';
|
|
427
|
+
import { fetchUserData, fetchUserProjects, fetchUserTeam } from './api';
|
|
419
428
|
|
|
420
429
|
// 缓存用户数据,避免重复请求
|
|
421
430
|
const getUser = cache(fetchUserData);
|
|
422
431
|
|
|
423
432
|
const getProjects = async () => {
|
|
424
|
-
const user = await getUser(
|
|
433
|
+
const user = await getUser('test-user');
|
|
425
434
|
return fetchUserProjects(user.id);
|
|
426
435
|
};
|
|
427
436
|
|
|
428
437
|
const getTeam = async () => {
|
|
429
|
-
const user = await getUser(
|
|
438
|
+
const user = await getUser('test-user'); // 复用缓存,不会重复请求
|
|
430
439
|
return fetchUserTeam(user.id);
|
|
431
440
|
};
|
|
432
441
|
|
|
@@ -445,14 +454,14 @@ export const loader = async () => {
|
|
|
445
454
|
|
|
446
455
|
在实践过程中,我们沉淀了多维度的降级策略:
|
|
447
456
|
|
|
448
|
-
| 类型
|
|
449
|
-
|
|
|
450
|
-
| 异常降级
|
|
451
|
-
| 组件渲染报错
|
|
452
|
-
| 业务降级
|
|
453
|
-
| 配置 Client Loader | 配置 Client Loader
|
|
454
|
-
| 强制降级
|
|
455
|
-
| 强制降级
|
|
457
|
+
| 类型 | 触发方式 | 降级行为 | 使用场景 |
|
|
458
|
+
| ------------------ | ------------------------------ | ---------------------------------------- | ------------------------------ |
|
|
459
|
+
| 异常降级 | Data Loader 执行报错 | 触发 ErrorBoundary | 数据请求异常兜底 |
|
|
460
|
+
| 组件渲染报错 | 服务端渲染异常 | 降级到 CSR,复用已有数据渲染 | 服务端渲染异常兜底 |
|
|
461
|
+
| 业务降级 | Loader 抛出 `throw Response` | 触发 ErrorBoundary,返回对应 HTTP 状态码 | 404、权限校验等业务场景 |
|
|
462
|
+
| 配置 Client Loader | 配置 Client Loader | 绕过 SSR,直接请求数据源 | 需要在客户端直接获取数据的场景 |
|
|
463
|
+
| 强制降级 | Query 参数 `?__csr=true` | 跳过 SSR,返回 CSR 页面 | 调试、临时降级 |
|
|
464
|
+
| 强制降级 | 请求头 `x-modern-ssr-fallback` | 跳过 SSR,返回 CSR 页面 | 网关层控制降级 |
|
|
456
465
|
|
|
457
466
|
---
|
|
458
467
|
|
|
@@ -20,7 +20,7 @@ sidebar_position: 3
|
|
|
20
20
|
node -v
|
|
21
21
|
```
|
|
22
22
|
|
|
23
|
-
如果你当前环境没有安装 Node.js,可以使用 [nvm](https://github.com/nvm-sh/nvm)或者 [fnm](https://github.com/Schniz/fnm) 来安装它。
|
|
23
|
+
如果你当前环境没有安装 Node.js,可以使用 [nvm](https://github.com/nvm-sh/nvm) 或者 [fnm](https://github.com/Schniz/fnm) 来安装它。
|
|
24
24
|
|
|
25
25
|
以下是如何通过 nvm 安装 Node.js 22 LTS 版本的示例:
|
|
26
26
|
|
|
@@ -35,13 +35,6 @@ nvm alias default 22
|
|
|
35
35
|
nvm use 22
|
|
36
36
|
```
|
|
37
37
|
|
|
38
|
-
### 安装 pnpm
|
|
39
|
-
|
|
40
|
-
```bash
|
|
41
|
-
# 使用 corepack 启用 pnpm,仅在 Node.js >= `v14.19.0` 上可用
|
|
42
|
-
corepack enable
|
|
43
|
-
```
|
|
44
|
-
|
|
45
38
|
### 安装依赖
|
|
46
39
|
|
|
47
40
|
```sh
|
|
@@ -56,28 +49,6 @@ pnpm install
|
|
|
56
49
|
|
|
57
50
|
> 在此之后,你通常不需要一次性构建所有 packages。如果你正在开发的新功能依赖另一个 package 的最新代码,通常只构建指定的 package 就足够了。
|
|
58
51
|
|
|
59
|
-
### 设置 Git 邮箱
|
|
60
|
-
|
|
61
|
-
请确保在 `<https://github.com/settings/emails>` 中设置了电子邮件,当你提交 Pull Request 时将需要它。
|
|
62
|
-
|
|
63
|
-
检查你的 git 客户端是否已配置邮箱:
|
|
64
|
-
|
|
65
|
-
```sh
|
|
66
|
-
git config --list | grep email
|
|
67
|
-
```
|
|
68
|
-
|
|
69
|
-
全局设置邮箱:
|
|
70
|
-
|
|
71
|
-
```sh
|
|
72
|
-
git config --global user.email "SOME_EMAIL@example.com"
|
|
73
|
-
```
|
|
74
|
-
|
|
75
|
-
针对本地仓库设置邮箱:
|
|
76
|
-
|
|
77
|
-
```sh
|
|
78
|
-
git config user.email "SOME_EMAIL@example.com"
|
|
79
|
-
```
|
|
80
|
-
|
|
81
52
|
## 代码变更和构建
|
|
82
53
|
|
|
83
54
|
当你在 fork 的仓库中设置完本地开发环境后,我们就可以开始开发了。
|
|
@@ -131,7 +102,7 @@ Modern.js 仓库的单元测试统一使用 [Rstest](https://rstest.rs/)。你
|
|
|
131
102
|
在提交 pull request 之前,为了确保本次变更没有引入缺陷,你可以通过执行以下命令运行单元测试:
|
|
132
103
|
|
|
133
104
|
```sh
|
|
134
|
-
pnpm run test
|
|
105
|
+
pnpm run test:ut
|
|
135
106
|
```
|
|
136
107
|
|
|
137
108
|
你也可以使用 `--filter` 选项运行单个包的单元测试:
|
|
@@ -144,10 +115,11 @@ pnpm run --filter @modern-js/some-package test
|
|
|
144
115
|
|
|
145
116
|
除了单元测试之外,Modern.js 仓库还包括端到端 (E2E) 测试,用于检查整个应用程序的功能。
|
|
146
117
|
|
|
147
|
-
|
|
118
|
+
使用以下命令运行框架集成测试和 Builder E2E 测试:
|
|
148
119
|
|
|
149
120
|
```sh
|
|
150
|
-
pnpm run test:
|
|
121
|
+
pnpm run test:framework
|
|
122
|
+
pnpm run test:builder
|
|
151
123
|
```
|
|
152
124
|
|
|
153
125
|
如果需要运行指定的测试,可以添加关键字进行过滤:
|
|
@@ -159,7 +131,7 @@ npx rstest copy-assets
|
|
|
159
131
|
|
|
160
132
|
## Linting
|
|
161
133
|
|
|
162
|
-
为了帮助保持代码风格的一致性和可读性,我们使用
|
|
134
|
+
为了帮助保持代码风格的一致性和可读性,我们使用 [Rstack CLI](https://rstack.rs/) 进行代码校验和格式化。
|
|
163
135
|
|
|
164
136
|
你可以执行以下命令来运行 Linter:
|
|
165
137
|
|
|
@@ -167,6 +139,14 @@ npx rstest copy-assets
|
|
|
167
139
|
pnpm run lint
|
|
168
140
|
```
|
|
169
141
|
|
|
142
|
+
在仓库根目录运行格式化命令:
|
|
143
|
+
|
|
144
|
+
```sh
|
|
145
|
+
pnpm run format
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
可以在命令后追加文件或目录路径来缩小范围。
|
|
149
|
+
|
|
170
150
|
## Benchmarking
|
|
171
151
|
|
|
172
152
|
你可以在 PR 的评论区中输入 `!bench-framework` 或 `!bench-module` 分别对 `@modern-js/app-tools` 和 `@modern-js/module-tools` 做性能测试(这需要你具有 Collaborator 及以上的权限)。
|
|
@@ -248,6 +228,8 @@ pnpm prepare
|
|
|
248
228
|
pnpm run bump
|
|
249
229
|
```
|
|
250
230
|
|
|
231
|
+
该命令会先通过 Changesets 升级包版本,再自动将内部 `peerDependencies` 范围同步为 `workspace:^<依赖包版本>`,与 changeset 校验保持一致。
|
|
232
|
+
|
|
251
233
|
5. 提交版本变更。
|
|
252
234
|
|
|
253
235
|
```sh
|
|
@@ -1 +1 @@
|
|
|
1
|
-
本地验证完成后,可以参考 [部署](/guides/basic-features/deploy.html) 一节,将项目部署到服务器上。
|
|
1
|
+
本地验证完成后,可以参考 [部署](/guides/basic-features/deploy.html) 一节,将项目部署到服务器上。
|
|
@@ -38,19 +38,18 @@ npx @modern-js/create@latest myapp
|
|
|
38
38
|
|
|
39
39
|
⚡ 启动开发服务器:
|
|
40
40
|
|
|
41
|
-
pnpm
|
|
41
|
+
pnpm dev
|
|
42
42
|
```
|
|
43
43
|
|
|
44
44
|
现在,项目结构如下:
|
|
45
45
|
|
|
46
46
|
```
|
|
47
47
|
.
|
|
48
|
-
├── biome.json
|
|
49
48
|
├── modern.config.ts
|
|
50
49
|
├── package.json
|
|
51
50
|
├── README.md
|
|
51
|
+
├── rstack.config.mts
|
|
52
52
|
├── src
|
|
53
|
-
│ ├── modern-app-env.d.ts
|
|
54
53
|
│ ├── modern.runtime.ts
|
|
55
54
|
│ └── routes
|
|
56
55
|
│ ├── index.css
|
|
@@ -58,3 +57,10 @@ npx @modern-js/create@latest myapp
|
|
|
58
57
|
│ └── page.tsx
|
|
59
58
|
└── tsconfig.json
|
|
60
59
|
```
|
|
60
|
+
|
|
61
|
+
新建的独立项目使用 [Rstack CLI](https://rstack.rs/) 进行代码校验和格式化:
|
|
62
|
+
|
|
63
|
+
```bash
|
|
64
|
+
pnpm check
|
|
65
|
+
pnpm format
|
|
66
|
+
```
|
|
@@ -3,15 +3,18 @@ import { defineRuntimeConfig } from '@modern-js/runtime';
|
|
|
3
3
|
|
|
4
4
|
export default defineRuntimeConfig({
|
|
5
5
|
masterApp: {
|
|
6
|
-
apps: [
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
6
|
+
apps: [
|
|
7
|
+
{
|
|
8
|
+
name: 'Table',
|
|
9
|
+
entry: 'http://localhost:8081',
|
|
10
|
+
// activeWhen: '/table'
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
name: 'Dashboard',
|
|
14
|
+
entry: 'http://localhost:8082',
|
|
15
|
+
// activeWhen: '/dashboard'
|
|
16
|
+
},
|
|
17
|
+
],
|
|
15
18
|
},
|
|
16
19
|
});
|
|
17
20
|
```
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
在开始使用前,你需要安装 [Node.js](https://nodejs.org/),并保证 Node.js 版本不低于
|
|
1
|
+
在开始使用前,你需要安装 [Node.js](https://nodejs.org/),并保证 Node.js 版本不低于 v22.18.0,**我们推荐使用 Node.js 22 的 LTS 版本**。
|
|
2
2
|
|
|
3
3
|
你可以通过以下命令检查当前使用的 Node.js 版本:
|
|
4
4
|
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
node -v
|
|
7
7
|
```
|
|
8
8
|
|
|
9
|
-
如果你当前的环境中尚未安装 Node.js
|
|
9
|
+
如果你当前的环境中尚未安装 Node.js,或是安装的版本不满足此要求,可以通过 [nvm](https://github.com/nvm-sh/nvm) 或 [fnm](https://github.com/Schniz/fnm) 安装需要的版本。
|
|
10
10
|
|
|
11
11
|
下面是通过 nvm 安装 Node.js 22 LTS 版本的例子:
|
|
12
12
|
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
|
|
@@ -7,7 +7,7 @@ title: crossProject
|
|
|
7
7
|
- **类型:** `boolean`
|
|
8
8
|
- **默认值:** `false`
|
|
9
9
|
|
|
10
|
-
import EnableBFFCaution from
|
|
10
|
+
import EnableBFFCaution from '@site-docs/components/enable-bff-caution';
|
|
11
11
|
|
|
12
12
|
<EnableBFFCaution />
|
|
13
13
|
|
|
@@ -21,4 +21,4 @@ export default defineConfig({
|
|
|
21
21
|
});
|
|
22
22
|
```
|
|
23
23
|
|
|
24
|
-
有关 BFF 跨项目调用的详细配置和使用方法,请参考 [BFF 跨项目调用指南](/guides/advanced-features/bff/cross-project.html)。
|
|
24
|
+
有关 BFF 跨项目调用的详细配置和使用方法,请参考 [BFF 跨项目调用指南](/guides/advanced-features/bff/cross-project.html)。
|
|
@@ -33,10 +33,26 @@ type LazyCompilationOptions =
|
|
|
33
33
|
};
|
|
34
34
|
```
|
|
35
35
|
|
|
36
|
-
- **默认值:**
|
|
36
|
+
- **默认值:** 取决于应用的渲染方式:
|
|
37
|
+
- 纯 CSR 与流式 SSR 应用:`{ imports: true, entries: false }`,即对动态导入按需编译;
|
|
38
|
+
- 使用 string SSR(包括 `server.ssrByEntries` 中任一入口为 string SSR)、RSC 或 SSG 的应用:`false`。
|
|
37
39
|
|
|
38
40
|
用于开启 lazy compilation(即按需编译),基于 Rspack 的 [lazy compilation](https://rspack.rs/zh/guide/features/lazy-compilation) 特性实现。
|
|
39
41
|
|
|
42
|
+
该配置仅在开发环境(dev server)下生效,不影响生产构建产物。流式 SSR 应用开启时,路由组件仍会提前编译,以保证首屏 JS/CSS 注入正确。
|
|
43
|
+
|
|
44
|
+
显式配置的 `dev.lazyCompilation` 始终优先于默认值,如需关闭可配置:
|
|
45
|
+
|
|
46
|
+
```ts
|
|
47
|
+
import { defineConfig } from '@modern-js/app-tools';
|
|
48
|
+
|
|
49
|
+
export default defineConfig({
|
|
50
|
+
dev: {
|
|
51
|
+
lazyCompilation: false,
|
|
52
|
+
},
|
|
53
|
+
});
|
|
54
|
+
```
|
|
55
|
+
|
|
40
56
|
import RsbuildLink from '@site/src/components/RsbuildLink';
|
|
41
57
|
|
|
42
58
|
:::info
|
|
@@ -9,7 +9,6 @@ title: crossorigin
|
|
|
9
9
|
|
|
10
10
|
用于设置 `<script>` 和 `<style>` 标签的 [crossorigin](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) 属性。
|
|
11
11
|
|
|
12
|
-
|
|
13
12
|
import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
|
|
14
13
|
|
|
15
14
|
<RsbuildConfig configName="html.crossorigin" />
|
|
@@ -17,11 +17,7 @@ type CssModules = {
|
|
|
17
17
|
resourceFragment: string,
|
|
18
18
|
) => boolean);
|
|
19
19
|
exportLocalsConvention?:
|
|
20
|
-
| '
|
|
21
|
-
| 'camelCase'
|
|
22
|
-
| 'camelCaseOnly'
|
|
23
|
-
| 'dashes'
|
|
24
|
-
| 'dashesOnly';
|
|
20
|
+
'asIs' | 'camelCase' | 'camelCaseOnly' | 'dashes' | 'dashesOnly';
|
|
25
21
|
exportGlobals?: boolean;
|
|
26
22
|
localIdentName?: string;
|
|
27
23
|
mode?:
|
|
@@ -7,6 +7,10 @@ title: disableSvgr
|
|
|
7
7
|
- **类型:** `boolean`
|
|
8
8
|
- **默认值:** `false`
|
|
9
9
|
|
|
10
|
+
:::warning 已废弃
|
|
11
|
+
`output.disableSvgr` 已废弃,并将在下一个大版本中移除。`output.disableSvgr: true` 请改为 [tools.svgr](/configure/app/tools/svgr) 设置为 `false`;`output.disableSvgr: false` 是默认行为,直接删除即可。两者同时设置时,以 `tools.svgr` 为准。
|
|
12
|
+
:::
|
|
13
|
+
|
|
10
14
|
是否调用 SVGR 将 SVG 转化为 React 组件。如果设置为 true,将把所有的.svg 文件视为资源处理。
|
|
11
15
|
|
|
12
16
|
默认情况下,在 JS 文件中引用 SVG 资源时,Modern.js 会调用 SVGR,将 SVG 图片转换为一个 React 组件。
|
|
@@ -10,13 +10,13 @@ title: ssgByEntries
|
|
|
10
10
|
在多入口应用中,为每个入口分别配置 SSG。
|
|
11
11
|
|
|
12
12
|
:::info
|
|
13
|
+
|
|
13
14
|
- 单入口建议使用 `output.ssg`。
|
|
14
15
|
- 多入口建议优先使用 `output.ssgByEntries`。
|
|
15
16
|
- 当 `output.ssg` 为 `true` 且未配置 `output.ssgByEntries` 时,所有入口下的所有路由都会作为 SSG 路由处理。
|
|
16
17
|
|
|
17
18
|
:::
|
|
18
19
|
|
|
19
|
-
|
|
20
20
|
## 配置类型
|
|
21
21
|
|
|
22
22
|
```ts
|
|
@@ -7,6 +7,10 @@ title: svgDefaultExport
|
|
|
7
7
|
- **类型:** `'url' | 'component'`
|
|
8
8
|
- **默认值:** `'url'`
|
|
9
9
|
|
|
10
|
+
:::warning 已废弃
|
|
11
|
+
`output.svgDefaultExport` 已废弃,并将在下一个大版本中移除,请改用 [tools.svgr](/configure/app/tools/svgr) 的 `svgrOptions.exportType`:`'component'` 对应 `exportType: 'default'`,`'url'` 对应 `exportType: 'named'`。两者同时设置时,以 `tools.svgr` 为准。
|
|
12
|
+
:::
|
|
13
|
+
|
|
10
14
|
`output.svgDefaultExport` 可以用来配置 SVG 文件的默认导出。
|
|
11
15
|
|
|
12
16
|
当 `output.svgDefaultExport` 配置为 `url` 时,SVG 文件的默认导出是文件的 URL。例如:
|
|
@@ -14,10 +14,7 @@ type ForceSplitting = RegExp[] | Record<string, RegExp>;
|
|
|
14
14
|
|
|
15
15
|
interface BaseChunkSplit {
|
|
16
16
|
strategy?:
|
|
17
|
-
| 'split-by-
|
|
18
|
-
| 'split-by-experience'
|
|
19
|
-
| 'all-in-one'
|
|
20
|
-
| 'single-vendor';
|
|
17
|
+
'split-by-module' | 'split-by-experience' | 'all-in-one' | 'single-vendor';
|
|
21
18
|
override?: SplitChunks;
|
|
22
19
|
forceSplitting?: ForceSplitting;
|
|
23
20
|
}
|
|
@@ -8,7 +8,6 @@ title: dedupe
|
|
|
8
8
|
|
|
9
9
|
强制 Rsbuild 从项目根目录解析指定的包,这可以用于移除重复包和减少包大小。对应 Rsbuild 的 [resolve.dedupe](https://v2.rsbuild.rs/config/resolve/dedupe) 配置。
|
|
10
10
|
|
|
11
|
-
|
|
12
11
|
import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
|
|
13
12
|
|
|
14
13
|
<RsbuildConfig configName="resolve.dedupe" />
|
|
@@ -50,9 +50,11 @@ import { defineRuntimeConfig } from '@modern-js/runtime';
|
|
|
50
50
|
import { myPlugin } from './config/plugin/myPlugin';
|
|
51
51
|
|
|
52
52
|
export default defineRuntimeConfig({
|
|
53
|
-
plugins: [
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
53
|
+
plugins: [
|
|
54
|
+
myPlugin({
|
|
55
|
+
foo: 1,
|
|
56
|
+
bar: 2,
|
|
57
|
+
}),
|
|
58
|
+
],
|
|
57
59
|
});
|
|
58
60
|
```
|
|
@@ -21,10 +21,10 @@ export default defineConfig({
|
|
|
21
21
|
|
|
22
22
|
:::tip 前置条件
|
|
23
23
|
在启用 RSC 之前,请确保:
|
|
24
|
+
|
|
24
25
|
1. React 和 React DOM 已升级到 19 版本(建议 19.2.4 以上版本)
|
|
25
26
|
2. 已安装 `react-server-dom-rspack@0.0.2` 依赖
|
|
26
27
|
|
|
27
28
|
:::
|
|
28
29
|
|
|
29
30
|
有关使用 RSC 的更多信息,请参阅 [React Server Components 指南](/guides/basic-features/render/rsc)。
|
|
30
|
-
|
|
@@ -25,13 +25,12 @@ export default defineConfig({
|
|
|
25
25
|
|
|
26
26
|
当值类型为 `Object` 时,可以配置如下属性:
|
|
27
27
|
|
|
28
|
-
| 属性 | 类型
|
|
29
|
-
|
|
|
30
|
-
| mode
|
|
31
|
-
| forceCSR
|
|
32
|
-
| unsafeHeaders
|
|
33
|
-
| loaderFailureMode| `clientRender \| errorBoundary`
|
|
34
|
-
|
|
28
|
+
| 属性 | 类型 | 默认值 | 描述 |
|
|
29
|
+
| ----------------- | ------------------------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
30
|
+
| mode | `string` | `stream` | 默认为使用流式渲染。配置为 `string` 使用 `renderToString` 渲染 |
|
|
31
|
+
| forceCSR | `boolean` | `false` | 默认关闭强制 CSR 渲染。配置为 `true` 后,在页面访问时添加 `?csr=true` 或添加请求头 `x-modern-ssr-fallback` 即可强制 CSR |
|
|
32
|
+
| unsafeHeaders | `string[]` | `[]` | 为了安全考虑,Modern.js 不会往 SSR_DATA 添加过多的内容。开发者可以通过该配置,对需要注入的 headers 进行配置 |
|
|
33
|
+
| loaderFailureMode | `clientRender \| errorBoundary` | `errorBoundary` | 当 [data loader](/guides/basic-features/data/data-fetch.html#data-loader推荐) 中出错时,默认会渲染路由 [`Error`](/guides/basic-features/routes/routes#错误处理) 组件,配置为 `'clientRender'` 时,有一个 data loader 抛错,就降级到客户端渲染,可以与 [Client Loader](/guides/basic-features/data/data-fetch.html#client-loader) 配合使用 |
|
|
35
34
|
|
|
36
35
|
```ts title="modern.config.ts"
|
|
37
36
|
export default defineConfig({
|