@modern-js/main-doc 0.0.0-nightly-20240218170609 → 0.0.0-nightly-20240219170634
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.
|
@@ -4,21 +4,26 @@ sidebar_position: 2
|
|
|
4
4
|
|
|
5
5
|
# Build Engine
|
|
6
6
|
|
|
7
|
-
Modern.js
|
|
7
|
+
Modern.js internally encapsulates its own build tool (Modern.js Builder) based on [Rsbuild](https://rsbuild.dev/), and supports seamless switching between Webpack and Rspack bundlers.
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
::: tip What is Rsbuild?
|
|
10
|
+
Rsbuild is a build tool based on Rspack. It is an enhanced Rspack CLI, easy-to-use, and ready-to-use out of the box.
|
|
11
|
+
:::
|
|
10
12
|
|
|
11
13
|
## Build Architecture
|
|
12
14
|
|
|
13
|
-
From
|
|
15
|
+
From the building perspective, Modern.js can be divided into three-layers, from top to bottom:
|
|
14
16
|
|
|
15
|
-
- Upper-level
|
|
16
|
-
-
|
|
17
|
-
-
|
|
17
|
+
- Upper-level framework: Modern.js (open source) and EdenX (internal).
|
|
18
|
+
- Build tool: Rsbuild.
|
|
19
|
+
- Bundler: Webpack and 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
|
+
## Build Documentation
|
|
22
27
|
|
|
23
28
|
The documentation address of Rsbuild is: https://rsbuild.dev/
|
|
24
29
|
|
|
@@ -26,7 +31,14 @@ In this documentation, you can learn about the detailed introduction of Rsbuild,
|
|
|
26
31
|
|
|
27
32
|
If you want to understand the use of build configurations, it is recommended that you read the Modern.js documentation first, because the build configurations and defaults in Modern.js are not exactly the same as Rsbuild.
|
|
28
33
|
|
|
29
|
-
##
|
|
34
|
+
## Build Plugins
|
|
35
|
+
|
|
36
|
+
In Modern.js, you can register Webpack plugins, Rspack plugins, or Rsbuild plugins:
|
|
37
|
+
|
|
38
|
+
- Webpack / Rspack plugins: Configured through [tools.bundlerChain](/configure/app/tools/bundler-chain).
|
|
39
|
+
- Rsbuild plugins: Configured through [builderPlugins](/configure/app/builder-plugins).
|
|
40
|
+
|
|
41
|
+
## Build Capabilities
|
|
30
42
|
|
|
31
43
|
Rsbuild provides rich build capabilities, including JavaScript compilation, CSS compilation, static assets processing, code hot update, code compression, TS type checking, and dozens of other capabilities.
|
|
32
44
|
|
|
@@ -4,19 +4,24 @@ sidebar_position: 2
|
|
|
4
4
|
|
|
5
5
|
# 构建工具
|
|
6
6
|
|
|
7
|
-
Modern.js
|
|
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
|
|
|
@@ -26,6 +31,13 @@ Rsbuild 的文档地址为：https://rsbuild.dev/
|
|
|
26
31
|
|
|
27
32
|
如果你想要了解某些构建配置的使用，建议你优先阅读 Modern.js 文档，因为 Modern.js 中的构建配置和默认值与 Rsbuild 并不完全相同。
|
|
28
33
|
|
|
34
|
+
## 构建插件
|
|
35
|
+
|
|
36
|
+
在 Modern.js 中，你可以注册 Webpack 插件、Rspack 插件或 Rsbuild 插件：
|
|
37
|
+
|
|
38
|
+
- Webpack / Rspack 插件：通过 [tools.bundlerChain](/configure/app/tools/bundler-chain) 配置。
|
|
39
|
+
- Rsbuild 插件：通过 [builderPlugins](/configure/app/builder-plugins) 配置。
|
|
40
|
+
|
|
29
41
|
## 构建能力
|
|
30
42
|
|
|
31
43
|
Rsbuild 提供了丰富的构建能力，包括 JavaScript 编译、CSS 编译、静态资源处理、代码热更新、代码压缩、TS 类型检查等几十种能力。
|
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-20240219170634",
|
|
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-20240219170634"
|
|
26
26
|
},
|
|
27
27
|
"peerDependencies": {
|
|
28
|
-
"@modern-js/builder-doc": "0.0.0-nightly-
|
|
28
|
+
"@modern-js/builder-doc": "0.0.0-nightly-20240219170634"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"classnames": "^2",
|
|
@@ -39,8 +39,8 @@
|
|
|
39
39
|
"@rspress/shared": "1.11.2",
|
|
40
40
|
"@types/node": "^16",
|
|
41
41
|
"@types/fs-extra": "9.0.13",
|
|
42
|
-
"@modern-js/builder-doc": "0.0.0-nightly-
|
|
43
|
-
"@modern-js/doc-plugin-auto-sidebar": "0.0.0-nightly-
|
|
42
|
+
"@modern-js/builder-doc": "0.0.0-nightly-20240219170634",
|
|
43
|
+
"@modern-js/doc-plugin-auto-sidebar": "0.0.0-nightly-20240219170634"
|
|
44
44
|
},
|
|
45
45
|
"scripts": {
|
|
46
46
|
"dev": "rspress dev",
|