@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
package/CHANGELOG.md
CHANGED
@@ -1,5 +1,21 @@
|
|
1
1
|
# @modern-js/main-doc
|
2
2
|
|
3
|
+
## 2.27.0
|
4
|
+
|
5
|
+
### Patch Changes
|
6
|
+
|
7
|
+
- 86274f5: docs: add source code build documentation
|
8
|
+
docs: 添加源码构建文档
|
9
|
+
- ebdc4da: Fixed markdown error for link to styled-components website
|
10
|
+
- Updated dependencies [86274f5]
|
11
|
+
- @modern-js/builder-doc@2.27.0
|
12
|
+
|
13
|
+
## 2.26.0
|
14
|
+
|
15
|
+
### Patch Changes
|
16
|
+
|
17
|
+
- @modern-js/builder-doc@2.26.0
|
18
|
+
|
3
19
|
## 2.25.2
|
4
20
|
|
5
21
|
### Patch Changes
|
@@ -0,0 +1,13 @@
|
|
1
|
+
---
|
2
|
+
sidebar_label: sourceBuild
|
3
|
+
---
|
4
|
+
|
5
|
+
# experiments.sourceBuild
|
6
|
+
|
7
|
+
:::tip
|
8
|
+
This config is provided by Modern.js Builder, more detail can see [experiments.sourceBuild](https://modernjs.dev/builder/en/api/config-experiments.html#experimentssourcebuild).
|
9
|
+
:::
|
10
|
+
|
11
|
+
import Main from '@modern-js/builder-doc/docs/en/config/experiments/sourceBuild.md';
|
12
|
+
|
13
|
+
<Main />
|
@@ -32,14 +32,15 @@ When the value type is `Object`, the following properties can be configured:
|
|
32
32
|
```ts title="modern.config.ts"
|
33
33
|
export default defineConfig({
|
34
34
|
server: {
|
35
|
-
|
36
|
-
|
37
|
-
|
35
|
+
ssr: {
|
36
|
+
forceCSR: true,
|
37
|
+
mode: 'stream',
|
38
|
+
inlineScript: false,
|
39
|
+
},
|
38
40
|
},
|
39
41
|
});
|
40
42
|
```
|
41
43
|
|
42
|
-
|
43
44
|
### Active Fallback
|
44
45
|
|
45
46
|
In a production environment, there are scenarios where it is necessary to actively fallback an SSR project to CSR. Examples include
|
@@ -50,7 +51,7 @@ In a production environment, there are scenarios where it is necessary to active
|
|
50
51
|
|
51
52
|
3. When the SSR server is under heavy load, it may be necessary to fallback some traffic directly to the CSR to avoid service downtime.
|
52
53
|
|
53
|
-
By configuring `ssr.
|
54
|
+
By configuring `server.ssr.forceCSR` to `true` in the project, you can control this behavior through query strings or request headers.
|
54
55
|
|
55
56
|
For example, in a custom Web Server middleware, you can actively fallback when traffic exceeds a certain threshold:
|
56
57
|
|
@@ -0,0 +1,13 @@
|
|
1
|
+
---
|
2
|
+
sidebar_label: aliasStrategy
|
3
|
+
---
|
4
|
+
|
5
|
+
# source.aliasStrategy
|
6
|
+
|
7
|
+
:::tip
|
8
|
+
This config is provided by Modern.js Builder, more detail can see [source.aliasStrategy](https://modernjs.dev/builder/en/api/config-source.html#sourcealiasstrategy).
|
9
|
+
:::
|
10
|
+
|
11
|
+
import Main from '@modern-js/builder-doc/docs/en/config/source/aliasStrategy.md';
|
12
|
+
|
13
|
+
<Main />
|
@@ -15,11 +15,13 @@ import SWC from '@modern-js/builder-doc/docs/en/shared/swc.md';
|
|
15
15
|
|
16
16
|
:::tip
|
17
17
|
When using Rspack as the bundler, SWC will be used for transpiling and compression by default, so you don't need to install or configure the SWC plugin.
|
18
|
+
|
19
|
+
If you have configured the current SWC plugin when using Rspack, it will not have any effect.
|
18
20
|
:::
|
19
21
|
|
20
22
|
## Install
|
21
23
|
|
22
|
-
import EnableSWC from '@modern-js/builder-doc/docs/en/shared/
|
24
|
+
import EnableSWC from '@modern-js/builder-doc/docs/en/shared/enableSwc.md';
|
23
25
|
|
24
26
|
<EnableSWC />
|
25
27
|
|
@@ -13,7 +13,7 @@ import Prerequisites from "@site-docs-en/components/prerequisites"
|
|
13
13
|
|
14
14
|
## Installation
|
15
15
|
|
16
|
-
Modern.js provides the `@modern-js/create` tool to create projects.
|
16
|
+
Modern.js provides the `@modern-js/create` tool to create projects. It does not require global installation and can be run on-demand using `npx`.
|
17
17
|
|
18
18
|
You can create a project in an existing empty directory:
|
19
19
|
|
@@ -47,21 +47,41 @@ In a Modern.js project created using `@modern-js/create`, a `modern.config.ts` f
|
|
47
47
|
You can modify the configuration through this file to override the default behavior of Modern.js. For example, to enable SSR, add the following configuration:
|
48
48
|
|
49
49
|
```ts
|
50
|
-
import { defineConfig } from '@modern-js/app-tools';
|
50
|
+
import { appTools, defineConfig } from '@modern-js/app-tools';
|
51
51
|
|
52
52
|
export default defineConfig({
|
53
53
|
runtime: {
|
54
54
|
router: true,
|
55
|
-
state: true,
|
56
55
|
},
|
57
56
|
server: {
|
58
57
|
ssr: true,
|
59
58
|
},
|
59
|
+
plugins: [appTools()],
|
60
60
|
});
|
61
61
|
```
|
62
62
|
|
63
63
|
After running `pnpm run dev` again, you can find that the project has completed page rendering on the server in the browser's Network menu.
|
64
64
|
|
65
|
+
## Core npm Package
|
66
|
+
|
67
|
+
In a newly created project, the `@modern-js/app-tools` npm package is installed by default. It is the core package of the Modern.js framework and provides the following capabilities:
|
68
|
+
|
69
|
+
- It offers commonly used CLI commands such as `modern dev`, `modern build`, and more.
|
70
|
+
- It integrates Modern.js Core, providing capabilities for configuration parsing, plugin loading, and more.
|
71
|
+
- It integrates Modern.js Builder, providing build capabilities.
|
72
|
+
- It integrates Modern.js Server, providing capabilities for development and production servers.
|
73
|
+
- It integrates some commonly used plugins, such as `plugin-lint`, `plugin-data-loader`, and more.
|
74
|
+
|
75
|
+
`@modern-js/app-tools` is implemented based on the plugin system of Modern.js. Essentially, it is a plugin. Therefore, you need to register `appTools` in the `plugins` field of the configuration file:
|
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
|
+
|
65
85
|
## Build the project
|
66
86
|
|
67
87
|
To build the production artifacts of the project, run `pnpm run build` in the project:
|