@modern-js/main-doc 2.0.0-beta.3 → 2.0.0-beta.5

package/zh/guides/basic-features/routes.md

@@ -177,7 +177,7 @@ Modern.js 会生成 `/login` 和 `/sign` 两条路由，`__auth/layout.tsx` 组
 
 `routes/` 下每一层目录中，开发者可以创建 `loading.tsx` 文件，默认导出一个 `<Loading>` 组件。
 
-当路由目录下存在该组件时，这一级子路由下所有的路由切换时，都会以该 `<Loading>` 组件作为 JS Chunk 加载时的 Fallback UI。当该目录下未定义 `layout.tsx` 文件时，`<Loading>` 组件不会生效。例如以下文件目录：
+当路由目录下存在该组件和 `layout` 组件时，这一级子路由下所有的路由切换时，都会以该 `<Loading>` 组件作为 JS Chunk 加载时的 Fallback UI。例如以下文件目录：
 
 ```bash
 .
@@ -191,7 +191,38 @@ Modern.js 会生成 `/login` 和 `/sign` 两条路由，`__auth/layout.tsx` 组
     └── page.tsx
 ```
 
-当路由从 `/` 跳转到 `/blog` 时，如果 `<Blog>` 组件的 JS Chunk 还未加载，则会先展示 `loading.tsx` 中导出的组件 UI。但从 `/blog` 跳转到 `/blog/20220101` 时，则不会展示。
+当定义 `loading.tsx` 时，就相当于以下布局：
+```tsx title="当路由为 / 时"
+<Layout>
+  <Suspense fallback={<Loading/>}>
+    <Page><Page>
+  </Suspense>
+</Layout>
+```
+
+```tsx title="当路由为 /blog 时"
+<Layout>
+  <Suspense fallback={<Loading/>}>
+    <BlogPage />
+  </Suspense>
+</Layout>
+```
+
+```tsx title="当路由为 /blog/123 时"
+<Layout>
+  <Suspense fallback={<Loading/>}>
+    <BlogIdPage />
+  </Suspense>
+</Layout>
+```
+:::info
+当目录的 layout 组件不存在时，该目录下的 loading 组件也不会生效。
+:::
+
+当路由从 `/` 跳转到 `/blog` 时，如果 `blog/page` 组件的 JS Chunk 还未加载，则会先展示 `loading.tsx` 中导出的组件 UI。
+
+同理，当路由从 `/` 或者 `/blog` 跳转到 `/blog/123` 时，如果 `blog/[id]/page` 组件的 JS Chunk 还未加载，也会先展示 `loading.tsx` 中导出的组件 UI。
+
 
 ### 错误处理
 
@@ -206,7 +237,7 @@ Modern.js 会生成 `/login` 和 `/sign` 两条路由，`__auth/layout.tsx` 组
 
 ```tsx
 import { useRouteError } from '@modern-js/runtime/router';
-export default const ErrorBoundary = () => {
+const ErrorBoundary = () => {
   const error = useRouteError();
   return (
     <div>
@@ -215,6 +246,7 @@ export default const ErrorBoundary = () => {
     </div>
   )
 }
+export default ErrorBoundary;
 ```
 
 ## 自控式路由

package/zh/guides/concept/entries.md

@@ -3,7 +3,7 @@ title: 入口
 sidebar_position: 2
 ---
 
-入口是 Modern.js 默认的文件约定，项目的每一个入口是一张独立的页面，对应一条服务端路由。
+入口是 Modern.js 默认的文件约定，项目的每一个入口是一张独立的页面，对应一条**服务端路由**。
 
 很多配置，如 HTML 模板、Meta 信息、是否开启 SSR、SSG、服务端路由规则都是以入口为维度划分的。
 
@@ -13,7 +13,6 @@ Modern.js 初始化的项目是单入口的，项目结构如下：
 
 ```
 .
-├── node_modules
 ├── src
 │   ├── modern-app-env.d.ts
 │   └── routes
@@ -30,9 +29,9 @@ Modern.js 初始化的项目是单入口的，项目结构如下：
 Modern.js 可以很方便的将单入口切换成多入口。可以在项目下执行 `pnpm run new`，通过生成器创建入口：
 
 ```bash
