@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.
Files changed (32) hide show
  1. package/docs/en/apis/app/commands.mdx +9 -9
  2. package/docs/en/configure/app/auto-load-plugin.mdx +3 -3
  3. package/docs/en/configure/app/builder-plugins.mdx +13 -13
  4. package/docs/en/configure/app/output/disable-node-polyfill.mdx +1 -1
  5. package/docs/en/configure/app/source/enable-async-entry.mdx +1 -1
  6. package/docs/en/guides/advanced-features/compatibility.mdx +1 -1
  7. package/docs/en/guides/advanced-features/optimize-bundle.mdx +7 -7
  8. package/docs/en/guides/advanced-features/rsbuild-plugin.mdx +51 -0
  9. package/docs/en/guides/advanced-features/rspack-start.mdx +1 -3
  10. package/docs/en/guides/advanced-features/using-storybook.mdx +202 -20
  11. package/docs/en/guides/basic-features/css.mdx +2 -2
  12. package/docs/en/guides/concept/builder.mdx +23 -25
  13. package/docs/en/guides/get-started/tech-stack.mdx +1 -1
  14. package/docs/en/guides/topic-detail/framework-plugin/introduction.mdx +1 -1
  15. package/docs/en/guides/topic-detail/micro-frontend/c02-development.mdx +35 -4
  16. package/docs/zh/apis/app/commands.mdx +9 -9
  17. package/docs/zh/configure/app/auto-load-plugin.mdx +3 -3
  18. package/docs/zh/configure/app/builder-plugins.mdx +14 -14
  19. package/docs/zh/configure/app/output/disable-node-polyfill.mdx +1 -1
  20. package/docs/zh/guides/advanced-features/compatibility.mdx +1 -1
  21. package/docs/zh/guides/advanced-features/optimize-bundle.mdx +8 -8
  22. package/docs/zh/guides/advanced-features/rsbuild-plugin.mdx +51 -0
  23. package/docs/zh/guides/advanced-features/rspack-start.mdx +1 -1
  24. package/docs/zh/guides/advanced-features/using-storybook.mdx +204 -21
  25. package/docs/zh/guides/basic-features/css.mdx +2 -2
  26. package/docs/zh/guides/concept/builder.mdx +20 -22
  27. package/docs/zh/guides/get-started/tech-stack.mdx +1 -1
  28. package/docs/zh/guides/topic-detail/framework-plugin/introduction.mdx +1 -1
  29. package/docs/zh/guides/topic-detail/micro-frontend/c02-development.mdx +35 -6
  30. package/package.json +7 -7
  31. package/docs/en/configure/app/source/compile-js-data-uri.mdx +0 -9
  32. 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
- **Modern.js 的构建能力由 [Modern.js Builder](https://modernjs.dev/builder) 提供。**
7
+ Modern.js 内部基于 [Rsbuild](https://rsbuild.dev/) 封装了自身的构建工具(Modern.js Builder),并支持在 Webpack 和 Rspack 两种打包工具间无缝切换。
8
8
 
9
- Modern.js Builder 是 Modern.js 体系的核心组件之一,它是一个基于 Rspack 的 Web 构建工具,可以脱离 Modern.js 被独立使用。Modern.js Builder 同时支持 webpack 和 Rspack 等多种打包工具,默认情况下使用最成熟的 webpack 进行打包。
9
+ :::tip 什么是 Rsbuild
10
+ Rsbuild 是基于 Rspack 的构建工具,是一个增强版的 Rspack CLI,更易用、开箱即用。
11
+ :::
10
12
 
11
13
  ## 构建架构
12
14
 
13
15
  从构建的角度看,Modern.js 分为三层架构,从上到下依次是:
14
16
 
15
- - 上层研发框架:Modern.js
16
- - 通用构建工具:Modern.js Builder
17
- - 底层打包工具:webpack 和 Rspack。
17
+ - 研发框架:Modern.js(开源)和 EdenX(内部)。
18
+ - 构建工具:Rsbuild
19
+ - 打包工具:Webpack 和 Rspack。
18
20
 
19
- <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/builder-layers-0824.png" style={{ width: '100%', maxWidth: '540px' }} />
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
- 由于 Modern.js Builder 是一个可独立使用的模块,我们为它提供了单独的文档,文档地址为:[modernjs.dev/builder](https://modernjs.dev/builder)。
28
+ Rsbuild 的文档地址为:https://rsbuild.dev/
24
29
 
25
- 在该文档中,你可以了解到 Modern.js Builder 的详细介绍,同时也可以找到各个构建能力的完整使用指南。当你遇到构建方面的需求或问题时,建议你优先阅读 Modern.js Builder 文档来解决。
30
+ 在该文档中,你可以了解到 Rsbuild 的详细介绍,同时也可以找到各个构建能力的完整使用指南。
26
31
 
27
- ## 构建配置
32
+ 如果你想要了解某些构建配置的使用,建议你优先阅读 Modern.js 文档,因为 Modern.js 中的构建配置和默认值与 Rsbuild 并不完全相同。
28
33
 
29
- Modern.js 的配置继承自 Modern.js Builder,因此你可以在 Modern.js 中使用 Modern.js Builder 提供的所有构建配置。
34
+ ## 构建插件
30
35
 
31
- Modern.js Builder `html.title` 配置项为例,你可以直接在 `modern.config.ts` 文件中使用该配置项,它会被自动传递给 Modern.js Builder。
36
+ Modern.js 中,你可以注册 Webpack 插件、Rspack 插件或 Rsbuild 插件:
32
37
 
33
- ```ts title="modern.config.js"
34
- export default defineConfig({
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
- Modern.js Builder 提供了丰富的构建能力,包括 JavaScript 编译、CSS 编译、静态资源处理、代码热更新、代码压缩、TS 类型检查等几十种能力。
43
+ Rsbuild 提供了丰富的构建能力,包括 JavaScript 编译、CSS 编译、静态资源处理、代码热更新、代码压缩、TS 类型检查等几十种能力。
46
44
 
47
- 我们推荐你阅读 [「Modern.js Builder - 功能导航」](https://modernjs.dev/builder/guide/features.html) 来了解 Modern.js Builder 提供的所有构建能力。
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://modernjs.dev/builder/plugins/plugin-stylus.html) 来使用。
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
- 插件需要在配置文件中显示注册才能够生效,当需要为 Modern.js 添加插件时,可以将它配置到 [plugin](/configure/app/plugins.html) 字段中:
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.46.1",
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.46.1"
25
+ "@modern-js/sandpack-react": "2.47.0"
26
26
  },
27
27
  "peerDependencies": {
28
- "@modern-js/builder-doc": "^2.46.1"
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.10.0",
39
- "@rspress/shared": "1.10.0",
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.46.1",
43
- "@modern-js/doc-plugin-auto-sidebar": "2.46.1"
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",
@@ -1,9 +0,0 @@
1
- ---
2
- sidebar_label: compileJsDataURI
3
- ---
4
-
5
- # source.compileJsDataURI
6
-
7
- import Main from '@modern-js/builder-doc/docs/en/config/source/compileJsDataURI.md';
8
-
9
- <Main />
@@ -1,9 +0,0 @@
1
- ---
2
- sidebar_label: compileJsDataURI
3
- ---
4
-
5
- # source.compileJsDataURI
6
-
7
- import Main from '@modern-js/builder-doc/docs/zh/config/source/compileJsDataURI.md';
8
-
9
- <Main />