@modern-js/main-doc 2.35.1 → 2.36.0

package/docs/zh/guides/basic-features/data/data-write.mdx

@@ -0,0 +1,236 @@
+---
+title: 数据写入
+sidebar_position: 4
+---
+
+# 数据写入
+
+在 Data Loader 章节中，介绍了 Modern.js 获取数据的方式，你可能会遇到两个问题：
+1. 如何更新 Data Loader 中的数据？
+2. 如何将新的数据传递到服务器?
+
+EdenX 对此的解决方案是 DataAction。
+
+## 基本示例
+
+Data Action 和 Data Loader 一样，也是基于约定式路由的，通过 Modern.js 的[约定式（嵌套）路由](/guides/basic-features/routes#约定式路由)，每个路由组件(`layout.ts`，`page.ts` 或 `$.tsx`)可以有一个同名的 `data` 文件，`data` 文件中可以导出一个命名为 `action` 的函数。
+```bash
+.
+└── routes
+    └── user
+        ├── layout.tsx
+        └── layout.data.ts
+```
+在文件中定义以下代码：
+```ts title="routes/user/layout.data.ts"
+import type { ActionFunction } from '@modern-js/runtime/router';
+
+export const action: ActionFunction = ({ request }) => {
+    const newUser = await request.json();
+    const name = newUser.name;
+    return updateUserProfile(name);
+}
+```
+
+```tsx title="routes/user/layout.tsx"
+import {
+  useFetcher,
+  useLoaderData,
+  useParams,
+  Outlet
+} from '@modern-js/runtime/router';
+
+export default () => {
+  const userInfo = useLoaderData();
+  const { submit } = useFetcher();
+  const editUser = () => {
+    const newUser = {
+      name: 'Modern.js'
+    }
+    return submit(newUser, {
+      method: 'post',
+      encType: 'application/json',
+    })
+  }
+  return (
+    <div>
+      <button onClick={editUser}>edit user</button>
+      <div className="user-profile">
+        {userInfo}
+      </div>
+      <Outlet context={userInfo}></Outlet>
+    </div>
+  )
+}
+```
+
+这里当执行 submit 后，会触发定义的 action 函数；在 action 函数中，可以通过 request （request.json，request.formData）获取提交的数据，获取数据后，再发送数据到服务端。
+
+而 action 函数执行完，会执行 loader 函数代码，并更新对应的数据和视图。
+
+![action flow](https://lf3-static.bytednsdoc.com/obj/eden-cn/ulkl/ljhwZthlaukjlkulzlp/action-flow.png)
+
+
+
+## 为什么要提供 Data Action
+
+Modern.js 中提供 Data Action 主要是为了使 UI 和服务器的状态能保持同步，通过这种方式可以减少状态管理的负担，
+传统的状态管理方式，会在客户端和远程分别持有状态：
+
+![traditional state manage](https://lf3-static.bytednsdoc.com/obj/eden-cn/ulkl/ljhwZthlaukjlkulzlp/action-state-manage.png)
+
+而在 Modern.js 中，我们希望通过 Loader 和 Action 帮助开发者自动的同步客户端和服务端的状态：
+
+![state manage](https://lf3-static.bytednsdoc.com/obj/eden-cn/ulkl/ljhwZthlaukjlkulzlp/action-state-manage1.png)
+
+如果项目中组件共享的数据主要服务端的状态，则无需在项目引入客户端状态管理库，使用 Data Loader 请求数据，通过 [`useRouteLoaderData`](/guides/basic-features/data/data-fetch.md) 在子组件中共享数据，
+通过 Data Actino 修改和同步服务端的状态。
+
+
+
+## `action` 函数
+
+与 `loader` 函数一样，`action` 函数有两个入参，`params` 和 `request`：
+
+### `params`
+
+当路由文件通过 `[]` 时，会作为[动态路由](/guides/basic-features/routes#动态路由)，动态路由片段会作为参数传入 `action` 函数：
+
+```tsx
+// routes/user/[id]/page.data.ts
+import { ActionFunctionArgs } from '@modern-js/runtime/router';
+
+export const action = async ({ params }: ActionFunctionArgs) => {
+  const { id } = params;
+  const res = await fetch(`https://api/user/${id}`);
+  return res.json();
+};
+```
+
+当访问 `/user/123` 时，`action` 函数的参数为 `{ params: { id: '123' } }`。
+
+
+### `request`
+
+`request` 是一个 [Fetch Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) 实例。
+
+通过 `request`，可以在 action 函数中获取到客户端提交的数据，如 `request.json()`，`request.formData()`，`request.json()` 等，
+具体应该使用哪个 API，请参考[数据类型](#数据类型)。
+
+```tsx
+// routes/user/[id]/page.data.ts
+import { ActionFunctionArgs } from '@modern-js/runtime/router';
+
+export const action = async ({ request }: ActionFunctionArgs) => {
+  const newUser = await request.json();
+  return updateUser(newUser);
+};
+```
+
+### 返回值
+
+`action` 函数的返回值可以是任何可序列化的内容，也可以是一个 [Fetch Response](https://developer.mozilla.org/en-US/docs/Web/API/Response) 实例，
+可以通过 [`useActionData`](https://reactrouter.com/en/main/hooks/use-action-data) 访问 response 中内容。
+
+
+## useSubmit 和 useFetcher
+
+### 区别
+
+你可以通过 [`useSubmit`](https://reactrouter.com/en/main/hooks/use-submit) 或 [`useFetcher`](https://reactrouter.com/en/main/hooks/use-fetcher) 调用 action，它们的区别是通过
+`useSubmit` 调用 action，会触发浏览器的导航，通过 `useFetcher` 则不会触发浏览器的导航。
+
+useSubmit:
+
+```ts
+const submit = useSubmit();
+submit(null, { method: "post", action: "/logout" });
+```
+
+useFetcher:
+```ts
+const { submit } = useFetcher();
+submit(null, { method: "post", action: "/logout" });
+```
+
+`submit` 函数有两个入参，`method` 和 `action`，`method` 相当于表单提交时的 `method`，大部分写入数据的场景下，`method` 可以传入 `post`，
+`action` 用来指定触发哪个路由组件的 `action`，如果未传入 `action` 入参，默认会触发当前路由组件的 action，即 `user/page.tsx` 组件或子组件中执行 submit，
+会触发 `user/page.data.ts` 中定义的 action。
+
+:::info
+这两个 API 更多的信息可参考相关文档：
+- [`useSubmit`](https://reactrouter.com/en/main/hooks/use-submit)
+- [`useFetcher`](https://reactrouter.com/en/main/hooks/use-fetcher)
+
+:::
+
+
+### 数据类型
+
+`submit` 函数的第一个入参，可以接受不同类型的值。
+如 `FormData`：
+```ts
+let formData = new FormData();
+formData.append("cheese", "gouda");
+submit(formData);
+// In the action, you can get the data by request.json
+```
+
+或 `URLSearchParams` 类型的值：
+```ts
+let searchParams = new URLSearchParams();
+searchParams.append("cheese", "gouda");
+submit(searchParams);
+// In the action, you can get the data by request.json
+```
+
+或任意 `URLSearchParams` 构造函数可接受的值
+```ts
+submit("cheese=gouda&toasted=yes");
+submit([
+  ["cheese", "gouda"],
+  ["toasted", "yes"],
+]);
+// In the action, you can get the data by request.json
+```
+
+默认情况下，如果 `submit` 函数中的第一个入参是一个对象，对应的数据会被 encode 为 `formData`：
+
+```ts
+submit(
+  { key: "value" },
+  {
+    method: "post",
+    encType: "application/x-www-form-urlencoded",
+  }
+);
+
+// In the action, you can get the data by request.formData
+```
+
+也可以指定为 json 编码：
+
+```tsx
+submit(
+  { key: "value" },
+  { method: "post", encType: "application/json" }
+);
+
+submit('{"key":"value"}', {
+  method: "post",
+  encType: "application/json",
+});
+
+// In the action, you can get the data by request.json
+```
+
+或提交纯文本：
+```ts
+submit("value", { method: "post", encType: "text/plain" });
+// In the action, you can get the data by request.text
+```
+
+
+## CSR 和 SSR
+
+与 Data Loader 一样，SSR 项目中，Data Action 是在服务端执行的（框架会自动发请求触发 Data Action），而在 CSR 项目中，Data Action 是在客户端执行的。

package/docs/zh/guides/basic-features/routes.mdx

@@ -164,7 +164,7 @@ export const handle = {
 
 ```ts title="routes/layout.ts"
 export default () => {
-  const matches = useMatches;
+  const matches = useMatches();
   const breadcrumbs = matches.map(
     matchedRoute => matchedRoute?.handle?.breadcrumbName,
   );
@@ -189,7 +189,7 @@ export default () => {
 
 在组件中，可以通过 [useParams](/apis/app/runtime/router/router#useparams) 获取对应命名的参数。
 
-在 loader 中，params 会作为 [loader](/guides/basic-features/data-fetch#loader-函数) 的入参，通过 `params.xxx` 可以获取。
+在 loader 中，params 会作为 [loader](/guides/basic-features/data/data-fetch#loader-函数) 的入参，通过 `params.xxx` 可以获取。
 
 ### 动态可选路由
 
@@ -209,7 +209,7 @@ export default () => {
 
 在组件中，可以通过 [useParams](/apis/app/runtime/router/router#useparams) 获取对应命名的参数。
 
-在 loader 中，params 会作为 [loader](/guides/basic-features/data-fetch#loader-函数) 的入参，通过 `params.xxx` 可以获取。
+在 loader 中，params 会作为 [loader](/guides/basic-features/data/data-fetch#loader-函数) 的入参，通过 `params.xxx` 可以获取。
 
 ### 通配路由
 
@@ -352,12 +352,12 @@ Modern.js 建议必须有根 Layout 和根 Loading。
 
 ### 路由重定向
 
-可以通过创建 [`Data Loader`](/guides/basic-features/data-fetch) 文件做路由的重定向，如有文件 `routes/user/page.tsx`，想对这个文件对应的路由做重定向，可以创建 `routes/user/page.loader.ts` 文件：
+可以通过创建 [`Data Loader`](/guides/basic-features/data/data-fetch) 文件做路由的重定向，如有文件 `routes/user/page.tsx`，想对这个文件对应的路由做重定向，可以创建 `routes/user/page.data.ts` 文件：
 
-```ts title="routes/user/page.loader.ts"
+```ts title="routes/user/page.data.ts"
 import { redirect } from '@modern-js/runtime/router';
 
-export default () => {
+export const loader () => {
   const user = await getUser();
   if (!user) {
     return redirect('/login');
@@ -504,7 +504,7 @@ export const init = (context: RuntimeContext) => {
 :::info
 
 - 该功能目前仅在 Webpack 项目中支持，Rspack 项目暂不支持。
-- 对数据的预加载目前只会预加载 SSR 项目中 [Data Loader](/guides/basic-features/data-fetch) 中返回的数据。
+- 对数据的预加载目前只会预加载 SSR 项目中 [Data Loader](/guides/basic-features/data/data-fetch) 中返回的数据。
 
 :::
 

package/docs/zh/guides/concept/entries.mdx

@@ -6,9 +6,9 @@ sidebar_position: 1
 
 通过本章节，你可以了解到 Modern.js 中的入口约定，以及如何自定义入口。
 
-## 什么是入口（Entry）
+## 什么是入口
 
-**入口指的是一个页面的起始模块。**
+**入口（Entry）指的是一个页面的起始模块。**
 
 在 Modern.js 项目中，每一个入口对应一个独立的页面，也对应一条服务端路由。默认情况下，Modern.js 会基于目录约定来自动确定页面的入口，同时也支持通过配置项来自定义入口。
 
@@ -56,7 +56,7 @@ Modern.js 初始化的项目是单入口的（SPA），项目结构如下：
 
 原本的入口代码被移动到了和 `package.json` 中 `name` 同名的目录下，并创建了 `new-entry` 入口目录。
 
-执行 `pnpm run dev` 后，可以看到新增了一条名为 `/new-entry` 的路由，并且被迁移的代码路由并未发生变化。
+你可以执行 `pnpm run dev` 启动开发服务，此时可以看到新增了一条名为 `/new-entry` 的路由，并且原有页面的路由并未发生变化。
 
 :::tip
 Modern.js 会将与 `package.json` 文件中 `name` 字段同名的入口作为主入口，主入口的路由为 `/`，其他入口的路由为 `/{entryName}`。
@@ -76,7 +76,8 @@ import EntryMode from '@site-docs/components/entry-mode.mdx';
 默认情况下，Modern.js 启动项目前会对 `src/` 下的文件进行扫描，识别入口，并生成对应的服务端路由。
 
 :::tip
-可以通过 [source.entriesDir](/configure/app/source/entries-dir) 修改页面的入口识别目录。
+- 你可以通过 [source.entriesDir](/configure/app/source/entries-dir) 修改页面入口的识别目录。
+- 如果你需要自定义入口，请参考 [自定义入口](#自定义入口)。
 
 :::
 
@@ -98,7 +99,7 @@ import EntryMode from '@site-docs/components/entry-mode.mdx';
 
 ### 框架模式入口
 
-框架模式指需要使用 Modern.js 框架能力，例如 Router、SSR、一体化调用等。这类入口约定下，开发者定义的入口并不是真正的 webpack 编译入口。Modern.js 在启动时会生成一个封装过的入口，可以在 `node_modules/.modern/{entryName}/index.js` 找到真正的入口。
+框架模式指的是需要使用 Modern.js 的框架能力，例如嵌套路由、SSR、一体化调用等。这类入口约定下，开发者定义的入口并不是真正的编译入口。Modern.js 在启动时会生成一个封装过的入口，可以在 `node_modules/.modern/[entryName]/index.js` 找到真正的入口。
 
 #### 约定式路由
 
@@ -146,7 +147,7 @@ export default (App: React.ComponentType, bootstrap: () => void) => {
   // do something before bootstrap...
   initSomething().then(() => {
     bootstrap();
-  })
+  });
 };
 ```
 
@@ -170,7 +171,9 @@ function render() {
     // runtime 的插件参数...
   })(App);
   if (IS_BROWSER) {
-    customBootstrap(AppWrapper, () => bootstrap(AppWrapper, MOUNT_ID, root, ReactDOM));
+    customBootstrap(AppWrapper, () =>
+      bootstrap(AppWrapper, MOUNT_ID, root, ReactDOM),
+    );
   }
   return AppWrapper;
 }
@@ -182,9 +185,11 @@ export default AppWrapper;
 
 ### 构建模式入口
 
-构建模式是指不使用任何 Modern.js 运行时的能力，完全由开发者自己定义项目 webpack 的入口。
+构建模式指的是不使用 Modern.js 自动生成的入口，而是完全由开发者自行定义页面的入口。
 
-如果入口中存在 `index.[jt]sx` ，并且没有默认导出函数时，这时候该文件就是真正的 webpack 入口文件。这里和 [Create React App](https://github.com/facebook/create-react-app) 类似，需要自己将组件挂载到 DOM 节点、添加热更新代码等。例如:
+当入口目录中存在 `index.[jt]sx`，并且没有通过 `export default` 导出函数时，这类文件就会被识别为 webpack 或 Rspack 的 entry 模块。
+
+此时 Modern.js 不会自动生成入口代码，因此需要你自行将组件挂载到 DOM 节点上，例如:
 
 ```js title=src/index.jsx
 import React from 'react';
@@ -194,42 +199,39 @@ import App from './App';
 ReactDOM.render(<App />, document.getElementById('root'));
 ```
 
-Modern.js **不推荐**新项目使用这种方式，这种方式丧失了框架的一些能力，如 **`modern.config.js` 文件中的 `runtime` 配置将不会再生效**。但是在项目从其他框架迁移到 Modern.js，例如 CRA，或是自己手动搭建的 webpack 时，这种方式会非常有用。
+这种方式等价于开启 Modern.js 的 [source.entries.disableMount](/configure/app/source/entries) 选项。当你使用这种方式时，**将无法使用 Modern.js 框架的运行时能力**，比如 modern.config.js 文件中的 `runtime` 配置将不会再生效。
 
-## 使用配置指定入口
+## 自定义入口
 
-大部分存量项目并不是按照 Modern.js 的目录结构来搭建的。如果要改成 Modern.js 约定的目录结构，会存在一定的迁移成本。
+在某些情况下，你可能需要自定义入口配置，而不是使用 Modern.js 提供的入口约定。
 
-在这种情况下，除了使用文件约定生成入口外，你可以在 `modern.config.[jt]s` 中手动配置入口。
+比如你需要将一个非 Modern.js 项目迁移到 Modern.js，它并不是按照 Modern.js 的目录结构来搭建的。如果你要将它改成 Modern.js 约定的目录结构，可能会存在一定的迁移成本。这种情况下，你就可以使用自定义入口。
 
-```ts title="modern.config.ts"
-export default defineConfig({
-  source: {
-    entries: {
-      // 指定一个名称为 entry_customize 的新入口
-      entry_customize: './src/home/test/index.ts',
-    },
-    // 禁用默认入口扫描
-    disableDefaultEntries: true,
-  },
-});
-```
+Modern.js 提供了以下配置项，你可以在 [modern.config.ts](/configure/app/usage) 中配置它们：
 
-### 禁用默认入口扫描
+- [source.entries](/configure/app/source/entries)：用于设置自定义的入口对象。
+- [source.disableDefaultEntries](/configure/app/source/disable-default-entries)：用于关闭 Modern.js 默认的入口扫描行为。当你使用自定义入口时，项目的部分结构可能会恰巧命中 Modern.js 约定的目录结构，但你可能不希望 Modern.js 为你自动生成入口配置，开启该选项可以避免这个问题。
 
-当使用自定义入口时，项目的部分结构可能恰巧命中了 Modern.js 的目录约定，但实际上这部分目录并不是真实的入口。
+### 示例
 
-Modern.js 提供了 `disableDefaultEntries` 配置，来禁用默认的入口扫描规则。当你需要自定义入口时，一般需要将 `disableDefaultEntries` 与 `entries` 结合使用。这样，一些存量项目可以在不修改目录结构的情况下，快速地进行迁移。
+下面是一个自定义入口的例子，你也可以查看相关配置项的文档来了解更多用法。
 
 ```ts title="modern.config.ts"
 export default defineConfig({
   source: {
+    entries: {
+      // 指定一个名为 'my-entry' 的入口
+      'my-entry': {
+        // 入口模块的路径
+        entry: './src/my-page/index.tsx',
+        // 关闭 Modern.js 自动生成入口代码的行为
+        disableMount: true,
+      },
+    },
+    // 禁用入口扫描行为
     disableDefaultEntries: true,
   },
 });
 ```
 
-:::tip
-详细用法请查看 [source.entries](/configure/app/source/entries) 和 [source.disableDefaultEntries](/configure/app/source/disable-default-entries)。
-
-:::
+注意，当你开启 `disableMount` 时，**将无法使用 Modern.js 框架的运行时能力**，比如 modern.config.ts 文件中的 `runtime` 配置将不会再生效。

package/docs/zh/guides/get-started/quick-start.mdx

@@ -92,7 +92,7 @@ $ pnpm run build
 > modern build
 
 info    Staring production build...
-ready   Client compiled in 50ms
+ready   Client compiled in 50 ms
 info    Production file sizes:
 
   File                                      Size         Gzipped

package/docs/zh/guides/topic-detail/framework-plugin/extend.mdx

@@ -1,5 +1,4 @@
 ---
-title: 扩展插件 Hook
 sidebar_position: 5
 ---
 

package/docs/zh/guides/topic-detail/framework-plugin/hook-list.mdx

@@ -1,5 +1,4 @@
 ---
-title: Hook 列表
 sidebar_position: 8
 ---
 

package/docs/zh/guides/topic-detail/framework-plugin/hook.mdx

@@ -1,7 +1,7 @@
 ---
-title: Hook 模型
 sidebar_position: 2
 ---
+
 # Hook 模型
 
 首先介绍一下 Modern.js 的基础的插件系统中的一些内容，包括 Hook 模型的工作方式、各个 Hook 模型的运行模式、Manager 的工作模式。

package/docs/zh/guides/topic-detail/framework-plugin/implement.mdx

@@ -1,5 +1,4 @@
 ---
-title: 如何编写插件
 sidebar_position: 3
 ---
 

package/docs/zh/guides/topic-detail/framework-plugin/introduction.mdx

@@ -1,7 +1,7 @@
 ---
-title: 介绍
 sidebar_position: 1
 ---
+
 # 介绍
 
 ## Modern.js 插件系统

package/docs/zh/guides/topic-detail/framework-plugin/lifecycle.mdx

@@ -1,7 +1,7 @@
 ---
-title: 生命周期
 sidebar_position: 1
 ---
+
 # 生命周期
 
 Modern.js 应用具有完整的生命周期，包括 CLI、Server Side 和 Runtime 三个阶段。

package/docs/zh/guides/topic-detail/framework-plugin/plugin-api.mdx

@@ -1,5 +1,4 @@
 ---
-title: 插件 API
 sidebar_position: 6
 ---
 
@@ -79,26 +78,43 @@ interface NormalizedConfig {
 const useAppContext: () => IAppContext;
 
 interface IAppContext {
+  /** 当前项目的根目录 */
   appDirectory: string;
+  /** 源代码目录 */
+  srcDirectory: string;
+  /** 构建产出输出目录 */
+  distDirectory: string;
+  /** 公共模块目录 */
+  sharedDirectory: string;
+  /** 框架临时文件输出目录 */
+  internalDirectory: string;
+  /** node_modules 目录 */
+  nodeModulesDirectory: string;
+  /** 配置文件路径 */
   configFile: string | false;
+  /** 当前机器的 IPv4 地址 */
   ip?: string;
+  /** 开发服务器的端口号 */
   port?: number;
-  distDirectory: string;
+  /** 当前项目 package.json 的 name */
   packageName: string;
-  srcDirectory: string;
-  sharedDirectory: string;
-  nodeModulesDirectory: string;
-  internalDirectory: string;
-  plugins: {
-    cli?: any;
-    server?: any;
-  }[];
+  /** 当前注册的插件 */
+  plugins: any[];
+  /** 页面入口信息 */
   entrypoints: Entrypoint[];
+  /** 服务端路由信息 */
   serverRoutes: ServerRoute[];
-  htmlTemplates: HtmlTemplates;
+  /** 当前项目类型 */
+  toolsType?: 'app-tools' | 'module-tools' | 'monorepo-tools';
+  /** 当前使用的打包工具类型 */
+  bundlerType?: 'webpack' | 'rspack' | 'esbuild';
 }
 ```
 
+:::tip
+AppContext 中的部分字段是动态设置的，会随着程序的运行而变化。因此，当插件在不同的时机读取字段时，可能会获取到不同的值。
+:::
+
 ### useHookRunners
 
 用于获取 Hooks 的执行器，并触发特定的 Hook 执行。
@@ -116,3 +132,7 @@ export const myPlugin = (): CliPlugin => ({
   },
 });
 ```
+
+:::tip
+请尽量避免执行框架内置的 hooks，否则可能会导致框架内部的运行逻辑出错。
+:::

package/docs/zh/guides/topic-detail/framework-plugin/relationship.mdx

@@ -1,7 +1,7 @@
 ---
-title: 插件之间的关系
 sidebar_position: 4
 ---
+
 # 插件之间的关系
 
 Modern.js 的插件配置对象提供了一系列的字段，用于控制插件顺序、互斥等能力，可用的字段如下：

package/docs/zh/guides/topic-detail/generator/new/config.md

@@ -129,13 +129,8 @@ sidebar_position: 3
 选项：
 
 - Web 应用 -- mwa
-
-- Web 应用（测试）-- mwa_test
-
 - Npm 模块 -- module
 
-- Npm 模块（内部）-- inner_module
-
 ### packageName
 
 问题：请填写子项目名称

package/docs/zh/guides/topic-detail/micro-frontend/c03-main-app.mdx

@@ -44,12 +44,12 @@ defineConfig(App, {
         return [
           {
             name: 'Table',
-            entry: 'http://localhost:8001',
+            entry: 'http://localhost:8081',
             // activeWhen: '/table'
           },
           {
             name: 'Dashboard',
-            entry: 'http://localhost:8002',
+            entry: 'http://localhost:8082',
             // activeWhen: '/dashboard'
           },
         ];

package/docs/zh/guides/topic-detail/monorepo/create-sub-project.mdx

@@ -29,23 +29,9 @@ pnpm run new
 ```
 ? 请选择你想创建的工程类型 (Use arrow keys)
 ❯ Web 应用
-  Web 应用（测试）
   Npm 模块
-  Npm 模块（内部）
 ```
 
-:::info
-「应用」与「应用（测试）」都是「应用」类型的项目，区别是「应用」类型的子项目会创建在 `./apps` 目录下，而 「应用（测试）」类型的子项目会创建在 `./examples` 目录下。
-
-:::
-
-:::info
-「模块」与「模块（内部）」都是「模块」类型的项目，区别之一是「模块」类型的子项目会创建在 `./packages` 目录下，而「模块（内部）」类型的子项目会创建在 `./features` 目录下。
-
-对于「模块」类型的子项目允许被发布到外部（例如 npm)，而对于「模块（内部）」的子项目则可以在应用项目中直接使用其源码（该特性是「模块」项目不具备的，应用项目对于「模块（内部）」子项目做了特殊处理），因此这类子项目不需要发布到外部。
-
-:::
-
 然后根据不同的需求选择对应的类型项目选项，选择之后便开始出现对应子项目类型的问题和选项。例如选择「应用」后会出现：
 
 ```