-? 请选择你想要的操作： 创建工程元素
-? 创建工程元素： 新建「应用入口」
-? 请填写入口名称： new-entry
+? 请选择你想要的操作 创建工程元素
+? 创建工程元素 新建「应用入口」
+? 请填写入口名称 new-entry
 ```
 
 执行后，`src/` 目录将会变成如下结构：
@@ -57,10 +56,13 @@ Modern.js 可以很方便的将单入口切换成多入口。可以在项目下
 执行 `pnpm run dev` 后，可以看到新增一条 `/new-entry` 的路由，并且被迁移的代码路由并未发生变化。
 
 :::note
-Modern.js 会将和 `package.json` 中 `name` 同名的目录作为主入口，默认路由为 `/`，其他入口默认路由为 `/{entryName}`。
+Modern.js 会将和 `package.json` 中 `name` 字段同名的入口作为主入口，默认路由为 `/`，其他入口默认路由为 `/{entryName}`。
 :::
 
-## 入口条件
+
+## 入口类型
+
+不同的入口类型具有不同的编译和运行时行为。在 Modern.js 创建项目时，开发者可以手动选择创建**框架模式**或是**构建模式**的项目。完成创建后，可以看到不同模式的项目样板文件是不同的。
 
 默认情况下，Modern.js 启动项目前会对 `src/` 下的文件进行扫描，识别入口，并生成对应的服务端路由。
 
@@ -73,7 +75,7 @@ Modern.js 会将和 `package.json` 中 `name` 同名的目录作为主入口，
 1. 具有 `routes/` 目录
 2. 具有 `App.[jt]sx?` 文件
 3. 具有 `index.[jt]sx?` 文件
-2. 具有 `pages/` 目录（兼容旧版本）
+2. 具有 `pages/` 目录（兼容 Modern.js 1.0）
 
 当 `src/` 目录满足入口特征时，Modern.js 会认为当前项目为单入口应用。
 
@@ -83,34 +85,121 @@ Modern.js 会将和 `package.json` 中 `name` 同名的目录作为主入口，
 
 当项目不是单入口应用时，Modern.js 会进一步查看 `src/` 下的一级目录。
 
-## 入口的区别
+### 框架模式入口
 
-不同约定的入口具有不同的行为。
+框架模式指需要使用 Modern.js 框架能力，例如 Router、SSR、一体化调用等。这类入口约定下，开发者定义的入口并不是真正的 Webpack 编译入口。Modern.js 在启动时会生成一个封装过的入口，可以在 `node_modules/.modern/{entryName}/index.js` 找到真正的入口。
 
-### routes 入口
+#### 约定式路由
 
-如果入口为 `routes/` 约定，Modern.js 会在启动时扫描 `routes` 下的文件，基于文件约定，自动生成客户端路由（react-router）。
+如果入口中存在 `routes/` 目录，Modern.js 会在启动时扫描 `routes/` 下的文件，基于文件约定，自动生成客户端路由（react-router）。
 
 详细内容可以参考[路由](/docs/guides/basic-features/routes)。
 
-### App 入口
+#### 自定义路由
 
-如果入口为 `App.[jt]sx?` 约定，开发者可以在这个文件中自由的设置客户端路由，或者不设置客户端路由。
+如果入口中存在 `App.[jt]sx?` 文件，开发者可以在这个文件中自由的设置客户端路由，或者不设置客户端路由。
 
 详细内容可以参考[路由](/docs/guides/basic-features/routes)。
 
-### Index 入口
+#### 自定义 App
+
+如果入口中存在 `index.[jt]sx` 文件，并且当文件默认导出函数时，Modern.js 还是会根据 runtime 的设置情况生成 createApp 包裹后的代码。在渲染过程中，将 createApp 包裹后的组件作为参数传递给 index 文件导出的函数，这样开发者可以自定义将组件挂载到 DOM 节点上，或在挂载前添加自定义行为。例如：
+
+```tsx
+import ReactDOM from 'react-dom/client'
+import { bootstrap } from '@modern-js/runtime';
+
+
+export default (App: React.ComponentType) => {
+  // do something before bootstrap...
+  bootstrap(App, 'root', undefined, ReactDOM);
+};
+```
+
+:::warning
+由于 bootstrap 函数需要兼容 React17 和 React18 的用法，调用 bootstrap 函数时需要手动传入 ReactDOM 参数。
+:::
+
+Modern.js 生成的文件内容如下：
+
+```js
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import customBootstrap from '@_edenx_src/index.tsx';
+import App from '@_edenx_src/App';
+import { router, state } from '@edenx/runtime/plugins';
+
+const IS_BROWSER = typeof window !== 'undefined' && window.name !== 'nodejs';
+const MOUNT_ID = 'root';
+
+let AppWrapper = null;
+
+function render() {
+  AppWrapper = createApp({
+    // runtime 的插件参数...
+  })(App)
+  if (IS_BROWSER) {
+    customBootstrap(AppWrapper);
+  }
+  return AppWrapper
+}
+
+AppWrapper = render();
+
+export default AppWrapper;;
+```
+
+### 构建模式入口
+
+构建模式是指不使用任何 Modern.js 运行时的能力，完全由开发者自己定义项目 Webpack 的入口。
+
+如果入口中存在 `index.[jt]sx` ，并且没有默认导出函数时，这时候该文件就是真正的 Webpack 入口文件。这里和 [Create React App](https://github.com/facebook/create-react-app) 类似，需要自己将组件挂载到 DOM 节点、添加热更新代码等。例如:
 
-通常情况下，上面两种模式已经能满足需求，但当开发者需要自己接管 React 挂载逻辑，或完全接管 Webpack 入口时，可以使用 `index.[jt]sx?` 约定。
+```js title=src/index.jsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
 
