@modern-js/main-doc 0.0.0-next-1686120584093 → 0.0.0-next-1686121516109
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/CHANGELOG.md +11 -7
- package/docs/en/components/entry-mode.mdx +0 -0
- package/docs/en/guides/concept/builder.mdx +15 -15
- package/docs/en/guides/concept/entries.mdx +47 -46
- package/docs/zh/components/entry-mode.mdx +0 -0
- package/docs/zh/guides/concept/builder.mdx +1 -1
- package/docs/zh/guides/concept/entries.mdx +18 -14
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,24 +1,28 @@
|
|
|
1
1
|
# @modern-js/main-doc
|
|
2
2
|
|
|
3
|
-
## 0.0.0-next-
|
|
3
|
+
## 0.0.0-next-1686121516109
|
|
4
4
|
|
|
5
5
|
### Patch Changes
|
|
6
6
|
|
|
7
|
-
-
|
|
7
|
+
- 411d047d9: docs: fix reset command
|
|
8
8
|
|
|
9
9
|
docs: 修复 reset command 翻译问题
|
|
10
10
|
|
|
11
|
-
-
|
|
11
|
+
- 31b5230f4: docs(main): update concept doc
|
|
12
|
+
|
|
13
|
+
docs(main): 更新核心概念文档
|
|
14
|
+
|
|
15
|
+
- 2ede584c3: docs(main): update start doc
|
|
12
16
|
|
|
13
17
|
docs(main): 更新开始文档
|
|
14
18
|
|
|
15
|
-
-
|
|
19
|
+
- 7267a1ae6: docs(main): update changeset doc
|
|
16
20
|
|
|
17
21
|
docs(main): 更新包版本管理文档
|
|
18
22
|
|
|
19
|
-
- Updated dependencies [
|
|
20
|
-
- Updated dependencies [
|
|
21
|
-
- @modern-js/builder-doc@0.0.0-next-
|
|
23
|
+
- Updated dependencies [bd4b15040]
|
|
24
|
+
- Updated dependencies [2ede584c3]
|
|
25
|
+
- @modern-js/builder-doc@0.0.0-next-1686121516109
|
|
22
26
|
|
|
23
27
|
## 2.22.0
|
|
24
28
|
|
|
File without changes
|
|
@@ -4,31 +4,31 @@ sidebar_position: 2
|
|
|
4
4
|
|
|
5
5
|
# Builder
|
|
6
6
|
|
|
7
|
-
**Modern.js
|
|
7
|
+
**Modern.js's build capability is provided by [Modern.js Builder](https://modernjs.dev/builder).**
|
|
8
8
|
|
|
9
|
-
Modern.js Builder is one of the core components of Modern.js. It is
|
|
9
|
+
Modern.js Builder is one of the core components of the Modern.js system. It is a build engine for web development scenarios that can be used independently of Modern.js. Modern.js Builder supports multiple packaging tools such as webpack and Rspack, and by default uses the most mature webpack for packaging.
|
|
10
10
|
|
|
11
11
|
## Build Architecture
|
|
12
12
|
|
|
13
|
-
From
|
|
13
|
+
From a building perspective, Modern.js is divided into three layers, from top to bottom:
|
|
14
14
|
|
|
15
|
-
- Upper-
|
|
16
|
-
-
|
|
17
|
-
-
|
|
15
|
+
- Upper-level development framework: Modern.js.
|
|
16
|
+
- Common build engine: Modern.js Builder.
|
|
17
|
+
- Lower-level packaging tool: webpack and Rspack.
|
|
18
18
|
|
|
19
19
|
<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/builder-layers-1117.png" style={{ width: '100%', maxWidth: '540px' }} />
|
|
20
20
|
|
|
21
21
|
## Builder Documentation
|
|
22
22
|
|
|
23
|
-
Since Modern.js Builder is a module that can be used independently, we
|
|
23
|
+
Since Modern.js Builder is a module that can be used independently, we have provided separate documentation for it, which can be found at [modernjs.dev/builder](https://modernjs.dev/builder).
|
|
24
24
|
|
|
25
|
-
In this
|
|
25
|
+
In this documentation, you can learn about the detailed introduction of Modern.js Builder, and you can also find complete usage guides for various building capabilities. When you have building needs or problems, it is recommended that you read the Modern.js Builder documentation first to solve them.
|
|
26
26
|
|
|
27
|
-
## Builder
|
|
27
|
+
## Builder Configuration
|
|
28
28
|
|
|
29
|
-
|
|
29
|
+
Modern.js's configuration inherits from Modern.js Builder, so you can use all the build configurations provided by Modern.js Builder in Modern.js.
|
|
30
30
|
|
|
31
|
-
|
|
31
|
+
Taking the `html.title` configuration item of Modern.js Builder as an example, you can directly use this configuration item in the `modern.config.ts` file, and it will be automatically passed to Modern.js Builder.
|
|
32
32
|
|
|
33
33
|
```ts title="modern.config.js"
|
|
34
34
|
export default defineConfig({
|
|
@@ -38,10 +38,10 @@ export default defineConfig({
|
|
|
38
38
|
});
|
|
39
39
|
```
|
|
40
40
|
|
|
41
|
-
For
|
|
41
|
+
For detailed information about build configuration, please refer to [「Modern.js Builder - Builder Configuration」](https://modernjs.dev/builder/guide/basic/builder-config.html).
|
|
42
42
|
|
|
43
|
-
##
|
|
43
|
+
## Builder Capabilities
|
|
44
44
|
|
|
45
|
-
Modern.js Builder provides
|
|
45
|
+
Modern.js Builder provides rich build capabilities, including JavaScript compilation, CSS compilation, static resource processing, code hot update, code compression, TS type checking, and dozens of other capabilities.
|
|
46
46
|
|
|
47
|
-
We recommend you
|
|
47
|
+
We recommend that you read [「Modern.js Builder - Feature Navigation」](https://modernjs.dev/builder/guide/features.html) to learn about all the build capabilities provided by Modern.js Builder.
|
|
@@ -2,21 +2,21 @@
|
|
|
2
2
|
sidebar_position: 1
|
|
3
3
|
---
|
|
4
4
|
|
|
5
|
-
#
|
|
5
|
+
# Entry
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
In this chapter, you will learn about the entry convention in Modern.js and how to customize it.
|
|
8
8
|
|
|
9
|
-
## What is
|
|
9
|
+
## What is Entry?
|
|
10
10
|
|
|
11
|
-
**Entry
|
|
11
|
+
**Entry refers to the starting module of a page.**
|
|
12
12
|
|
|
13
|
-
In
|
|
13
|
+
In a Modern.js project, each entry corresponds to an independent page and a server-side route. By default, Modern.js automatically determines the entry of a page based on directory conventions, but also supports customizing the entry through configuration options.
|
|
14
14
|
|
|
15
|
-
Many configuration
|
|
15
|
+
Many configuration options provided by Modern.js are divided by entry, such as page title, HTML template, page meta information, whether to enable SSR/SSG, server-side routing rules, etc.
|
|
16
16
|
|
|
17
17
|
## Single Entry and Multiple Entries
|
|
18
18
|
|
|
19
|
-
The project initialized by Modern.js is single
|
|
19
|
+
The project initialized by Modern.js is a single entry (SPA) project, with the following structure:
|
|
20
20
|
|
|
21
21
|
```
|
|
22
22
|
.
|
|
@@ -30,7 +30,7 @@ The project initialized by Modern.js is single-entry (SPA), and the project stru
|
|
|
30
30
|
└── tsconfig.json
|
|
31
31
|
```
|
|
32
32
|
|
|
33
|
-
Modern.js can easily switch from single entry to multiple
|
|
33
|
+
In a Modern.js project, you can easily switch from single entry to multiple entries by running `pnpm run new` in the project directory and creating an entry:
|
|
34
34
|
|
|
35
35
|
```bash
|
|
36
36
|
? Please select the operation you want: Create Element
|
|
@@ -38,7 +38,7 @@ Modern.js can easily switch from single entry to multiple entry. You can execute
|
|
|
38
38
|
? Please fill in the entry name: new-entry
|
|
39
39
|
```
|
|
40
40
|
|
|
41
|
-
After
|
|
41
|
+
After running the command, Modern.js will automatically generate a new entry directory. At this point, you can see that the `src/` directory has the following structure:
|
|
42
42
|
|
|
43
43
|
```bash
|
|
44
44
|
.
|
|
@@ -54,51 +54,55 @@ After execution, Modern.js will automatically generate a new entry directory, an
|
|
|
54
54
|
└── page.tsx
|
|
55
55
|
```
|
|
56
56
|
|
|
57
|
-
The original code
|
|
57
|
+
The original entry code has been moved to a directory with the same name as the `name` field in `package.json`, and a `new-entry` entry directory has been created.
|
|
58
58
|
|
|
59
|
-
After
|
|
59
|
+
After running `pnpm run dev`, you can see a new route named `/new-entry` has been added, and the migrated code route has not changed.
|
|
60
60
|
|
|
61
61
|
:::tip
|
|
62
|
-
Modern.js will use the entry with the same name as the `name` field in
|
|
62
|
+
Modern.js will use the entry with the same name as the `name` field in `package.json` as the main entry. The route of the main entry is `/`, and the route of other entries is `/{entryName}`.
|
|
63
63
|
|
|
64
|
-
For example, when `name` in package.json is `myapp`, `src/myapp` will be
|
|
64
|
+
For example, when the `name` field in `package.json` is `myapp`, `src/myapp` will be the main entry of the project.
|
|
65
65
|
|
|
66
66
|
:::
|
|
67
67
|
|
|
68
|
-
## Entry
|
|
68
|
+
## Entry Types
|
|
69
69
|
|
|
70
|
-
Different entry types have different
|
|
70
|
+
Different entry types have different compilation and runtime behaviors.
|
|
71
71
|
|
|
72
|
-
|
|
72
|
+
import EntryMode from '@site-docs-en/components/entry-mode.mdx';
|
|
73
|
+
|
|
74
|
+
<EntryMode />
|
|
75
|
+
|
|
76
|
+
By default, Modern.js scans the files under `src/` before starting the project, identifies the entry, and generates the corresponding server-side route.
|
|
73
77
|
|
|
74
78
|
:::tip
|
|
75
|
-
You can
|
|
79
|
+
You can modify the directory for entry identification by using the [source.entriesDir](/configure/app/source/entries-dir) config.
|
|
76
80
|
|
|
77
81
|
:::
|
|
78
82
|
|
|
79
|
-
Not all
|
|
83
|
+
Not all top-level directories under `src/` become project entries. The directory where the entry is located must meet one of the following four conditions:
|
|
80
84
|
|
|
81
|
-
1.
|
|
82
|
-
2. Has `App.[jt]sx?` file
|
|
83
|
-
3. Has `index.[jt]sx?` file
|
|
84
|
-
4. Has a `pages/` directory (Modern.js 1.0
|
|
85
|
+
1. Has a `routes/` directory.
|
|
86
|
+
2. Has an `App.[jt]sx?` file.
|
|
87
|
+
3. Has an `index.[jt]sx?` file.
|
|
88
|
+
4. Has a `pages/` directory (compatible with Modern.js 1.0).
|
|
85
89
|
|
|
86
|
-
When the `src/` directory meets the entry
|
|
90
|
+
When the `src/` directory meets the entry requirements, Modern.js considers the current project as a single entry application.
|
|
87
91
|
|
|
88
92
|
:::tip
|
|
89
|
-
In single
|
|
93
|
+
In a single entry application, the default entry name is `main`.
|
|
90
94
|
|
|
91
95
|
:::
|
|
92
96
|
|
|
93
|
-
When the project is not a single
|
|
97
|
+
When the project is not a single entry application, Modern.js will further look at the top-level directories under `src/`.
|
|
94
98
|
|
|
95
99
|
### Framework Mode Entry
|
|
96
100
|
|
|
97
|
-
Framework mode refers to the need to use
|
|
101
|
+
Framework mode refers to the need to use Modern.js framework capabilities, such as Router, SSR, integrated calls, etc. Under this type of entry convention, the entry defined by the developer is not a real webpack compilation entry. Modern.js will generate a wrapped entry during startup, and you can find the real entry in `node_modules/.modern/{entryName}/index.js`.
|
|
98
102
|
|
|
99
103
|
#### Conventional Routing
|
|
100
104
|
|
|
101
|
-
If there is a `routes/` directory in the entry, Modern.js will scan the files under `routes/`
|
|
105
|
+
If there is a `routes/` directory in the entry, Modern.js will scan the files under `routes/` during startup, and automatically generate client-side routes (react-router) based on file conventions. For example:
|
|
102
106
|
|
|
103
107
|
```bash
|
|
104
108
|
.
|
|
@@ -108,11 +112,13 @@ If there is a `routes/` directory in the entry, Modern.js will scan the files un
|
|
|
108
112
|
│ └── page.tsx
|
|
109
113
|
```
|
|
110
114
|
|
|
111
|
-
|
|
115
|
+
In the above directory, the component exported in `layout.tsx` will be the outermost component, and the component exported in `page.tsx` will be the component of the `/` route.
|
|
116
|
+
|
|
117
|
+
For more information, please refer to [Conventional Routing](/guides/basic-features/routes.html#conventional-routing).
|
|
112
118
|
|
|
113
119
|
#### Self-controlled Routing
|
|
114
120
|
|
|
115
|
-
If there is an `App.[jt]sx?` file in the entry,
|
|
121
|
+
If there is an `App.[jt]sx?` file in the entry, developers can set the client-side route in this file through code, or not set the client-side route.
|
|
116
122
|
|
|
117
123
|
```tsx
|
|
118
124
|
import { BrowserRouter, Route, Routes } from '@modern-js/runtime/router';
|
|
@@ -129,11 +135,11 @@ export default () => {
|
|
|
129
135
|
};
|
|
130
136
|
```
|
|
131
137
|
|
|
132
|
-
For
|
|
138
|
+
For more information, please refer to [Self-controlled Routing](/guides/basic-features/routes.html#self-controlled-routing).
|
|
133
139
|
|
|
134
140
|
#### Custom Bootstrap
|
|
135
141
|
|
|
136
|
-
If there is an `index.[jt]sx` file in the entry, and
|
|
142
|
+
If there is an `index.[jt]sx` file in the entry, and the file exports a function by default, Modern.js will pass the default `bootstrap` function as a parameter and use the exported function to replace the default `bootstrap`. This way, developers can customize how components are mounted to DOM nodes or add custom behavior before mounting. For example:
|
|
137
143
|
|
|
138
144
|
```tsx
|
|
139
145
|
export default (App: React.ComponentType, bootstrap: () => void) => {
|
|
@@ -144,12 +150,7 @@ export default (App: React.ComponentType, bootstrap: () => void) => {
|
|
|
144
150
|
};
|
|
145
151
|
```
|
|
146
152
|
|
|
147
|
-
|
|
148
|
-
Since the bootstrap function needs to be compatible with React17 and React18, you need to manually pass in ReactDOM parameters when calling the bootstrap function.
|
|
149
|
-
|
|
150
|
-
:::
|
|
151
|
-
|
|
152
|
-
The content of the file generated by Modern.js is as follows:
|
|
153
|
+
At this point, the generated file content of Modern.js is as follows:
|
|
153
154
|
|
|
154
155
|
```js
|
|
155
156
|
import React from 'react';
|
|
@@ -180,9 +181,9 @@ export default AppWrapper;
|
|
|
180
181
|
|
|
181
182
|
### Build Mode Entry
|
|
182
183
|
|
|
183
|
-
Build mode refers to
|
|
184
|
+
Build mode refers to not using any Modern.js runtime capabilities and completely defining the project's webpack entry by the developer.
|
|
184
185
|
|
|
185
|
-
If `index.[jt]sx`
|
|
186
|
+
If there is an `index.[jt]sx` file in the entry and it does not export a default function, then this file is the real webpack entry file. Similar to [Create React App](https://github.com/facebook/create-react-app), you need to mount the component to the DOM node by yourself, add hot update code, etc. For example:
|
|
186
187
|
|
|
187
188
|
```js title=src/index.jsx
|
|
188
189
|
import React from 'react';
|
|
@@ -192,13 +193,13 @@ import App from './App';
|
|
|
192
193
|
ReactDOM.render(<App />, document.getElementById('root'));
|
|
193
194
|
```
|
|
194
195
|
|
|
195
|
-
Modern.js **not
|
|
196
|
+
Modern.js **does not recommend** using this method for new projects, as it loses some of the framework's capabilities, such as the `runtime` configuration in the `modern.config.js` file will no longer take effect. However, this method can be very useful when migrating projects from other frameworks to Modern.js, such as CRA, or manually building webpack.
|
|
196
197
|
|
|
197
|
-
##
|
|
198
|
+
## Specifying Entry Using Configuration
|
|
198
199
|
|
|
199
|
-
Most existing projects are not built according to the directory
|
|
200
|
+
Most existing projects are not built according to the directory structure of Modern.js. If you want to change to the directory structure of Modern.js, there will be certain migration costs.
|
|
200
201
|
|
|
201
|
-
In this case,
|
|
202
|
+
In this case, in addition to using file conventions to generate entries, you can manually configure the entry in `modern.config.[jt]s`.
|
|
202
203
|
|
|
203
204
|
```ts title="modern.config.ts"
|
|
204
205
|
export default defineConfig({
|
|
@@ -213,11 +214,11 @@ export default defineConfig({
|
|
|
213
214
|
});
|
|
214
215
|
```
|
|
215
216
|
|
|
216
|
-
### Disable Default
|
|
217
|
+
### Disable Default Entry Scanning
|
|
217
218
|
|
|
218
|
-
When using
|
|
219
|
+
When using custom entries, part of the project structure may coincidentally hit the directory conventions of Modern.js, but in fact, this part of the directory is not the real entry.
|
|
219
220
|
|
|
220
|
-
Modern.js provides `disableDefaultEntries`
|
|
221
|
+
Modern.js provides the `disableDefaultEntries` configuration to disable the default entry scanning rules. When you need to customize the entry, you generally need to use `disableDefaultEntries` in combination with `entries`. This way, some existing projects can be quickly migrated without modifying the directory structure.
|
|
221
222
|
|
|
222
223
|
```ts title="modern.config.ts"
|
|
223
224
|
export default defineConfig({
|
|
File without changes
|
|
@@ -14,7 +14,7 @@ Modern.js Builder 是 Modern.js 体系的核心组件之一，它是一个面向
|
|
|
14
14
|
|
|
15
15
|
- 上层研发框架：Modern.js。
|
|
16
16
|
- 通用构建引擎：Modern.js Builder。
|
|
17
|
-
- 底层打包工具：webpack 和
|
|
17
|
+
- 底层打包工具：webpack 和 Rspack。
|
|
18
18
|
|
|
19
19
|
<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/builder-layers-1117.png" style={{ width: '100%', maxWidth: '540px' }} />
|
|
20
20
|
|
|
@@ -30,7 +30,7 @@ Modern.js 初始化的项目是单入口的（SPA），项目结构如下：
|
|
|
30
30
|
└── tsconfig.json
|
|
31
31
|
```
|
|
32
32
|
|
|
33
|
-
在 Modern.js 项目中，你可以很方便的将单入口切换成多入口，直接在项目下执行 `pnpm run new
|
|
33
|
+
在 Modern.js 项目中，你可以很方便的将单入口切换成多入口，直接在项目下执行 `pnpm run new`，根据提示创建入口即可：
|
|
34
34
|
|
|
35
35
|
```bash
|
|
36
36
|
? 请选择你想要的操作 创建工程元素
|
|
@@ -54,34 +54,38 @@ Modern.js 初始化的项目是单入口的（SPA），项目结构如下：
|
|
|
54
54
|
└── page.tsx
|
|
55
55
|
```
|
|
56
56
|
|
|
57
|
-
|
|
57
|
+
原本的入口代码被移动到了和 `package.json` 中 `name` 同名的目录下，并创建了 `new-entry` 入口目录。
|
|
58
58
|
|
|
59
59
|
执行 `pnpm run dev` 后，可以看到新增了一条名为 `/new-entry` 的路由，并且被迁移的代码路由并未发生变化。
|
|
60
60
|
|
|
61
61
|
:::tip
|
|
62
|
-
Modern.js 会将与 package.json 文件中 `name` 字段同名的入口作为主入口，主入口的路由为 `/`，其他入口的路由为 `/{entryName}`。
|
|
62
|
+
Modern.js 会将与 `package.json` 文件中 `name` 字段同名的入口作为主入口，主入口的路由为 `/`，其他入口的路由为 `/{entryName}`。
|
|
63
63
|
|
|
64
|
-
|
|
64
|
+
比如，`package.json` 中的 `name` 为 `myapp` 时，`src/myapp` 会作为项目的主入口。
|
|
65
65
|
|
|
66
66
|
:::
|
|
67
67
|
|
|
68
68
|
## 入口类型
|
|
69
69
|
|
|
70
|
-
|
|
70
|
+
不同的入口类型具有不同的编译和运行时行为。
|
|
71
|
+
|
|
72
|
+
import EntryMode from '@site-docs/components/entry-mode.mdx';
|
|
73
|
+
|
|
74
|
+
<EntryMode />
|
|
71
75
|
|
|
72
76
|
默认情况下，Modern.js 启动项目前会对 `src/` 下的文件进行扫描，识别入口，并生成对应的服务端路由。
|
|
73
77
|
|
|
74
78
|
:::tip
|
|
75
|
-
可以通过 [source.entriesDir](/configure/app/source/entries-dir)
|
|
79
|
+
可以通过 [source.entriesDir](/configure/app/source/entries-dir) 修改页面的入口识别目录。
|
|
76
80
|
|
|
77
81
|
:::
|
|
78
82
|
|
|
79
83
|
并非 `src/` 下所有的一级目录都会成为项目入口, 入口所在目录必须满足以下四个条件之一：
|
|
80
84
|
|
|
81
|
-
1. 具有 `routes/`
|
|
82
|
-
2. 具有 `App.[jt]sx?`
|
|
83
|
-
3. 具有 `index.[jt]sx?`
|
|
84
|
-
4. 具有 `pages/` 目录（兼容 Modern.js 1.0
|
|
85
|
+
1. 具有 `routes/` 目录。
|
|
86
|
+
2. 具有 `App.[jt]sx?` 文件。
|
|
87
|
+
3. 具有 `index.[jt]sx?` 文件。
|
|
88
|
+
4. 具有 `pages/` 目录（兼容 Modern.js 1.0）。
|
|
85
89
|
|
|
86
90
|
当 `src/` 目录满足入口特征时，Modern.js 会认为当前项目为单入口应用。
|
|
87
91
|
|
|
@@ -94,7 +98,7 @@ Modern.js 会将与 package.json 文件中 `name` 字段同名的入口作为主
|
|
|
94
98
|
|
|
95
99
|
### 框架模式入口
|
|
96
100
|
|
|
97
|
-
框架模式指需要使用 Modern.js 框架能力，例如 Router、SSR、一体化调用等。这类入口约定下，开发者定义的入口并不是真正的
|
|
101
|
+
框架模式指需要使用 Modern.js 框架能力，例如 Router、SSR、一体化调用等。这类入口约定下，开发者定义的入口并不是真正的 webpack 编译入口。Modern.js 在启动时会生成一个封装过的入口，可以在 `node_modules/.modern/{entryName}/index.js` 找到真正的入口。
|
|
98
102
|
|
|
99
103
|
#### 约定式路由
|
|
100
104
|
|
|
@@ -135,7 +139,7 @@ export default () => {
|
|
|
135
139
|
|
|
136
140
|
#### 自定义 Bootstrap
|
|
137
141
|
|
|
138
|
-
如果入口中存在 `index.[jt]sx` 文件，并且当文件默认导出函数时，Modern.js 会将默认的 bootstrap 函数作为入参传入，并用导出的函数替代默认的 bootstrap
|
|
142
|
+
如果入口中存在 `index.[jt]sx` 文件，并且当文件默认导出函数时，Modern.js 会将默认的 `bootstrap` 函数作为入参传入，并用导出的函数替代默认的 `bootstrap`，这样开发者可以自定义将组件挂载到 DOM 节点上，或在挂载前添加自定义行为。例如：
|
|
139
143
|
|
|
140
144
|
```tsx
|
|
141
145
|
export default (App: React.ComponentType, bootstrap: () => void) => {
|
|
@@ -178,9 +182,9 @@ export default AppWrapper;
|
|
|
178
182
|
|
|
179
183
|
### 构建模式入口
|
|
180
184
|
|
|
181
|
-
构建模式是指不使用任何 Modern.js 运行时的能力，完全由开发者自己定义项目
|
|
185
|
+
构建模式是指不使用任何 Modern.js 运行时的能力，完全由开发者自己定义项目 webpack 的入口。
|
|
182
186
|
|
|
183
|
-
如果入口中存在 `index.[jt]sx` ，并且没有默认导出函数时，这时候该文件就是真正的
|
|
187
|
+
如果入口中存在 `index.[jt]sx` ，并且没有默认导出函数时，这时候该文件就是真正的 webpack 入口文件。这里和 [Create React App](https://github.com/facebook/create-react-app) 类似，需要自己将组件挂载到 DOM 节点、添加热更新代码等。例如:
|
|
184
188
|
|
|
185
189
|
```js title=src/index.jsx
|
|
186
190
|
import React from 'react';
|
package/package.json
CHANGED
|
@@ -15,13 +15,13 @@
|
|
|
15
15
|
"modern",
|
|
16
16
|
"modern.js"
|
|
17
17
|
],
|
|
18
|
-
"version": "0.0.0-next-
|
|
18
|
+
"version": "0.0.0-next-1686121516109",
|
|
19
19
|
"publishConfig": {
|
|
20
20
|
"registry": "https://registry.npmjs.org/",
|
|
21
21
|
"access": "public"
|
|
22
22
|
},
|
|
23
23
|
"peerDependencies": {
|
|
24
|
-
"@modern-js/builder-doc": "0.0.0-next-
|
|
24
|
+
"@modern-js/builder-doc": "0.0.0-next-1686121516109"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
27
|
"classnames": "^2",
|
|
@@ -33,9 +33,9 @@
|
|
|
33
33
|
"fs-extra": "^10",
|
|
34
34
|
"@types/node": "^16",
|
|
35
35
|
"@types/fs-extra": "^9",
|
|
36
|
-
"@modern-js/builder-doc": "0.0.0-next-
|
|
37
|
-
"@modern-js/doc-tools": "0.0.0-next-
|
|
38
|
-
"@modern-js/doc-plugin-auto-sidebar": "0.0.0-next-
|
|
36
|
+
"@modern-js/builder-doc": "0.0.0-next-1686121516109",
|
|
37
|
+
"@modern-js/doc-tools": "0.0.0-next-1686121516109",
|
|
38
|
+
"@modern-js/doc-plugin-auto-sidebar": "0.0.0-next-1686121516109"
|
|
39
39
|
},
|
|
40
40
|
"scripts": {
|
|
41
41
|
"dev": "modern dev",
|