@modern-js/main-doc 2.25.2 → 2.27.0
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +16 -0
- package/docs/en/components/prerequisites.mdx +1 -1
- package/docs/en/configure/app/experiments/source-build.mdx +13 -0
- package/docs/en/configure/app/server/ssr.mdx +6 -5
- package/docs/en/configure/app/source/alias-strategy.mdx +13 -0
- package/docs/en/configure/app/tools/swc.mdx +3 -1
- package/docs/en/guides/advanced-features/rspack-start.mdx +1 -1
- package/docs/en/guides/get-started/quick-start.mdx +23 -3
- package/docs/en/guides/topic-detail/framework-plugin/hook-list.mdx +222 -144
- package/docs/en/guides/topic-detail/generator/plugin/api/onForged.md +1 -1
- package/docs/en/tutorials/first-app/c03-css.mdx +3 -2
- package/docs/zh/components/prerequisites.mdx +1 -1
- package/docs/zh/configure/app/deploy/microFrontend.mdx +1 -1
- package/docs/zh/configure/app/experiments/source-build.mdx +13 -0
- package/docs/zh/configure/app/server/ssr.mdx +6 -5
- package/docs/zh/configure/app/source/alias-strategy.mdx +13 -0
- package/docs/zh/configure/app/tools/swc.mdx +3 -1
- package/docs/zh/guides/advanced-features/rspack-start.mdx +1 -1
- package/docs/zh/guides/advanced-features/using-storybook.mdx +1 -1
- package/docs/zh/guides/get-started/quick-start.mdx +28 -7
- package/docs/zh/guides/topic-detail/framework-plugin/hook-list.mdx +179 -101
- package/package.json +5 -5
@@ -215,7 +215,7 @@ Parameter types:
|
|
215
215
|
updateInfo: Record<string, any>
|
216
216
|
```
|
217
217
|
|
218
|
-
- `updateInfo`: Update content information. `updateModernConfig` is a package based on `updateJSONFile`, which will automatically update under the `
|
218
|
+
- `updateInfo`: Update content information. `updateModernConfig` is a package based on `updateJSONFile`, which will automatically update under the `modernConfig` field. Only the configuration fields under `modernConfig` need to be filled in `updateInfo`.
|
219
219
|
|
220
220
|
For example, enable SSR:
|
221
221
|
|
@@ -1,9 +1,10 @@
|
|
1
1
|
---
|
2
2
|
title: Add Style
|
3
3
|
---
|
4
|
+
|
4
5
|
# Add Style
|
5
6
|
|
6
|
-
import { Tabs, Tab as TabItem } from
|
7
|
+
import { Tabs, Tab as TabItem } from '@theme';
|
7
8
|
|
8
9
|
In the previous chapter, we learned how to use components from the third-party library.
|
9
10
|
|
@@ -15,7 +16,7 @@ First of all, we want to control the display of contact avatars by ourselves, an
|
|
15
16
|
|
16
17
|