-如果入口为 `index.[jt]sx?` 约定，Modern.js 会根据该文件是否存在默认的组件导出，来决定构建行为。
+ReactDOM.render(<App />, document.getElementById('root'));
+```
+
+Modern.js **不推荐**使用这种方式，这种方式丧失了框架的一些能力，如 **`modern.config.js` 文件中的 `runtime` 配置将不会再生效**。但是在项目从其他框架迁移到 Modern.js，例如 CRA，或是自己手动搭建的 webpack 时，这种方式会非常有用。
 
-详细内容可以参考[自定义 App](/docs/guides/advanced-features/custom-app)。
+## 使用配置文件定义入口
 
-## 配置入口
+有些时候，已有的项目并不是按照 Modern.js 的目录结构来搭建的。如果强行要按照这种结构来工作，会有比较大的迁移成本。
 
 在 Modern.js 中，除了使用文件约定生成入口外，还可以在 `modern.config.[jt]s` 中手动配置入口。
 
+```ts
+export default defineConfig({
+  source: {
+    entries: {
+      // 指定一个名称为 entry_customize 的新入口
+      entry_customize: './src/home/test/index.js',
+    },
+  },
+});
+```
+
 :::tip
 详情可以查看 [source.entries](/docs/configure/app/source/entries)。
 :::
+
+## 禁用默认入口扫描
+
+另外，项目的部分结构可能恰巧命中了 Modern.js 的约定，但实际上这部分并不是真实的入口。
+
+Modern.js 提供了配置，来禁用默认的入口扫描。与配置的入口结合使用，大部分项目可以在不修改目录结构的情况下，快速的进行迁移。
+
+```ts
+export default defineConfig({
+  source: {
+    disableDefaultEntries: true,
+  },
+});
+```
+
+:::tip
+详情可以查看 [source.disableDefaultEntries](/docs/configure/app/source/disable-default-entries)。
+:::

package/zh/guides/get-started/quick-start.md

@@ -5,25 +5,9 @@ sidebar_position: 1
 
 ## 环境准备
 
-### Node.js
+import Prerequisites from '@site-docs/components/prerequisites.md'
 
-需要 [Node.js LTS](https://github.com/nodejs/Release)，并确保 Node 版本大于等于 14.17.6。
-
-Modern.js 推荐在开发环境里先安装 [nvm](https://github.com/nvm-sh/nvm#install--update-script)，在 shell 里集成[自动切换 node 版本的脚本](https://github.com/nvm-sh/nvm#deeper-shell-integration)。
-
-然后只要仓库根目录下有内容为 `lts/fermium` 或 `lts/gallium` 的 `.nvmrc` 文件，进入这个仓库时就会自动安装或切换到正确的 Node.js 版本。
-
-### pnpm
-
-推荐使用 [pnpm](https://pnpm.io/installation) 来管理依赖：
-
-```bash
-npm install -g pnpm
-```
-
-:::note
-Modern.js 同样支持使用 `yarn`、`npm` 进行依赖管理。
-:::
+<Prerequisites />
 
 ## 安装
 
@@ -44,72 +28,16 @@ npx @modern-js/create myapp
 
 ## 初始化项目
 
-Modern.js 生成器会提供一个可交互的问答界面，根据结果初始化项目，按照默认的选择进行初始化：
-
-```bash
-? 请选择你想创建的工程类型 应用
-? 请选择开发语言 TS
-? 请选择包管理工具 pnpm
-```
-
-在生成项目后，Modern.js 会自动安装依赖、创建 git 仓库。
-
-```bash
-[INFO] 依赖自动安装成功
-[INFO] git 仓库初始化成功
-[INFO] 创建成功！
-可在新项目的目录下运行以下命令：
-pnpm run dev          # 按开发环境的要求，运行和调试项目
-pnpm run build        # 按产品环境的要求，构建项目
-pnpm run start        # 按产品环境的要求，运行项目
-pnpm run lint         # 检查和修复所有代码
-pnpm run new          # 继续创建更多项目要素，比如应用入口
-```
-
-:::note
-Modern.js 生成器除了在项目初始化时工作外，也能在后续研发中生成项目各种粒度的模块，并非一用即抛开。
-:::
 
-现在，项目结构如下：
+import InitApp from '@site-docs/components/init-app.md'
 
-```
-.
-├── node_modules
-├── src
-│   ├── modern-app-env.d.ts
-│   └── routes
-│       ├── index.css
-│       ├── layout.tsx
-│       └── page.tsx
-├── modern.config.ts
-├── package.json
-├── pnpm-lock.yaml
-├── README.md
-└── tsconfig.json
-```
+<InitApp />
 
 ## 启动项目
 
-在项目中执行 `pnpm run dev` 即可启动项目：
-
-```bash
-$ pnpm run dev
-
-> modern dev
-
-info    Starting dev server...
-info    App running at:
-
-  > Local:    http://localhost:8080/
-  > Network:  http://10.94.58.87:8080/
-  > Network:  http://10.254.68.105:8080/
-
- Client ✔ done in 76.10ms
-```
-
-在浏览器中打开 `http://localhost:8000/`，能看到以下内容：
+import DebugApp from '@site-docs/components/debug-app.md'
 
