@modern-js/main-doc 0.0.0-nightly-20240124170638 → 0.0.0-nightly-20240125170634
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/guides/advanced-features/rsbuild-plugin.mdx +51 -0
- package/docs/en/guides/topic-detail/micro-frontend/c02-development.mdx +42 -4
- package/docs/zh/guides/advanced-features/rsbuild-plugin.mdx +51 -0
- package/docs/zh/guides/topic-detail/micro-frontend/c02-development.mdx +42 -6
- package/package.json +5 -5
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
---
|
|
2
|
+
sidebar_position: 21
|
|
3
|
+
title: Using Rsbuild Plugin
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Using Rsbuild Plugin
|
|
7
|
+
|
|
8
|
+
## Introduce Rsbuild Plugin
|
|
9
|
+
|
|
10
|
+
Rsbuild is the build tool of Modern.js. You can modify the default build behavior and add various additional features by adding the Rsbuild plugin, including but not limited to:
|
|
11
|
+
|
|
12
|
+
- Modifying Rspack configurations
|
|
13
|
+
- Processing new file types
|
|
14
|
+
- Modifying or compiling files
|
|
15
|
+
- Deploying artifacts
|
|
16
|
+
|
|
17
|
+
You can register the Rsbuild plugin through the `builderPlugins` option in `modern.config.ts`, see [builderPlugins](/configure/app/builder-plugins) for details.
|
|
18
|
+
|
|
19
|
+
## Official Plugins
|
|
20
|
+
|
|
21
|
+
:::tip
|
|
22
|
+
Most plugins in Rsbuild have been built into Modern.js. For example, when you need to inject the Polyfill of the Node module, you can directly use the [output.disableNodePolyfill](/configure/app/output/disable-node-polyfill.html) configuration.
|
|
23
|
+
:::
|
|
24
|
+
|
|
25
|
+
### Builtin Plugins
|
|
26
|
+
|
|
27
|
+
Here are the official Rsbuild plugins built into Modern.js:
|
|
28
|
+
|
|
29
|
+
| Plugin Name | Introduce | Modern.js Link |
|
|
30
|
+
| ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------- |
|
|
31
|
+
| [React Plugin](https://rsbuild.dev/plugins/list/plugin-react) | Provides support for React | - |
|
|
32
|
+
| [SVGR Plugin](https://rsbuild.dev/plugins/list/plugin-svgr) | Support convert SVG to React components | [output.disableSvgr](/configure/app/output/disable-svgr)<br />[output.svgDefaultExport](/configure/app/output/svg-default-export) |
|
|
33
|
+
| [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) |
|
|
34
|
+
| [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) |
|
|
35
|
+
| [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) |
|
|
36
|
+
| [Node Polyfill Plugin](https://rsbuild.dev/plugins/list/plugin-node-polyfill) | Used to inject polyfills of Node core modules in the browser side | [output.disableNodePolyfill](/configure/app/output/disable-node-polyfill.html) |
|
|
37
|
+
| [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) |
|
|
38
|
+
| [Check Syntax Plugin](https://rsbuild.dev/plugins/list/plugin-check-syntax) | Used to analyze the syntax compatibility of artifacts | [security.checkSyntax](/configure/app/security/check-syntax.html) |
|
|
39
|
+
| [CSS Minimizer Plugin](https://rsbuild.dev/plugins/list/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) |
|
|
40
|
+
| [Pug Plugin](https://rsbuild.dev/plugins/list/plugin-pug) | Provides support for the Pug template engine | [tools.pug](/configure/app/tools/pug.html) |
|
|
41
|
+
| [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) |
|
|
42
|
+
| [YAML Plugin](https://rsbuild.dev/plugins/list/plugin-yaml) | Used to import YAML files and convert them into JavaScript objects | [TOML File](/guides/basic-features/json-files.html#toml-file) |
|
|
43
|
+
| [TOML Plugin](https://rsbuild.dev/plugins/list/plugin-toml) | Used to import TOML files and convert them into JavaScript objects | [YAML File](/guides/basic-features/json-files.html#yaml-file) |
|
|
44
|
+
|
|
45
|
+
### Un-builtin Plugins
|
|
46
|
+
|
|
47
|
+
Here are the official Rsbuild plugins that are not built into Modern.js:
|
|
48
|
+
|
|
49
|
+
- [Image Compress Plugin](https://rsbuild.dev/plugins/list/plugin-image-compress): Compress the image resources used in the project.
|
|
50
|
+
- [Stylus Plugin](https://rsbuild.dev/plugins/list/plugin-stylus): Use Stylus as the CSS preprocessor.
|
|
51
|
+
- [UMD Plugin](https://rsbuild.dev/plugins/list/plugin-umd): Used to build outputs in UMD format.
|
|
@@ -12,14 +12,15 @@ Through this chapter you can learn:
|
|
|
12
12
|
|
|
13
13
|
## Create an app
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
The routing modes of the current project are divided into the following three types:
|
|
16
16
|
|
|
17
|
-
-
|
|
18
|
-
-
|
|
17
|
+
- File-based routing (`router: true` and file-based)
|
|
18
|
+
- Self-Controlled routing (`router: true` and create `BrowserRouter`)
|
|
19
|
+
- Other (`router: false` and independent installation of `react-router-dom` in the project)
|
|
19
20
|
|
|
20
21
|
First, clarify the routing mode of the main application [create a file-based routing main App](#file-based-routing-main-app) or [create a self-controlled main App](#self-controlled-main-app)
|
|
21
22
|
|
|
22
|
-
In this
|
|
23
|
+
In this tutorial we will create two sub-applications Table and Dashboard for the main application (Table is reduced routing, Dashboard is self-controlled routing)
|
|
23
24
|
|
|
24
25
|
### File-based Routing Main App
|
|
25
26
|
|
|
@@ -139,6 +140,43 @@ import CustomRouterMicroFrontend from '@site-docs-en/components/custom-router-mi
|
|
|
139
140
|
|
|
140
141
|
<CustomRouterMicroFrontend />
|
|
141
142
|
|
|
143
|
+
### Other Main App
|
|
144
|
+
|
|
145
|
+
Install and use `react-router-dom` independently in the project. The only difference from self-controlled routing is that after setting `router: false`, plugin-garfish cannot obtain `useLocation`, `useHref` and other hooks to assist in calculating basename and main and child applications. Route synchronization
|
|
146
|
+
|
|
147
|
+
import { Tab, Tabs } from 'rspress/theme';
|
|
148
|
+
|
|
149
|
+
<Tabs>
|
|
150
|
+
<Tab label="react-router-dom@6">
|
|
151
|
+
```tsx
|
|
152
|
+
import { useLocation, useHref } from 'react-router-dom';
|
|
153
|
+
const App = () => {
|
|
154
|
+
const { Table } = useModuleApps();
|
|
155
|
+
return <Table useLocation={useLocation} useHref={useHref} />;
|
|
156
|
+
};
|
|
157
|
+
```
|
|
158
|
+
</Tab>
|
|
159
|
+
<Tab label="react-router-dom@5">
|
|
160
|
+
```tsx
|
|
161
|
+
import { useLocation, useHistory } from 'react-router-dom';
|
|
162
|
+
const App = () => {
|
|
163
|
+
const { Table } = useModuleApps();
|
|
164
|
+
return <Table useLocation={useLocation} useHistory={useHistory} />;
|
|
165
|
+
};
|
|
166
|
+
```
|
|
167
|
+
</Tab>
|
|
168
|
+
<Tab label="pass props.basename manually">
|
|
169
|
+
```tsx
|
|
170
|
+
import { useLocation, useHref } from 'react-router-dom';
|
|
171
|
+
const App = () => {
|
|
172
|
+
const basename = useHref('/table');
|
|
173
|
+
const { Table } = useModuleApps();
|
|
174
|
+
return <Table useLocation={useLocation} basename={basename} />;
|
|
175
|
+
};
|
|
176
|
+
```
|
|
177
|
+
</Tab>
|
|
178
|
+
</Tabs>
|
|
179
|
+
|
|
142
180
|
### File-based sub-app
|
|
143
181
|
|
|
144
182
|
Initialize the project with a command line:
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
---
|
|
2
|
+
sidebar_position: 21
|
|
3
|
+
title: 使用 Rsbuild 插件
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# 使用 Rsbuild 插件
|
|
7
|
+
|
|
8
|
+
## 插件介绍
|
|
9
|
+
|
|
10
|
+
Rsbuild 是 Modern.js 底层的构建工具，可通过添加 Rsbuild 插件修改默认的构建行为并添加各类额外功能，包括但不限于：
|
|
11
|
+
|
|
12
|
+
- 修改 Rsbuild 配置
|
|
13
|
+
- 处理新的文件类型
|
|
14
|
+
- 修改或编译文件
|
|
15
|
+
- 部署产物
|
|
16
|
+
|
|
17
|
+
你可以在 `modern.config.ts` 中通过 `builderPlugins` 选项来注册 Rsbuild 插件，详见 [builderPlugins 构建插件](/configure/app/builder-plugins.html)。
|
|
18
|
+
|
|
19
|
+
## 官方插件
|
|
20
|
+
|
|
21
|
+
:::tip
|
|
22
|
+
Rsbuild 中大部分插件已内置在 Modern.js 中，如：需要注入 Node 模块的 Polyfill 时，可直接使用 [output.disableNodePolyfill](/configure/app/output/disable-node-polyfill.html) 配置项。
|
|
23
|
+
:::
|
|
24
|
+
|
|
25
|
+
### 内置插件
|
|
26
|
+
|
|
27
|
+
以下是已在 Modern.js 中内置的 Rsbuild 官方插件：
|
|
28
|
+
|
|
29
|
+
| 插件 | 介绍 | Modern.js 链接 |
|
|
30
|
+
| -------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
|
|
31
|
+
| [React 插件](https://rsbuild.dev/zh/plugins/list/plugin-react) | 提供对 React 的支持 | - |
|
|
32
|
+
| [SVGR 插件](https://rsbuild.dev/zh/plugins/list/plugin-svgr) | 支持将 SVG 图片转换为一个 React 组件使用 | [output.disableSvgr](/configure/app/output/disable-svgr)<br />[output.svgDefaultExport](/configure/app/output/svg-default-export) |
|
|
33
|
+
| [Styled Components 插件](https://rsbuild.dev/zh/plugins/list/plugin-styled-components) | 提供对 styled-components 的编译时支持 | [tools.styledComponents](/configure/app/tools/styled-components.html) |
|
|
34
|
+
| [Assets Retry 插件](https://rsbuild.dev/zh/plugins/list/plugin-assets-retry) | 用于在静态资源加载失败时自动发起重试请求 | [output.assetsRetry](/configure/app/output/assets-retry.html) |
|
|
35
|
+
| [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) |
|
|
36
|
+
| [Node Polyfill 插件](https://rsbuild.dev/zh/plugins/list/plugin-node-polyfill) | 用于注入 Node 核心模块在浏览器端的 polyfills | [output.disableNodePolyfill](/configure/app/output/disable-node-polyfill.html) |
|
|
37
|
+
| [Source Build 插件](https://rsbuild.dev/zh/plugins/list/plugin-source-build) | 用于 monorepo 场景，支持引用其他子目录的源代码，并完成构建和热更新 | [experiments.sourceBuild](/configure/app/experiments/source-build.html) |
|
|
38
|
+
| [Check Syntax 插件](https://rsbuild.dev/zh/plugins/list/plugin-check-syntax) | 用于分析产物的语法兼容性，判断是否存在导致兼容性问题的高级语法 | [security.checkSyntax](/configure/app/security/check-syntax.html) |
|
|
39
|
+
| [CSS Minimizer 插件](https://rsbuild.dev/zh/plugins/list/plugin-css-minimizer) | 用于自定义 CSS 压缩工具，切换到 [cssnano](https://cssnano.co/) 或其他工具进行 CSS 压缩。 | [tools.minifyCss](/configure/app/tools/minify-css.html) |
|
|
40
|
+
| [Pug 插件](https://rsbuild.dev/zh/plugins/list/plugin-pug) | 提供对 Pug 模板引擎的支持 | [tools.pug](/configure/app/tools/pug.html) |
|
|
41
|
+
| [Rem 插件](https://rsbuild.dev/zh/plugins/list/plugin-rem) | 用于实现移动端页面的 rem 自适应布局 | [output.convertToRem](/configure/app/output/convert-to-rem.html) |
|
|
42
|
+
| [YAML 插件](https://rsbuild.dev/zh/plugins/list/plugin-yaml) | 用于引用 YAML 文件，并将其转换为 JavaScript 对象 | [TOML 文件](/guides/basic-features/json-files.html#toml-文件) |
|
|
43
|
+
| [TOML 插件](https://rsbuild.dev/zh/plugins/list/plugin-toml) | 用于引用 TOML 文件，并将其转换为 JavaScript 对象 | [YAML 文件](/guides/basic-features/json-files.html#yaml-文件) |
|
|
44
|
+
|
|
45
|
+
### 未内置插件
|
|
46
|
+
|
|
47
|
+
以下是未在 Modern.js 中内置的 Rsbuild 官方插件：
|
|
48
|
+
|
|
49
|
+
- [Image Compress 插件](https://rsbuild.dev/zh/plugins/list/plugin-image-compress)：将项目中用到的图片资源进行压缩处理。
|
|
50
|
+
- [Stylus 插件](https://rsbuild.dev/zh/plugins/list/plugin-stylus)：使用 Stylus 作为 CSS 预处理器。
|
|
51
|
+
- [UMD 插件](https://rsbuild.dev/zh/plugins/list/plugin-umd)：用于构建 UMD 格式的产物。
|
|
@@ -12,14 +12,13 @@ title: 体验微前端
|
|
|
12
12
|
|
|
13
13
|
## 创建应用
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
目前项目的路由模式分为以下三种
|
|
16
16
|
|
|
17
|
-
-
|
|
18
|
-
-
|
|
17
|
+
- 约定式路由 (设置 `router: true` 并使用文件路由)
|
|
18
|
+
- 自控式路由 (设置 `router: true` 并自己创建 `BrowserRouter` 等)
|
|
19
|
+
- 其他 (设置 `router: false` 项目内自己安装和使用 `react-router-dom`)
|
|
19
20
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
在本次体验中我们会为主应用创建两个子应用 Table 和 Dashboard (Table 为约定式路由，Dashboard 为自控式路由)
|
|
21
|
+
在本教程中我们会为主应用创建两个子应用 Table 和 Dashboard (Table 为约定式路由，Dashboard 为自控式路由)
|
|
23
22
|
|
|
24
23
|
### 创建约定式路由主应用
|
|
25
24
|
|
|
@@ -145,6 +144,43 @@ import CustomRouterMicroFrontend from '@site-docs/components/custom-router-micro
|
|
|
145
144
|
|
|
146
145
|
<CustomRouterMicroFrontend />
|
|
147
146
|
|
|
147
|
+
### 创建其他主应用
|
|
148
|
+
|
|
149
|
+
项目内自己安装和使用 `react-router-dom` , 与自控式路由唯一的区别是, 设置 `router: false` 后 plugin-garfish 无法获得 `useLocation` `useHref` 等 hook 来辅助计算 basename 和主子应用路由同步
|
|
150
|
+
|
|
151
|
+
import { Tab, Tabs } from 'rspress/theme';
|
|
152
|
+
|
|
153
|
+
<Tabs>
|
|
154
|
+
<Tab label="react-router-dom@6">
|
|
155
|
+
```tsx
|
|
156
|
+
import { useLocation, useHref } from 'react-router-dom';
|
|
157
|
+
const App = () => {
|
|
158
|
+
const { Table } = useModuleApps();
|
|
159
|
+
return <Table useLocation={useLocation} useHref={useHref} />;
|
|
160
|
+
};
|
|
161
|
+
```
|
|
162
|
+
</Tab>
|
|
163
|
+
<Tab label="react-router-dom@5">
|
|
164
|
+
```tsx
|
|
165
|
+
import { useLocation, useHistory } from 'react-router-dom';
|
|
166
|
+
const App = () => {
|
|
167
|
+
const { Table } = useModuleApps();
|
|
168
|
+
return <Table useLocation={useLocation} useHistory={useHistory} />;
|
|
169
|
+
};
|
|
170
|
+
```
|
|
171
|
+
</Tab>
|
|
172
|
+
<Tab label="手动传入 props.basename">
|
|
173
|
+
```tsx
|
|
174
|
+
import { useLocation, useHref } from 'react-router-dom';
|
|
175
|
+
const App = () => {
|
|
176
|
+
const basename = useHref('/table');
|
|
177
|
+
const { Table } = useModuleApps();
|
|
178
|
+
return <Table useLocation={useLocation} basename={basename} />;
|
|
179
|
+
};
|
|
180
|
+
```
|
|
181
|
+
</Tab>
|
|
182
|
+
</Tabs>
|
|
183
|
+
|
|
148
184
|
### 创建约定式路由子应用
|
|
149
185
|
|
|
150
186
|
通过命令行工具初始化项目：
|
package/package.json
CHANGED
|
@@ -15,17 +15,17 @@
|
|
|
15
15
|
"modern",
|
|
16
16
|
"modern.js"
|
|
17
17
|
],
|
|
18
|
-
"version": "0.0.0-nightly-
|
|
18
|
+
"version": "0.0.0-nightly-20240125170634",
|
|
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": "0.0.0-nightly-
|
|
25
|
+
"@modern-js/sandpack-react": "0.0.0-nightly-20240125170634"
|
|
26
26
|
},
|
|
27
27
|
"peerDependencies": {
|
|
28
|
-
"@modern-js/builder-doc": "0.0.0-nightly-
|
|
28
|
+
"@modern-js/builder-doc": "0.0.0-nightly-20240125170634"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"classnames": "^2",
|
|
@@ -39,8 +39,8 @@
|
|
|
39
39
|
"@rspress/shared": "1.10.1",
|
|
40
40
|
"@types/node": "^16",
|
|
41
41
|
"@types/fs-extra": "9.0.13",
|
|
42
|
-
"@modern-js/doc
|
|
43
|
-
"@modern-js/
|
|
42
|
+
"@modern-js/builder-doc": "0.0.0-nightly-20240125170634",
|
|
43
|
+
"@modern-js/doc-plugin-auto-sidebar": "0.0.0-nightly-20240125170634"
|
|
44
44
|
},
|
|
45
45
|
"scripts": {
|
|
46
46
|
"dev": "rspress dev",
|