@modern-js/main-doc 2.57.0 → 2.58.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 +1 -1
- package/docs/en/configure/app/output/disable-node-polyfill.mdx +1 -1
- package/docs/en/guides/advanced-features/optimize-bundle.mdx +1 -1
- package/docs/en/guides/advanced-features/rsbuild-plugin.mdx +8 -8
- package/docs/en/guides/topic-detail/framework-plugin/hook-list.mdx +14 -22
- package/docs/zh/apis/app/commands.mdx +1 -1
- package/docs/zh/configure/app/output/disable-node-polyfill.mdx +1 -1
- package/docs/zh/guides/advanced-features/optimize-bundle.mdx +1 -1
- package/docs/zh/guides/advanced-features/rsbuild-plugin.mdx +8 -8
- package/docs/zh/guides/topic-detail/framework-plugin/hook-list.mdx +11 -19
- package/package.json +5 -5
|
@@ -200,7 +200,7 @@ Usage: modern inspect [options]
|
|
|
200
200
|
|
|
201
201
|
Options:
|
|
202
202
|
--env <env> view the configuration in the target environment (default: "development")
|
|
203
|
-
--output <output> Specify the path to output in the dist (default: "
|
|
203
|
+
--output <output> Specify the path to output in the dist (default: "./")
|
|
204
204
|
--verbose Show the full function in the result
|
|
205
205
|
-c --config <config> specify the configuration file, which can be a relative or absolute path
|
|
206
206
|
-h, --help show command help
|
|
@@ -19,4 +19,4 @@ export default defineConfig({
|
|
|
19
19
|
});
|
|
20
20
|
```
|
|
21
21
|
|
|
22
|
-
This config is implemented based on the Node Polyfill plugin of Rsbuild, you can read [Rsbuild - Node Polyfill Plugin](https://
|
|
22
|
+
This config is implemented based on the Node Polyfill plugin of Rsbuild, you can read [Rsbuild - Node Polyfill Plugin](https://github.com/rspack-contrib/rsbuild-plugin-node-polyfill) documentation for details.
|
|
@@ -92,7 +92,7 @@ export default {
|
|
|
92
92
|
};
|
|
93
93
|
```
|
|
94
94
|
|
|
95
|
-
See details in [plugin-image-compress](https://
|
|
95
|
+
See details in [plugin-image-compress](https://github.com/rspack-contrib/rsbuild-plugin-image-compress).
|
|
96
96
|
|
|
97
97
|
## Split Chunk
|
|
98
98
|
|
|
@@ -35,19 +35,19 @@ Here are the official Rsbuild plugins built into Modern.js:
|
|
|
35
35
|
| [Styled Components Plugin](https://rsbuild.dev/plugins/list/plugin-styled-components) | Provides compile-time support for styled-components | [tools.styledComponents](/configure/app/tools/styled-components.html) |
|
|
36
36
|
| [Assets Retry Plugin](https://rsbuild.dev/plugins/list/plugin-assets-retry) | Used to automatically resend requests when static assets fail to load | [output.assetsRetry](/configure/app/output/assets-retry.html) |
|
|
37
37
|
| [Type Check Plugin](https://rsbuild.dev/plugins/list/plugin-type-check) | Used to run TypeScript type checker on a separate process | [output.disableTsChecker](/configure/app/output/disable-ts-checker.html)<br />[tools.tsChecker](/configure/app/tools/ts-checker.html) |
|
|
38
|
-
| [Node Polyfill Plugin](https://
|
|
38
|
+
| [Node Polyfill Plugin](https://github.com/rspack-contrib/rsbuild-plugin-node-polyfill) | Used to inject polyfills of Node core modules in the browser side | [output.disableNodePolyfill](/configure/app/output/disable-node-polyfill.html) |
|
|
39
39
|
| [Source Build Plugin](https://rsbuild.dev/plugins/list/plugin-source-build) | Supports referencing source code from other subdirectories | [experiments.sourceBuild](/configure/app/experiments/source-build.html) |
|
|
40
|
-
| [Check Syntax Plugin](https://
|
|
41
|
-
| [CSS Minimizer Plugin](https://
|
|
42
|
-
| [Pug Plugin](https://
|
|
40
|
+
| [Check Syntax Plugin](https://github.com/rspack-contrib/rsbuild-plugin-check-syntax) | Used to analyze the syntax compatibility of artifacts | [security.checkSyntax](/configure/app/security/check-syntax.html) |
|
|
41
|
+
| [CSS Minimizer Plugin](https://github.com/rspack-contrib/rsbuild-plugin-css-minimizer) | Used to customize CSS minimizer, switch to [cssnano](https://cssnano.co/) or other tools for CSS compression | [tools.minifyCss](/configure/app/tools/minify-css.html) |
|
|
42
|
+
| [Pug Plugin](https://github.com/rspack-contrib/rsbuild-plugin-pug) | Provides support for the Pug template engine | [tools.pug](/configure/app/tools/pug.html) |
|
|
43
43
|
| [Rem Plugin](https://rsbuild.dev/plugins/list/plugin-rem) | Implements the rem adaptive layout for mobile pages | [output.convertToRem](/configure/app/output/convert-to-rem.html) |
|
|
44
|
-
| [YAML Plugin](https://
|
|
45
|
-
| [TOML Plugin](https://
|
|
44
|
+
| [YAML Plugin](https://github.com/rspack-contrib/rsbuild-plugin-yaml) | Used to import YAML files and convert them into JavaScript objects | [TOML File](/guides/basic-features/json-files.html#toml-file) |
|
|
45
|
+
| [TOML Plugin](https://github.com/rspack-contrib/rsbuild-plugin-toml) | Used to import TOML files and convert them into JavaScript objects | [YAML File](/guides/basic-features/json-files.html#yaml-file) |
|
|
46
46
|
|
|
47
47
|
### Un-builtin Plugins
|
|
48
48
|
|
|
49
49
|
Here are the official Rsbuild plugins that are not built into Modern.js:
|
|
50
50
|
|
|
51
|
-
- [Image Compress Plugin](https://
|
|
51
|
+
- [Image Compress Plugin](https://github.com/rspack-contrib/rsbuild-plugin-image-compress): Compress the image resources used in the project.
|
|
52
52
|
- [Stylus Plugin](https://rsbuild.dev/plugins/list/plugin-stylus): Use Stylus as the CSS preprocessor.
|
|
53
|
-
- [UMD Plugin](https://
|
|
53
|
+
- [UMD Plugin](https://github.com/rspack-contrib/rsbuild-plugin-umd): Used to build outputs in UMD format.
|
|
@@ -674,17 +674,17 @@ export const myPlugin = (): ServerPlugin => ({
|
|
|
674
674
|
## Runtime
|
|
675
675
|
|
|
676
676
|
:::note
|
|
677
|
-
|
|
677
|
+
Currently, the Runtime plugin is not fully open, and the API does not guarantee stability. Use with caution.
|
|
678
678
|
:::
|
|
679
679
|
|
|
680
|
-
The Runtime plugin is mainly used
|
|
680
|
+
The Runtime plugin is mainly used by developers to add behaviors before application rendering and to modify components that need to be rendered.
|
|
681
681
|
|
|
682
|
-
### `
|
|
682
|
+
### `beforeRender`
|
|
683
683
|
|
|
684
|
-
- Function:
|
|
684
|
+
- Function: Add behaviors before application rendering
|
|
685
685
|
- Execution stage: Rendering (SSR/CSR).
|
|
686
|
-
- Hook model: `
|
|
687
|
-
- Type: `
|
|
686
|
+
- Hook model: `AsyncWorkflow`
|
|
687
|
+
- Type: `AsyncWorkflow<RuntimeContext, void>`
|
|
688
688
|
- Example:
|
|
689
689
|
|
|
690
690
|
```ts
|
|
@@ -693,27 +693,22 @@ import type { Plugin } from '@modern-js/runtime';
|
|
|
693
693
|
export const myPlugin = (): Plugin => ({
|
|
694
694
|
setup(api) {
|
|
695
695
|
return {
|
|
696
|
-
|
|
696
|
+
beforeRender(context) {
|
|
697
697
|
// do something
|
|
698
|
-
return next({ context });
|
|
699
698
|
},
|
|
700
699
|
};
|
|
701
700
|
},
|
|
702
701
|
});
|
|
703
702
|
```
|
|
704
703
|
|
|
705
|
-
### `
|
|
704
|
+
### `wrapRoot`
|
|
706
705
|
|
|
707
|
-
- Function:
|
|
706
|
+
- Function: Modify components that need to be rendered
|
|
708
707
|
- Execution stage: Rendering (SSR/CSR).
|
|
709
|
-
- Hook model: `
|
|
710
|
-
- Type: `
|
|
708
|
+
- Hook model: `Waterfall`
|
|
709
|
+
- Type: `Waterfall<React.ComponentType<any>>`
|
|
711
710
|
- Example:
|
|
712
711
|
|
|
713
|
-
:::note
|
|
714
|
-
When using the hoc hook, you need to copy the static properties of the original App component to the new component and pass through the props.
|
|
715
|
-
:::
|
|
716
|
-
|
|
717
712
|
```ts
|
|
718
713
|
import { createContext } from 'react';
|
|
719
714
|
import type { Plugin } from '@modern-js/runtime';
|
|
@@ -722,18 +717,15 @@ export const myPlugin = (): Plugin => ({
|
|
|
722
717
|
setup(api) {
|
|
723
718
|
const FooContext = createContext('');
|
|
724
719
|
return {
|
|
725
|
-
|
|
720
|
+
wrapRoot(App) {
|
|
726
721
|
const AppWrapper = (props: any) => {
|
|
727
722
|
return (
|
|
728
|
-
<FooContext.Provider
|
|
723
|
+
<FooContext.Provider value={'test'}>
|
|
729
724
|
<App {...props} />
|
|
730
725
|
</FooContext.Provider>
|
|
731
726
|
);
|
|
732
727
|
};
|
|
733
|
-
return
|
|
734
|
-
App: AppWrapper,
|
|
735
|
-
config
|
|
736
|
-
});
|
|
728
|
+
return AppWrapper;
|
|
737
729
|
},
|
|
738
730
|
};
|
|
739
731
|
},
|
|
@@ -200,7 +200,7 @@ Usage: modern inspect [options]
|
|
|
200
200
|
|
|
201
201
|
Options:
|
|
202
202
|
--env <env> 查看指定环境下的配置 (default: "development")
|
|
203
|
-
--output <output> 指定在 dist 目录下输出的路径 (default: "
|
|
203
|
+
--output <output> 指定在 dist 目录下输出的路径 (default: "./")
|
|
204
204
|
--verbose 在结果中展示函数的完整内容
|
|
205
205
|
-c --config <config> 指定配置文件路径，可以为相对路径或绝对路径
|
|
206
206
|
-h, --help 显示命令帮助
|
|
@@ -19,4 +19,4 @@ export default defineConfig({
|
|
|
19
19
|
});
|
|
20
20
|
```
|
|
21
21
|
|
|
22
|
-
该配置项基于 Rsbuild 的 Node Polyfill 插件实现，你可以阅读 [Rsbuild - Node Polyfill 插件](https://
|
|
22
|
+
该配置项基于 Rsbuild 的 Node Polyfill 插件实现，你可以阅读 [Rsbuild - Node Polyfill 插件](https://github.com/rspack-contrib/rsbuild-plugin-node-polyfill) 文档来了解详细信息。
|
|
@@ -35,19 +35,19 @@ Modern.js 从 `MAJOR_VERSION.46.0` 起开始将底层的构建工具升级为 [R
|
|
|
35
35
|
| [Styled Components 插件](https://rsbuild.dev/zh/plugins/list/plugin-styled-components) | 提供对 styled-components 的编译时支持 | [tools.styledComponents](/configure/app/tools/styled-components.html) |
|
|
36
36
|
| [Assets Retry 插件](https://rsbuild.dev/zh/plugins/list/plugin-assets-retry) | 用于在静态资源加载失败时自动发起重试请求 | [output.assetsRetry](/configure/app/output/assets-retry.html) |
|
|
37
37
|
| [Type Check 插件](https://rsbuild.dev/zh/plugins/list/plugin-type-check) | 用于在单独的进程中运行 TypeScript 类型检查 | [output.disableTsChecker](/configure/app/output/disable-ts-checker.html)<br />[tools.tsChecker](/configure/app/tools/ts-checker.html) |
|
|
38
|
-
| [Node Polyfill 插件](https://
|
|
38
|
+
| [Node Polyfill 插件](https://github.com/rspack-contrib/rsbuild-plugin-node-polyfill) | 用于注入 Node 核心模块在浏览器端的 polyfills | [output.disableNodePolyfill](/configure/app/output/disable-node-polyfill.html) |
|
|
39
39
|
| [Source Build 插件](https://rsbuild.dev/zh/plugins/list/plugin-source-build) | 用于 monorepo 场景，支持引用其他子目录的源代码，并完成构建和热更新 | [experiments.sourceBuild](/configure/app/experiments/source-build.html) |
|
|
40
|
-
| [Check Syntax 插件](https://
|
|
41
|
-
| [CSS Minimizer 插件](https://
|
|
42
|
-
| [Pug 插件](https://
|
|
40
|
+
| [Check Syntax 插件](https://github.com/rspack-contrib/rsbuild-plugin-check-syntax) | 用于分析产物的语法兼容性，判断是否存在导致兼容性问题的高级语法 | [security.checkSyntax](/configure/app/security/check-syntax.html) |
|
|
41
|
+
| [CSS Minimizer 插件](https://github.com/rspack-contrib/rsbuild-plugin-css-minimizer) | 用于自定义 CSS 压缩工具，切换到 [cssnano](https://cssnano.co/) 或其他工具进行 CSS 压缩。 | [tools.minifyCss](/configure/app/tools/minify-css.html) |
|
|
42
|
+
| [Pug 插件](https://github.com/rspack-contrib/rsbuild-plugin-pug) | 提供对 Pug 模板引擎的支持 | [tools.pug](/configure/app/tools/pug.html) |
|
|
43
43
|
| [Rem 插件](https://rsbuild.dev/zh/plugins/list/plugin-rem) | 用于实现移动端页面的 rem 自适应布局 | [output.convertToRem](/configure/app/output/convert-to-rem.html) |
|
|
44
|
-
| [YAML 插件](https://
|
|
45
|
-
| [TOML 插件](https://
|
|
44
|
+
| [YAML 插件](https://github.com/rspack-contrib/rsbuild-plugin-yaml) | 用于引用 YAML 文件，并将其转换为 JavaScript 对象 | [TOML 文件](/guides/basic-features/json-files.html#toml-文件) |
|
|
45
|
+
| [TOML 插件](https://github.com/rspack-contrib/rsbuild-plugin-toml) | 用于引用 TOML 文件，并将其转换为 JavaScript 对象 | [YAML 文件](/guides/basic-features/json-files.html#yaml-文件) |
|
|
46
46
|
|
|
47
47
|
### 未内置插件
|
|
48
48
|
|
|
49
49
|
以下是未在 Modern.js 中内置的 Rsbuild 官方插件：
|
|
50
50
|
|
|
51
|
-
- [Image Compress 插件](https://
|
|
51
|
+
- [Image Compress 插件](https://github.com/rspack-contrib/rsbuild-plugin-image-compress)：将项目中用到的图片资源进行压缩处理。
|
|
52
52
|
- [Stylus 插件](https://rsbuild.dev/zh/plugins/list/plugin-stylus)：使用 Stylus 作为 CSS 预处理器。
|
|
53
|
-
- [UMD 插件](https://
|
|
53
|
+
- [UMD 插件](https://github.com/rspack-contrib/rsbuild-plugin-umd)：用于构建 UMD 格式的产物。
|
|
@@ -680,14 +680,14 @@ export const myPlugin = (): ServerPlugin => ({
|
|
|
680
680
|
|
|
681
681
|
:::
|
|
682
682
|
|
|
683
|
-
Runtime
|
|
683
|
+
Runtime 插件主要用于开发者自定义应用渲染前行为和修改需要渲染的组件。
|
|
684
684
|
|
|
685
|
-
### `
|
|
685
|
+
### `beforeRender`
|
|
686
686
|
|
|
687
|
-
-
|
|
687
|
+
- 功能：在应用渲染之前增加行为
|
|
688
688
|
- 执行阶段：渲染（SSR/CSR）
|
|
689
|
-
- Hook 模型：`
|
|
690
|
-
- 类型：`
|
|
689
|
+
- Hook 模型：`AsyncWorkflow`
|
|
690
|
+
- 类型：`AsyncWorkflow<RuntimeContext， void>`
|
|
691
691
|
- 使用示例：
|
|
692
692
|
|
|
693
693
|
```ts
|
|
@@ -696,27 +696,22 @@ import type { Plugin } from '@modern-js/runtime';
|
|
|
696
696
|
export const myPlugin = (): Plugin => ({
|
|
697
697
|
setup(api) {
|
|
698
698
|
return {
|
|
699
|
-
|
|
699
|
+
beforeRender(context) {
|
|
700
700
|
// do something
|
|
701
|
-
return next({ context });
|
|
702
701
|
},
|
|
703
702
|
};
|
|
704
703
|
},
|
|
705
704
|
});
|
|
706
705
|
```
|
|
707
706
|
|
|
708
|
-
### `
|
|
707
|
+
### `wrapRoot`
|
|
709
708
|
|
|
710
709
|
- 功能：修改需要渲染的组件
|
|
711
710
|
- 执行阶段：渲染（SSR/CSR）
|
|
712
|
-
- Hook 模型：`
|
|
713
|
-
- 类型：`
|
|
711
|
+
- Hook 模型：`Waterfall`
|
|
712
|
+
- 类型：`Waterfall<React.ComponentType<any>>`
|
|
714
713
|
- 使用示例：
|
|
715
714
|
|
|
716
|
-
:::note
|
|
717
|
-
使用 hoc 钩子时，需要把原来的 App 组件的静态属性拷贝到新的组件上，并透传 props.
|
|
718
|
-
:::
|
|
719
|
-
|
|
720
715
|
```ts
|
|
721
716
|
import { createContext } from 'react';
|
|
722
717
|
import type { Plugin } from '@modern-js/runtime';
|
|
@@ -725,7 +720,7 @@ export const myPlugin = (): Plugin => ({
|
|
|
725
720
|
setup(api) {
|
|
726
721
|
const FooContext = createContext('');
|
|
727
722
|
return {
|
|
728
|
-
|
|
723
|
+
wrapRoot(App) {
|
|
729
724
|
const AppWrapper = (props: any) => {
|
|
730
725
|
return (
|
|
731
726
|
<FooContext.Provider store={'test'}>
|
|
@@ -733,10 +728,7 @@ export const myPlugin = (): Plugin => ({
|
|
|
733
728
|
</FooContext.Provider>
|
|
734
729
|
);
|
|
735
730
|
};
|
|
736
|
-
return
|
|
737
|
-
App: AppWrapper,
|
|
738
|
-
config
|
|
739
|
-
});
|
|
731
|
+
return AppWrapper
|
|
740
732
|
},
|
|
741
733
|
};
|
|
742
734
|
},
|
package/package.json
CHANGED
|
@@ -15,17 +15,17 @@
|
|
|
15
15
|
"modern",
|
|
16
16
|
"modern.js"
|
|
17
17
|
],
|
|
18
|
-
"version": "2.
|
|
18
|
+
"version": "2.58.0",
|
|
19
19
|
"publishConfig": {
|
|
20
20
|
"registry": "https://registry.npmjs.org/",
|
|
21
21
|
"access": "public",
|
|
22
22
|
"provenance": true
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@modern-js/sandpack-react": "2.
|
|
25
|
+
"@modern-js/sandpack-react": "2.58.0"
|
|
26
26
|
},
|
|
27
27
|
"peerDependencies": {
|
|
28
|
-
"@modern-js/builder-doc": "^2.
|
|
28
|
+
"@modern-js/builder-doc": "^2.58.0"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"classnames": "^2",
|
|
@@ -39,8 +39,8 @@
|
|
|
39
39
|
"@rspress/shared": "1.26.1",
|
|
40
40
|
"@types/node": "^16",
|
|
41
41
|
"@types/fs-extra": "9.0.13",
|
|
42
|
-
"@modern-js/
|
|
43
|
-
"@modern-js/doc
|
|
42
|
+
"@modern-js/doc-plugin-auto-sidebar": "2.58.0",
|
|
43
|
+
"@modern-js/builder-doc": "2.58.0"
|
|
44
44
|
},
|
|
45
45
|
"scripts": {
|
|
46
46
|
"dev": "rspress dev",
|