-![dev](https://lf3-static.bytednsdoc.com/obj/eden-cn/nuvjhpqnuvr/modern-website/dev.png)
+<DebugApp />
 
 ## 使用配置
 
@@ -118,7 +46,7 @@ info    App running at:
 可以通过配置文件来开启功能，或覆盖 Modern.js 的默认行为。例如添加如下配置，开启 SSR：
 
 ```ts
-import { defineConfig } from '@modern-js/app-tools';
+import AppToolsPlugin, { defineConfig } from '@modern-js/app-tools';
 
 // https://modernjs.dev/docs/apis/app/config
 export default defineConfig({
@@ -129,6 +57,7 @@ export default defineConfig({
   server: {
     ssr: true,
   },
+  plugins: [AppToolsPlugin()],
 });
 ```
 
@@ -180,12 +109,12 @@ info    File sizes after production build:
 
 ## 本地验证
 
-在项目中执行 `pnpm run start` 即可在本地验证构建产物是否正常运行：
+在项目中执行 `pnpm run serve` 即可在本地验证构建产物是否正常运行：
 
 ```bash
-$ pnpm run start
+$ pnpm run serve
 
-> modern start
+> modern serve
 
 Starting the modern server...
 info    App running at:
@@ -199,4 +128,6 @@ info    App running at:
 
 ## 部署
 
-本地验证完成后，可以将 `dist/` 下的产物整理成服务器需要的结构，进行部署。
+import Deploy from '@site-docs/components/deploy.md'
+
+<Deploy />

package/zh/guides/get-started/upgrade.md

@@ -16,28 +16,30 @@ $ pnpm run upgrade
 
 [INFO] [项目类型]: 应用
 [INFO] [Modern.js 最新版本]: 2.0.0
-[INFO] [当前项目 Modern.js 依赖已经为最新版本]: 2.0.0
+[INFO] 已更新 Modern.js 依赖至最新版本!
 ```
 
-可以看到项目 `package.json` 中的依赖已经更改到最新，执行 `pnpm install` 重新安装即可。
+可以看到项目 `package.json` 中的依赖已经更改到最新。
 
 ## 指定版本升级
 
-Modern.js 所有的官方包目前都使用统一版本号进行发布。
+Modern.js 所有的官方包目前都使用**统一版本号**进行发布。
 
-根据官网 Release Note，开发者也可以手动将项目升级到想要的版本。
+import ReleaseNote from '@site-docs/components/release-note.md'
+
+<ReleaseNote />
 
 :::tip
-对所有 Modern.js 官方提供的包做统一升级，而不是升级单个依赖。
+当升级时，需要对 Modern.js 官方提供的所有包做统一升级，而不是升级单个依赖。
 :::
 
 ## 锁定子依赖
 
 当项目某个子依赖出现问题，而 Modern.js 无法立即更新时，可以使用包管理器锁定子依赖版本。
 
-### Pnpm
+### pnpm
 
-对于使用 Pnpm 的项目，请在**项目根目录**的 `package.json` 中添加以下配置，然后重新执行 `pnpm i`：
+对于使用 pnpm 的项目，请在**项目根目录**的 `package.json` 中添加以下配置，然后重新执行 `pnpm install`：
 
 ```json
 {
@@ -51,7 +53,7 @@ Modern.js 所有的官方包目前都使用统一版本号进行发布。
 
 ### Yarn
 
-对于使用 Yarn 的项目，请在**项目根目录**的 `package.json` 中添加以下配置，然后重新执行 `yarn i`：
+对于使用 Yarn 的项目，请在**项目根目录**的 `package.json` 中添加以下配置，然后重新执行 `yarn install`：
 
 ```json
 {
@@ -63,7 +65,7 @@ Modern.js 所有的官方包目前都使用统一版本号进行发布。
 
 ### Npm
 
-对于使用 Npm 的项目，请在**项目根目录**的 `package.json` 中添加以下配置，然后重新执行 `npm i`：
+对于使用 Npm 的项目，请在**项目根目录**的 `package.json` 中添加以下配置，然后重新执行 `npm install`：
 
 ```json
 {

package/zh/guides/topic-detail/micro-frontend/c01-introduction.md

@@ -0,0 +1,29 @@
+---
+sidebar_position: 1
+title: 微前端介绍
+---
+
+微前端是一种类似于微服务的架构，是一种由独立交付的多个前端应用组成整体的架构风格，将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的应用，而在用户看来仍然是内聚的单个产品。
+
+它主要解决了两个问题：
+
+* 随着项目迭代应用越来越庞大，难以维护。
+* 跨团队或跨部门协作开发项目导致效率低下的问题。
+
+## 微前端关键词
+
+在微前端研发模式中，应用会被分成 **主应用**、和 **子应用**。
+
+- 主应用：微前端项目的基座工程，所有子应用都会由它来加载。
+- 子应用：独立开发、独立部署的应用，最终会被主应用加载。
+
+## 功能简介
+
+* 基于 [Garfish](https://www.garfishjs.org/guide)
+* 生成器支持微前端应用
+* 支持 React 组件式引用微前端子应用
+* 支持 loading
+* 支持主应用线上、子应用线下调试模式
+
+可以在 [体验微前端](/docs/guides/topic-detail/micro-frontend/c02-development) 一节学习如何开发微前端主子应用。
+

package/zh/guides/topic-detail/micro-frontend/c02-development.md

@@ -0,0 +1,191 @@
+---
+sidebar_position: 2
+title: 体验微前端
+---
+
+通过本章你可以了解到：
+
+- 如何创建微前端项目的主应用、子应用。
+- 微前端项目开发的基本流程。
+
+## 创建应用
+
+在这次的实践中，我们需要创建三个应用，分别为1个主应用，2个子应用：
+
+- main 主应用
+- dashboard 子应用
+- table 子应用
+
+### 创建 main 主应用
+
+通过命令行工具初始化项目：
+
+```bash
+mkdir main && cd main
+npx @modern-js/create
+```
+
+import DefaultMWAGenerate from '@site-docs/components/default-mwa-generate.md';
+
+<DefaultMWAGenerate />
+
+完成项目创建后我们可以通过 `pnpm run new` 来开启 `微前端` 功能：
+
+```bash
+? 请选择你想要的操作 启用可选功能
+? 启用可选功能 启用「微前端」模式
+```
+
+接下来，让我们注册微前端插件并添加开启微前端主应用，并增加子应用列表：
+
+import EnableMicroFrontend from '@site-docs/components/enable-micro-frontend.md';
+
+<EnableMicroFrontend />
+
+import MicroRuntimeConfig from '@site-docs/components/micro-runtime-config.md';
+
+<MicroRuntimeConfig />
+
+
+### 创建 dashboard 子应用
+
+通过命令行工具初始化项目：
+
+```bash
+mkdir dashboard && cd dashboard
+npx @modern-js/create
+```
+
+按照如下选择，生成项目：
+
+<DefaultMWAGenerate/>
+
+我们执行 `pnpm run new` 来开启 `微前端` 功能：
+
+```bash
+? 请选择你想要的操作 启用可选功能
+? 启用可选功能 启用「微前端」模式
+```
+接下来，让我们注册微前端插件并修改 `modern.config.ts`，添加微前端子应用的配置 `deploy.microFrontend`：
+
+```javascript title="modern.config.ts"
+import AppToolPlugin, { defineConfig } from '@modern-js/app-tools';
+import GarfishPlugin from '@modern-js/plugin-garfish';
+
+export default defineConfig({
+  runtime: {
+    router: true,
+    state: true
+  },
+  deploy: {
+    microFrontend: true
+  },
+  plugins: [AppToolPlugin(), GarfishPlugin()],
+});
+```
+
+### 创建 table 子应用
+
+通过命令行工具初始化项目：
+
+```bash
+mkdir table && cd table
+npx @modern-js/create
+```
+
+按照如下选择，生成项目：
+
+<DefaultMWAGenerate/>
+
+我们执行 `pnpm run new` 来开启 `微前端`：
+
+```bash
+? 请选择你想要的操作 启用可选功能
+? 启用可选功能 启用「微前端」模式
+```
+
+接下来，让我们注册微前端插件并修改 `modern.config.ts`，添加微前端子应用的配置 `deploy.microFrontend`：
+
+```javascript title="modern.config.ts"
+import AppToolPlugin, { defineConfig } from '@modern-js/app-tools';
+import GarfishPlugin from '@modern-js/plugin-garfish';
+
+export default defineConfig({
+  runtime: {
+    router: true,
+    state: true
+  },
+  deploy: {
+    microFrontend: true
+  },
+  plugins: [AppToolPlugin(), GarfishPlugin()],
+});
+```
+
+## 添加代码
+
+### main 主应用
+
+删除 `src/routers` 目录, 创建 `src/App.tsx`，并添加如下内容：
+
+```tsx
+import { Link } from '@modern-js/runtime/router';
+import { useModuleApps } from '@modern-js/runtime/garfish';
+
+const App = () => {
+  const { DashBoard, TableList } = useModuleApps();
+  return (
+    <div>
+      <div>
+        <Link to='/dashboard'>Dashboard</Link> &nbsp;
+        <Link to='/table'>Table</Link>
+      </div>
+      <Route path='/dashboard'>
+        <DashBoard />
+      </Route>
+      <Route path='/table'>
+        <TableList />
+      </Route>
+    </div>
+  );
+};
+
+export default App;
+```
+
+### dashboard 子应用
+
+删除 `src/routers` 目录, 创建 `src/App.tsx`，并添加如下内容：
+
+```tsx
+export default () => <div>Dashboard Page</div>;
+```
+
+### table 子应用
+
+删除 `src/routers` 目录, 创建 `src/App.tsx`，并添加如下内容：
+
+```tsx
+export default () => <div>Table Page</div>;
+```
+
+## 调试
+
+按顺序在 `main`、 `dashboard`、 `table` 目录执行 `pnpm run dev` 命令启动应用：
+
+- main      - `http://localhost:8080`
+- dashboard - `http://localhost:8081`
+- table     - `http://localhost:8082`
+
+访问主应用地址 `http://localhost:8080`，效果如下：
+
+![demo](https://tosv.byted.org/obj/eden-internal/ozpmyhn_lm_hymuPild/ljhwZthlaukjlkulzlp/modernjs/micro-demo.gif)
+
+在完成了微前端整体开发流程的体验后，你可以进一步了解如何 [开发主应用](./c03-main-app.md)
+
+
+## 常见问题
+
+自查手册: https://www.garfishjs.org/issues/
+
+