@modern-js/main-doc 2.57.1 → 2.58.0
Sign up to get free protection for your applications and to get access to all the features.
- 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",
|