@modern-js/main-doc 0.0.0-nightly-20231005160631 → 0.0.0-nightly-20231007160533
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/topic-detail/generator/new/config.md +0 -5
- package/docs/zh/guides/topic-detail/generator/new/config.md +0 -5
- package/docs/zh/guides/topic-detail/monorepo/create-sub-project.mdx +0 -14
- package/docs/zh/guides/topic-detail/monorepo/sub-project-interface.mdx +7 -43
- package/package.json +5 -5
@@ -129,13 +129,8 @@ Question: Please select the type of project you want to create.
|
|
129
129
|
Options:
|
130
130
|
|
131
131
|
- Web App -- mwa
|
132
|
-
|
133
|
-
- Web App (Test)-- mwa_test
|
134
|
-
|
135
132
|
- Npm Module -- module
|
136
133
|
|
137
|
-
- Npm Module (Inner) -- inner_module
|
138
|
-
|
139
134
|
### packageName
|
140
135
|
|
141
136
|
Question: Please fill in the project name
|
@@ -29,23 +29,9 @@ pnpm run new
|
|
29
29
|
```
|
30
30
|
? 请选择你想创建的工程类型 (Use arrow keys)
|
31
31
|
❯ Web 应用
|
32
|
-
Web 应用(测试)
|
33
32
|
Npm 模块
|
34
|
-
Npm 模块(内部)
|
35
33
|
```
|
36
34
|
|
37
|
-
:::info
|
38
|
-
「应用」与「应用(测试)」都是「应用」类型的项目,区别是「应用」类型的子项目会创建在 `./apps` 目录下,而 「应用(测试)」类型的子项目会创建在 `./examples` 目录下。
|
39
|
-
|
40
|
-
:::
|
41
|
-
|
42
|
-
:::info
|
43
|
-
「模块」与「模块(内部)」都是「模块」类型的项目,区别之一是「模块」类型的子项目会创建在 `./packages` 目录下,而「模块(内部)」类型的子项目会创建在 `./features` 目录下。
|
44
|
-
|
45
|
-
对于「模块」类型的子项目允许被发布到外部(例如 npm),而对于「模块(内部)」的子项目则可以在应用项目中直接使用其源码(该特性是「模块」项目不具备的,应用项目对于「模块(内部)」子项目做了特殊处理),因此这类子项目不需要发布到外部。
|
46
|
-
|
47
|
-
:::
|
48
|
-
|
49
35
|
然后根据不同的需求选择对应的类型项目选项,选择之后便开始出现对应子项目类型的问题和选项。例如选择「应用」后会出现:
|
50
36
|
|
51
37
|
```
|
@@ -11,7 +11,6 @@ sidebar_position: 3
|
|
11
11
|
按照 [「创建子项目」](/guides/topic-detail/monorepo/create-sub-project) 章节的介绍(如果还没有看过,可以先了解一下),我们首先创建以下三个子项目:
|
12
12
|
|
13
13
|
- 一个「应用」子项目
|
14
|
-
- 一个「模块(内部)」子项目
|
15
14
|
- 一个「模块」子项目
|
16
15
|
|
17
16
|
执行 `pnpm run new`,并按照如下进行选择:
|
@@ -25,15 +24,6 @@ sidebar_position: 3
|
|
25
24
|
? 请选择开发语言:TS
|
26
25
|
```
|
27
26
|
|
28
|
-
**「模块(内部)」子项目:**
|
29
|
-
|
30
|
-
```
|
31
|
-
? 请选择你想创建的工程类型:Npm 模块(内部)
|
32
|
-
? 请填写子项目名称:internal-lib
|
33
|
-
? 请填写子项目目录名称:internal-lib
|
34
|
-
? 请选择开发语言:TS
|
35
|
-
```
|
36
|
-
|
37
27
|
**「模块」子项目:**
|
38
28
|
|
39
29
|
```
|
@@ -47,7 +37,6 @@ sidebar_position: 3
|
|
47
37
|
|
48
38
|
- `./apps/app`
|
49
39
|
- `./packages/components`
|
50
|
-
- `./features/internal-lib`
|
51
40
|
|
52
41
|
然后修改一下默认的代码和新增文件:
|
53
42
|
|
@@ -73,19 +62,10 @@ export default function ({ text }: { text: string }) {
|
|
73
62
|
}
|
74
63
|
```
|
75
64
|
|
76
|
-
**修改 `./features/internal-lib/src/index.ts`**
|
77
|
-
|
78
|
-
```tsx
|
79
|
-
export default function (text: string) {
|
80
|
-
return text.toUpperCase();
|
81
|
-
}
|
82
|
-
```
|
83
|
-
|
84
65
|
**修改 `./apps/app/src/App.tsx`**
|
85
66
|
|
86
67
|
```tsx
|
87
68
|
import { Switch, Route } from '@modern-js/runtime/router';
|
88
|
-
import formatString from 'internal-lib';
|
89
69
|
import Comp from 'components';
|
90
70
|
|
91
71
|
import './App.css';
|
@@ -94,7 +74,7 @@ const App = () => (
|
|
94
74
|
<Switch>
|
95
75
|
<Route exact={true} path="/">
|
96
76
|
<div className="container-box">
|
97
|
-
<Comp text=
|
77
|
+
<Comp text="hello world" />
|
98
78
|
{/* 省略... */}
|
99
79
|
</div>
|
100
80
|
</Route>
|
@@ -107,7 +87,7 @@ const App = () => (
|
|
107
87
|
export default App;
|
108
88
|
```
|
109
89
|
|
110
|
-
|
90
|
+
到此为止我们创建了一个可以被发布到外部的组件项目以及一个使用组件的应用项目,如果直接运行应用项目还暂时无法正常使用。接下来将要介绍如何让它们能够互相联调使用,成功的使应用子项目 `apps/app` 正常运行。
|
111
91
|
|
112
92
|
:::info
|
113
93
|
启动 `apps/app` 项目之前需要先构建(`pnpm run build`) `packages/component`。
|
@@ -118,25 +98,12 @@ export default App;
|
|
118
98
|
|
119
99
|
## 在使用 pnpm 的 Monorepo 中进行项目联调
|
120
100
|
|
121
|
-
在 pnpm 的 Monorepo 项目中,我们通过在 `apps/app`
|
101
|
+
在 pnpm 的 Monorepo 项目中,我们通过在 `apps/app` 子项目下执行以下命令,将 `packages/components` 子项目加入到应用的依赖列表当中。
|
122
102
|
|
123
103
|
```
|
124
104
|
pnpm add components
|
125
105
|
```
|
126
106
|
|
127
|
-
以及
|
128
|
-
|
129
|
-
```
|
130
|
-
pnpm add internal-lib -D
|
131
|
-
```
|
132
|
-
|
133
|
-
:::info
|
134
|
-
注意这里将 internal-lib 作为 `apps/app` 项目的开发依赖,因为在构建环境会被打包到构建产物中。
|
135
|
-
|
136
|
-
:::
|
137
|
-
|
138
|
-
将 `packages/components` 与 `features/internal-lib` 子项目加入到应用的依赖列表当中。
|
139
|
-
|
140
107
|
执行成功后,在 `apps/app/package.json` 会发生如下变化:
|
141
108
|
|
142
109
|
```json
|
@@ -144,9 +111,6 @@ pnpm add internal-lib -D
|
|
144
111
|
"dependencies": {
|
145
112
|
++ "components": "workspace:^0.1.0"
|
146
113
|
},
|
147
|
-
"devDependencies": {
|
148
|
-
++ "internal-lib": "workspace:^0.1.0"
|
149
|
-
},
|
150
114
|
}
|
151
115
|
```
|
152
116
|
|
@@ -157,18 +121,18 @@ pnpm add internal-lib -D
|
|
157
121
|
|
158
122
|
当依赖安装成功之后,我们还需要将 `packages/components` 进行构建,因为需要使用其构建产物。
|
159
123
|
|
160
|
-
到此为止,`app/apps` 应用子项目可以正常的运行了。在修改 `
|
124
|
+
到此为止,`app/apps` 应用子项目可以正常的运行了。在修改 `packages/components` 的源码并构建之后,会触发应用子项目的热更新。
|
161
125
|
|
162
126
|
## 在使用 Yarn 的 Monorepo 中进行项目联调
|
163
127
|
|
164
|
-
在 Yarn 的 Monorepo 项目中,默认情况下可以直接在 `apps/app`
|
128
|
+
在 Yarn 的 Monorepo 项目中,默认情况下可以直接在 `apps/app` 应用项目中直接使用组件项目。
|
165
129
|
|
166
130
|
:::info 补充信息
|
167
|
-
|
131
|
+
之所以可以直接在应用中使用组件项目,是因为 Yarn 将这些子项目模块提升到了顶层的 `node_modules`内。
|
168
132
|
|
169
133
|
:::
|
170
134
|
|
171
|
-
|
135
|
+
但是考虑到依赖关系的严谨性,建议在 `apps/app/package.json` 中进行显式依赖声明:
|
172
136
|
|
173
137
|
```json
|
174
138
|
{
|
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-20231007160533",
|
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-20231007160533"
|
26
26
|
},
|
27
27
|
"peerDependencies": {
|
28
|
-
"@modern-js/builder-doc": "0.0.0-nightly-
|
28
|
+
"@modern-js/builder-doc": "0.0.0-nightly-20231007160533"
|
29
29
|
},
|
30
30
|
"devDependencies": {
|
31
31
|
"classnames": "^2",
|
@@ -39,8 +39,8 @@
|
|
39
39
|
"@rspress/shared": "1.0.0-beta.0",
|
40
40
|
"@types/node": "^16",
|
41
41
|
"@types/fs-extra": "^9",
|
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-20231007160533",
|
43
|
+
"@modern-js/doc-plugin-auto-sidebar": "0.0.0-nightly-20231007160533"
|
44
44
|
},
|
45
45
|
"scripts": {
|
46
46
|
"dev": "rspress dev",
|