|
17
18
|
|
18
|
-
Hypothesis has no ready-made components to implement, so you need to write some CSS yourself. Here we use [styled-components]
|
19
|
+
Hypothesis has no ready-made components to implement, so you need to write some CSS yourself. Here we use [styled-components](https://styled-components.com/) to implement similar requirements. Modern.js out of the box supports styled-components, which requires neither dependency nor configuration.
|
19
20
|
|
20
21
|
Style-components avoids many problems of traditional CSS writing through modularization. For example, writing styles directly on the style attribute of elements, the visual details of UI will also be mixed with the details of UI structure and business logic. Or classname needs to avoid global space renaming, which requires the use of naming conventions.
|
21
22
|
|
@@ -52,4 +52,4 @@ export default defineConfig({
|
|
52
52
|
|
53
53
|
- **默认值:** `false`
|
54
54
|
|
55
|
-
是否 `external` 基础库,当设置为 `true` 时,当前子应用将会 `external`:`react`、`react-dom`,`
|
55
|
+
是否 `external` 基础库,当设置为 `true` 时,当前子应用将会 `external`:`react`、`react-dom`,`Modern.js` 主应用会自动 `setExternal` 这两个基础库,如果其他类型的框架请通过 `Garfish.setExternal` 增加 `react`、`react-dom` 依赖
|
@@ -0,0 +1,13 @@
|
|
1
|
+
---
|
2
|
+
sidebar_label: sourceBuild
|
3
|
+
---
|
4
|
+
|
5
|
+
# experiments.sourceBuild
|
6
|
+
|
7
|
+
:::tip
|
8
|
+
该配置由 Modern.js Builder 提供,更多信息可参考 [experiments.sourceBuild](https://modernjs.dev/builder/api/config-experiments.html#experimentssourcebuild)。
|
9
|
+
:::
|
10
|
+
|
11
|
+
import Main from '@modern-js/builder-doc/docs/zh/config/experiments/sourceBuild.md';
|
12
|
+
|
13
|
+
<Main />
|
@@ -29,13 +29,14 @@ export default defineConfig({
|
|
29
29
|
- `forceCSR`:`boolean = false`,默认关闭强制 CSR 渲染。配置为 `true` 后,在页面访问时添加 `?csr=true` 或添加请求头 `x-modern-ssr-fallback` 即可强制 CSR。
|
30
30
|
- `inlineScript`:`boolean = true`,默认情况下,SSR 的数据会以内联脚本的方式注入到 HTML 中,并且直接赋值给全局变量。配置为 `false` 后,会下发 JSON,而不是赋值给全局变量。
|
31
31
|
|
32
|
-
|
33
32
|
```ts title="modern.config.ts"
|
34
33
|
export default defineConfig({
|
35
34
|
server: {
|
36
|
-
|
37
|
-
|
38
|
-
|
35
|
+
ssr: {
|
36
|
+
forceCSR: true,
|
37
|
+
mode: 'stream',
|
38
|
+
inlineScript: false,
|
39
|
+
},
|
39
40
|
},
|
40
41
|
});
|
41
42
|
```
|
@@ -50,7 +51,7 @@ export default defineConfig({
|
|
50
51
|
|
51
52
|
3. SSR 服务压力过大,需要部分流量直接降级为 CSR,避免服务宕机。
|
52
53
|
|
53
|
-
在项目中配置 `ssr.
|
54
|
+
在项目中配置 `server.ssr.forceCSR` 为 `true` 后,我们可以通过请求的查询字符串,或是请求头来控制这一行为。
|
54
55
|
|
55
56
|
例如在自定义 Web Server 的中间件中,检测到流量大于某一阈值时,主动降级:
|
56
57
|
|
@@ -0,0 +1,13 @@
|
|
1
|
+
---
|
2
|
+
sidebar_label: aliasStrategy
|
3
|
+
---
|
4
|
+
|
5
|
+
# source.aliasStrategy
|
6
|
+
|
7
|
+
:::tip
|
8
|
+
该配置由 Modern.js Builder 提供,更多信息可参考 [source.aliasStrategy](https://modernjs.dev/builder/api/config-source.html#sourcealiasstrategy)。
|
9
|
+
:::
|
10
|
+
|
11
|
+
import Main from '@modern-js/builder-doc/docs/zh/config/source/aliasStrategy.md';
|
12
|
+
|
13
|
+
<Main />
|
@@ -15,11 +15,13 @@ import SWC from '@modern-js/builder-doc/docs/zh/shared/swc.md';
|
|
15
15
|
|
16
16
|
:::tip
|
17
17
|
在使用 Rspack 作为打包工具时,默认会使用 SWC 进行转译和压缩,因此你不需要再安装和配置 SWC 插件。
|
18
|
+
|
19
|
+
如果你使用 Rspack 时配置了当前的 SWC 插件,它将不会产生任何效果。
|
18
20
|
:::
|
19
21
|
|
20
22
|
## 安装
|
21
23
|
|
22
|
-
import EnableSWC from '@modern-js/builder-doc/docs/zh/shared/
|
24
|
+
import EnableSWC from '@modern-js/builder-doc/docs/zh/shared/enableSwc.md';
|
23
25
|
|
24
26
|
<EnableSWC />
|
25
27
|
|
@@ -2,19 +2,20 @@
|
|
2
2
|
title: 快速上手
|
3
3
|
sidebar_position: 2
|
4
4
|
---
|
5
|
+
|
5
6
|
# 快速上手
|
6
7
|
|
7
8
|
## 环境准备
|
8
9
|
|
9
|
-
import Prerequisites from
|
10
|
+
import Prerequisites from '@site-docs/components/prerequisites';
|
10
11
|
|
11
12
|
<Prerequisites />
|
12
13
|
|
13
14
|
## 安装
|
14
15
|
|
15
|
-
Modern.js 提供了 `@modern-js/create`
|
16
|
+
Modern.js 提供了 `@modern-js/create` 工具来创建项目,不需要全局安装,直接使用 `npx` 按需运行即可。
|
16
17
|
|
17
|
-
|
18
|
+
你可以在已有的空目录来创建项目:
|
18
19
|
|
19
20
|
```bash
|
20
21
|
mkdir myapp && cd myapp
|
@@ -29,13 +30,13 @@ npx @modern-js/create@latest myapp
|
|
29
30
|
|
30
31
|
## 初始化项目
|
31
32
|
|
32
|
-
import InitApp from
|
33
|
+
import InitApp from '@site-docs/components/init-app';
|
33
34
|
|
34
35
|
<InitApp />
|
35
36
|
|
36
37
|
## 启动项目
|
37
38
|
|
38
|
-
import DebugApp from
|
39
|
+
import DebugApp from '@site-docs/components/debug-app';
|
39
40
|
|
40
41
|
<DebugApp />
|
41
42
|
|
@@ -43,7 +44,7 @@ import DebugApp from "@site-docs/components/debug-app"
|
|
43
44
|
|
44
45
|
通过 `@modern-js/create` 创建的 Modern.js 项目中,会默认生成 `modern.config.ts` 文件。
|
45
46
|
|
46
|
-
|
47
|
+
你可以通过该配置文件修改配置,覆盖 Modern.js 的默认行为。例如添加如下配置,开启 SSR:
|
47
48
|
|
48
49
|
```ts title="modern.config.ts"
|
49
50
|
import { appTools, defineConfig } from '@modern-js/app-tools';
|
@@ -61,6 +62,26 @@ export default defineConfig({
|
|
61
62
|
|
62
63
|
重新执行 `pnpm run dev`,在浏览器 Network 菜单中,可以发现项目已经在服务端完成了页面渲染。
|
63
64
|
|
65
|
+
## 核心 npm 包
|
66
|
+
|
67
|
+
在新创建的工程中,默认会安装 `@modern-js/app-tools` npm 包,它是 Modern.js 框架的核心包,主要提供以下能力:
|
68
|
+
|
69
|
+
- 提供 `modern dev`, `modern build` 等常用的 CLI 命令。
|
70
|
+
- 集成 Modern.js Core,提供配置解析、插件加载等能力。
|
71
|
+
- 集成 Modern.js Builder,提供构建能力。
|
72
|
+
- 集成 Modern.js Server,提供开发和生产服务器相关能力。
|
73
|
+
- 集成一些最为常用的插件,比如 `plugin-lint`、`plugin-data-loader` 等。
|
74
|
+
|
75
|
+
`@modern-js/app-tools` 是基于 Modern.js 的插件体系实现的,本质上是一个插件,因此你需要在配置文件的 `plugins` 字段中注册 `appTools`:
|
76
|
+
|
77
|
+
```ts title="modern.config.ts"
|
78
|
+
import { appTools, defineConfig } from '@modern-js/app-tools';
|
79
|
+
|
80
|
+
export default defineConfig({
|
81
|
+
plugins: [appTools()],
|
82
|
+
});
|
83
|
+
```
|
84
|
+
|
64
85
|
## 构建项目
|
65
86
|
|
66
87
|
在项目中执行 `pnpm run build` 即可构建项目生产环境产物:
|
@@ -125,6 +146,6 @@ info App running at:
|
|
125
146
|
|
126
147
|
## 部署
|
127
148
|
|
128
|
-
import Deploy from
|
149
|
+
import Deploy from '@site-docs/components/deploy';
|
129
150
|
|
130
151
|
<Deploy />
|