@modern-js/main-doc 2.46.1 → 2.47.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 +9 -9
- package/docs/en/configure/app/auto-load-plugin.mdx +3 -3
- package/docs/en/configure/app/builder-plugins.mdx +13 -13
- package/docs/en/configure/app/output/disable-node-polyfill.mdx +1 -1
- package/docs/en/configure/app/source/enable-async-entry.mdx +1 -1
- package/docs/en/guides/advanced-features/compatibility.mdx +1 -1
- package/docs/en/guides/advanced-features/optimize-bundle.mdx +7 -7
- package/docs/en/guides/advanced-features/rsbuild-plugin.mdx +51 -0
- package/docs/en/guides/advanced-features/rspack-start.mdx +1 -3
- package/docs/en/guides/advanced-features/using-storybook.mdx +202 -20
- package/docs/en/guides/basic-features/css.mdx +2 -2
- package/docs/en/guides/concept/builder.mdx +23 -25
- package/docs/en/guides/get-started/tech-stack.mdx +1 -1
- package/docs/en/guides/topic-detail/framework-plugin/introduction.mdx +1 -1
- package/docs/en/guides/topic-detail/micro-frontend/c02-development.mdx +35 -4
- package/docs/zh/apis/app/commands.mdx +9 -9
- package/docs/zh/configure/app/auto-load-plugin.mdx +3 -3
- package/docs/zh/configure/app/builder-plugins.mdx +14 -14
- package/docs/zh/configure/app/output/disable-node-polyfill.mdx +1 -1
- package/docs/zh/guides/advanced-features/compatibility.mdx +1 -1
- package/docs/zh/guides/advanced-features/optimize-bundle.mdx +8 -8
- package/docs/zh/guides/advanced-features/rsbuild-plugin.mdx +51 -0
- package/docs/zh/guides/advanced-features/rspack-start.mdx +1 -1
- package/docs/zh/guides/advanced-features/using-storybook.mdx +204 -21
- package/docs/zh/guides/basic-features/css.mdx +2 -2
- package/docs/zh/guides/concept/builder.mdx +20 -22
- package/docs/zh/guides/get-started/tech-stack.mdx +1 -1
- package/docs/zh/guides/topic-detail/framework-plugin/introduction.mdx +1 -1
- package/docs/zh/guides/topic-detail/micro-frontend/c02-development.mdx +35 -6
- package/package.json +7 -7
- package/docs/en/configure/app/source/compile-js-data-uri.mdx +0 -9
- package/docs/zh/configure/app/source/compile-js-data-uri.mdx +0 -9
@@ -4,44 +4,42 @@ sidebar_position: 2
|
|
4
4
|
|
5
5
|
# 构建工具
|
6
6
|
|
7
|
-
|
7
|
+
Modern.js 内部基于 [Rsbuild](https://rsbuild.dev/) 封装了自身的构建工具(Modern.js Builder),并支持在 Webpack 和 Rspack 两种打包工具间无缝切换。
|
8
8
|
|
9
|
-
|
9
|
+
:::tip 什么是 Rsbuild
|
10
|
+
Rsbuild 是基于 Rspack 的构建工具,是一个增强版的 Rspack CLI,更易用、开箱即用。
|
11
|
+
:::
|
10
12
|
|
11
13
|
## 构建架构
|
12
14
|
|
13
15
|
从构建的角度看,Modern.js 分为三层架构,从上到下依次是:
|
14
16
|
|
15
|
-
-
|
16
|
-
-
|
17
|
-
-
|
17
|
+
- 研发框架:Modern.js(开源)和 EdenX(内部)。
|
18
|
+
- 构建工具:Rsbuild。
|
19
|
+
- 打包工具:Webpack 和 Rspack。
|
18
20
|
|
19
|
-
<img
|
21
|
+
<img
|
22
|
+
src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/build-layers-02193.png"
|
23
|
+
style={{ width: '100%', maxWidth: '540px' }}
|
24
|
+
/>
|
20
25
|
|
21
26
|
## 构建文档
|
22
27
|
|
23
|
-
|
28
|
+
Rsbuild 的文档地址为:https://rsbuild.dev/
|
24
29
|
|
25
|
-
在该文档中,你可以了解到
|
30
|
+
在该文档中,你可以了解到 Rsbuild 的详细介绍,同时也可以找到各个构建能力的完整使用指南。
|
26
31
|
|
27
|
-
|
32
|
+
如果你想要了解某些构建配置的使用,建议你优先阅读 Modern.js 文档,因为 Modern.js 中的构建配置和默认值与 Rsbuild 并不完全相同。
|
28
33
|
|
29
|
-
|
34
|
+
## 构建插件
|
30
35
|
|
31
|
-
|
36
|
+
在 Modern.js 中,你可以注册 Webpack 插件、Rspack 插件或 Rsbuild 插件:
|
32
37
|
|
33
|
-
|
34
|
-
|
35
|
-
html: {
|
36
|
-
title: 'example',
|
37
|
-
},
|
38
|
-
});
|
39
|
-
```
|
40
|
-
|
41
|
-
关于构建配置的详细说明,请参考 [「Modern.js Builder - Builder 配置」](https://modernjs.dev/builder/guide/basic/builder-config.html)。
|
38
|
+
- Webpack / Rspack 插件:通过 [tools.bundlerChain](/configure/app/tools/bundler-chain) 配置。
|
39
|
+
- Rsbuild 插件:通过 [builderPlugins](/configure/app/builder-plugins) 配置。
|
42
40
|
|
43
41
|
## 构建能力
|
44
42
|
|
45
|
-
|
43
|
+
Rsbuild 提供了丰富的构建能力,包括 JavaScript 编译、CSS 编译、静态资源处理、代码热更新、代码压缩、TS 类型检查等几十种能力。
|
46
44
|
|
47
|
-
我们推荐你阅读 [「
|
45
|
+
我们推荐你阅读 [「Rsbuild - 功能导航」](https://rsbuild.dev/zh/guide/start/features) 来了解 Rsbuild 提供的所有构建能力。
|
@@ -89,7 +89,7 @@ Modern.js 支持[「启用 Tailwind CSS」](/guides/basic-features/css.html#使
|
|
89
89
|
Modern.js 支持 [Sass](https://sass-lang.com/)、[Less](https://lesscss.org/) 和 [Stylus](https://stylus-lang.com/) 三种 CSS 预处理器:
|
90
90
|
|
91
91
|
- 默认支持 Sass 和 Less,开箱即用。
|
92
|
-
- 可选支持 Stylus,请参考[「Stylus 插件」](https://
|
92
|
+
- 可选支持 Stylus,请参考[「Stylus 插件」](https://rsbuild.dev/zh/plugins/list/plugin-stylus) 来使用。
|
93
93
|
|
94
94
|
---
|
95
95
|
|
@@ -10,7 +10,7 @@ Modern.js 提供了一套拥有完整生命周期的插件系统。插件可用
|
|
10
10
|
|
11
11
|
## 使用方式
|
12
12
|
|
13
|
-
|
13
|
+
插件需要在配置文件中显式注册才能够生效,当需要为 Modern.js 添加插件时,可以将它配置到 [plugins](/configure/app/plugins.html) 字段中:
|
14
14
|
|
15
15
|
```ts title="edenx.config.ts"
|
16
16
|
// an example for bff
|
@@ -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,36 @@ 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 basename = useHref('/table');
|
159
|
+
const { Table } = useModuleApps();
|
160
|
+
return <Table useLocation={useLocation} basename={basename} />;
|
161
|
+
};
|
162
|
+
```
|
163
|
+
</Tab>
|
164
|
+
<Tab label="react-router-dom@5">
|
165
|
+
```tsx
|
166
|
+
import { useLocation, useHistory } from 'react-router-dom';
|
167
|
+
const App = () => {
|
168
|
+
const history = useHistory();
|
169
|
+
const basename = history.createHref({ pathname: '/table' });
|
170
|
+
const { Table } = useModuleApps();
|
171
|
+
return <Table useLocation={useLocation} basename={basename} />;
|
172
|
+
};
|
173
|
+
```
|
174
|
+
</Tab>
|
175
|
+
</Tabs>
|
176
|
+
|
148
177
|
### 创建约定式路由子应用
|
149
178
|
|
150
179
|
通过命令行工具初始化项目:
|
package/package.json
CHANGED
@@ -15,17 +15,17 @@
|
|
15
15
|
"modern",
|
16
16
|
"modern.js"
|
17
17
|
],
|
18
|
-
"version": "2.
|
18
|
+
"version": "2.47.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.47.0"
|
26
26
|
},
|
27
27
|
"peerDependencies": {
|
28
|
-
"@modern-js/builder-doc": "^2.
|
28
|
+
"@modern-js/builder-doc": "^2.47.0"
|
29
29
|
},
|
30
30
|
"devDependencies": {
|
31
31
|
"classnames": "^2",
|
@@ -35,12 +35,12 @@
|
|
35
35
|
"ts-node": "^10.9.1",
|
36
36
|
"typescript": "^5",
|
37
37
|
"fs-extra": "^10",
|
38
|
-
"rspress": "1.
|
39
|
-
"@rspress/shared": "1.
|
38
|
+
"rspress": "1.11.2",
|
39
|
+
"@rspress/shared": "1.11.2",
|
40
40
|
"@types/node": "^16",
|
41
41
|
"@types/fs-extra": "9.0.13",
|
42
|
-
"@modern-js/builder-doc": "2.
|
43
|
-
"@modern-js/doc-plugin-auto-sidebar": "2.
|
42
|
+
"@modern-js/builder-doc": "2.47.0",
|
43
|
+
"@modern-js/doc-plugin-auto-sidebar": "2.47.0"
|
44
44
|
},
|
45
45
|
"scripts": {
|
46
46
|
"dev": "rspress dev",
|