@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.
@@ -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
@@ -129,13 +129,8 @@ sidebar_position: 3
129
129
  选项:
130
130
 
131
131
  - Web 应用 -- mwa
132
-
133
- - Web 应用(测试)-- mwa_test
134
-
135
132
  - Npm 模块 -- module
136
133
 
137
- - Npm 模块(内部)-- inner_module
138
-
139
134
  ### packageName
140
135
 
141
136
  问题:请填写子项目名称
@@ -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={formatString('hello world')} />
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
- 到此为止我们创建了一个可以被发布到外部的组件项目、一个转换字符串的内部模块项目以及一个使用组件和内部模块的应用项目,如果直接运行应用项目还暂时无法正常使用。接下来将要介绍如何让它们能够互相联调使用,成功的使应用子项目 `apps/app` 正常运行。
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` 应用子项目可以正常的运行了。在修改 `features/internal-lib` 的源码,或者修改 `packages/components` 的源码并构建之后都会触发应用子项目的热更新。
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
- 之所以可以直接在应用中使用使用组件项目和内部模块项目,是因为 Yarn 将这些子项目模块提升到了顶层的 `node_modules`内。
131
+ 之所以可以直接在应用中使用组件项目,是因为 Yarn 将这些子项目模块提升到了顶层的 `node_modules`内。
168
132
 
169
133
  :::
170
134
 
171
- 但是由于组件 `components` 是非内部模块,因此建议在 `apps/app/package.json` 中进行依赖声明:
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-20231005160631",
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-20231005160631"
25
+ "@modern-js/sandpack-react": "0.0.0-nightly-20231007160533"
26
26
  },
27
27
  "peerDependencies": {
28
- "@modern-js/builder-doc": "0.0.0-nightly-20231005160631"
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-20231005160631",
43
- "@modern-js/doc-plugin-auto-sidebar": "0.0.0-nightly-20231005160631"
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",