@modern-js/main-doc 2.2.0 → 2.4.0

package/zh/guides/topic-detail/generator/config/common.mdx

@@ -53,36 +53,36 @@ scenes 配置只能在 `@modern-js/create` 的 `--config` 参数中使用，不
 
 ### noNeedInstall
 
-- Type: `boolean`
-- Default: `false`
+- **类型：** `boolean`
+- **默认值：** `false`
 
 是否跳过依赖安装。
 
 ### noNeedGit
 
-- Type: `boolean`
-- Default: `false`
+- **类型：** `boolean`
+- **默认值：** `false`
 
 是否跳过 git 初始化和提交初始 commit。
 
 ### successInfo
 
-- Type: `string`
-- Default: 不同工程方案的命令操作提示
+- **类型：** `string`
+- **默认值：** 不同工程方案的命令操作提示
 
 自定义创建项目成功的提示信息。
 
 ### isMonorepoSubProject
 
-- Type: `boolean`
-- Default: `false`
+- **类型：** `boolean`
+- **默认值：** `false`
 
 是否为 Monorepo 子项目。
 
 ### isTest
 
-- Type: `boolean`
-- Default: `false`
+- **类型：** `boolean`
+- **默认值：** `false`
 
 作用于应用项目，标识是否为测试项目。
 
@@ -91,8 +91,8 @@ scenes 配置只能在 `@modern-js/create` 的 `--config` 参数中使用，不
 
 ### isPublic
 
-- Type: `boolean`
-- Default: `false`
+- **类型：** `boolean`
+- **默认值：** `false`
 
 作用于模块 (Module) 项目，标识是否需要对外发布。
 

package/zh/guides/topic-detail/generator/plugin/api/input/addInputBefore.mdx

@@ -45,7 +45,7 @@ context.addInputBefore('packageManager', {
 });
 ```
 
-:::info 注意事项
+:::info意事项
 
 1. 添加问题的 key 不能和 Modern.js 提供的项目类型自身的问题的 key 重复
 

package/zh/guides/topic-detail/generator/plugin/api/new/createElement.mdx

@@ -30,4 +30,4 @@ export type ForgedAPI = {
 
 ## params
 
-创建元素的其他参数，详细参考[应用 New 命令](/guides/topic-detail/generator/config/mwa#new-命令)。
+创建元素的其他参数，详细参考[应用 New 命令](/guides/topic-detail/generator/config/app#new-命令)。

package/zh/guides/topic-detail/generator/plugin/api/new/enableFunc.mdx

@@ -41,4 +41,4 @@ export type ForgedAPI = {
 
 ## params
 
-启用功能时其他参数，详细参考[应用 New 命令](/guides/topic-detail/generator/config/mwa#new-命令)和[模块 New 命令](/guides/topic-detail/generator/config/module#new-命令)。
+启用功能时其他参数，详细参考[应用 New 命令](/guides/topic-detail/generator/config/app#new-命令)和[模块 New 命令](/guides/topic-detail/generator/config/module#new-命令)。

package/zh/guides/topic-detail/generator/plugin/api/new/introduce.mdx

@@ -6,9 +6,9 @@ sidebar_position: 1
 
 Modern.js 提供的三个工程方案支持在项目中执行 new 命令创建元素和开启功能。在生成器插件中可直接调用相关 API 默认创建一些元素和开启支持的功能。
 
-不同的工程方案支持的 new 操作
+不同的工程方案支持的 new 操作：
 
-- [应用](/guides/topic-detail/generator/config/mwa#new-命令)
+- [Web 应用](/guides/topic-detail/generator/config/app#new-命令)
 
 - [模块](/guides/topic-detail/generator/config/module#new-命令)
 

package/zh/guides/topic-detail/generator/plugin/develop.mdx

@@ -6,7 +6,7 @@ sidebar_position: 3
 
 ## 创建项目
 
-Modern.js 提供了创建生成器插件项目的生成器插件用于创建项目，可直接执行以下命令创建:
+Modern.js 提供了生成器插件用于创建开发项目，可直接执行以下命令创建:
 
 ```bash
 npx @modern-js/create plugin --plugin @modern-js/generator-plugin-plugin
@@ -14,7 +14,7 @@ npx @modern-js/create plugin --plugin @modern-js/generator-plugin-plugin
 
 插件类型不同，会提问不同的问题，可根据需求选择插件类型
 
-### 扩展类型
+### 扩展工程方案
 
 ```
 ? 请选择你想创建的工程类型 模块
@@ -26,7 +26,7 @@ npx @modern-js/create plugin --plugin @modern-js/generator-plugin-plugin
 ? 插件基础类型 应用
 ```
 
-### 自定义类型
+### 创建工程方案场景
 
 ```
 ? 请选择你想创建的工程类型 模块

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

@@ -10,19 +10,20 @@ title: 体验微前端
 - 微前端项目开发的基本流程。
 
 ## 创建应用
+目前支持两种路由模式
+- 自控式路由
+- 约定式路由
 
-在这次的实践中，我们需要创建三个应用，分别为 1 个主应用，2 个子应用：
+首先明确主应用的路由模式 [创建约定式路由主应用](#创建约定式路由主应用) 或 [创建自控式路由主应用](#创建自控式路由主应用)
 
-- main 主应用
-- dashboard 子应用
-- table 子应用
+在本次体验中我们会为主应用创建两个子应用 Table 和 Dashboard (Table 为约定式路由，Dashboard 为自控式路由)
 
-### 创建 main 主应用
+### 创建约定式路由主应用
 
 通过命令行工具初始化项目：
 
 ```bash
-mkdir main && cd main
+mkdir masterApp && cd masterApp
 npx @modern-js/create
 ```
 
@@ -43,16 +44,96 @@ import EnableMicroFrontend from "@site-docs/components/enable-micro-frontend";
 
 <EnableMicroFrontend />
 
-import MicroRuntimeConfig from "@site-docs/components/micro-runtime-config";
+然后我们在 routes 文件夹下新建两个目录
+- table (用于加载约定式路由子应用)
+- dashboard (用于加载自控式路由子应用)
 
-<MicroRuntimeConfig />
+在这两个目录下我们需要新建一个 `$.tsx` 文件作为主应用约定式路由的入口($ 代表模糊匹配，即 `/table` 和 `/table/test` 都会匹配到这个 `$.tsx` 作为该路由的入口文件，这会保证在微前端场景下正确加载子应用路由)
 
-### 创建 dashboard 子应用
+#### 加载约定式路由子应用
+```js title="src/routes/table/$.tsx"
+import { useModuleApps } from '@modern-js/plugin-garfish/runtime';
+
+const Index = () => {
+  const { Table } = useModuleApps();
+
+  return (
+    <div>
+      <Table />
+    </div>
+  )
+}
+
+export default Index;
+```
+
+#### 加载自控式路由子应用
+```js title="src/routes/dashboard/$.tsx"
+import { useModuleApps } from '@modern-js/plugin-garfish/runtime';
+
+const Index = () => {
+  const { Dashboard } = useModuleApps();
+
+  return (
+    <div>
+      <Dashboard />
+    </div>
+  )
+}
+
+export default Index;
+```
+#### 路由跳转
+此时主应用配置已经完成，通过路由即可加载子应用，修改主应用的 `layout.tsx` 来跳转路由
+```js title="src/route/layout.tsx"
+import { Outlet, Link } from '@modern-js/runtime/router';
+
+const Layout = () => (
+  <div>
+    <div><Link to={'/table'}>加载约定式路由子应用</Link></div>
+    <div><Link to={'/dashboard'}>加载自控式路由子应用</Link></div>
+    <div><Link to={'/'}>卸载子应用</Link></div>
+    <Outlet />
+  </div>
+);
+
+export default Layout;
+```
+
+### 创建自控式路由主应用
 
 通过命令行工具初始化项目：
 
 ```bash
-mkdir dashboard && cd dashboard
+mkdir masterApp && cd masterApp
+npx @modern-js/create
+```
+
+<DefaultMWAGenerate />
+
+完成项目创建后我们可以通过 `pnpm run new` 来开启 `微前端` 功能：
+
+```bash
+? 请选择你想要的操作 启用可选功能
+? 启用可选功能 启用「微前端」模式
+```
+
+接下来，让我们注册微前端插件并添加开启微前端主应用，并增加子应用列表：
+
+<EnableMicroFrontend />
+
+由于是自控式路由，我们删除掉 `routes` 文件夹并在 `src` 目录下增加 `App.tsx` 文件，此处如果使用的 `非 MApp` 组件，需要通过 `React Router v6` 的 `createBrowserRouter` API 来创建路由
+#### 加载子应用
+import CustomRouterMicroFrontend from "@site-docs/components/custom-router-micro-frontend";
+
+<CustomRouterMicroFrontend />
+
+### 创建约定式路由子应用
+
+通过命令行工具初始化项目：
+
+```bash
+mkdir table && cd table
 npx @modern-js/create
 ```
 
@@ -74,6 +155,9 @@ import appTools, { defineConfig } from '@modern-js/app-tools';
 import garfishPlugin from '@modern-js/plugin-garfish';
 
 export default defineConfig({
+  dev: {
+    port: 8081
+  },
   runtime: {
     router: true,
     state: true,
@@ -85,12 +169,23 @@ export default defineConfig({
 });
 ```
 
-### 创建 table 子应用
+添加 `src/routes/page.tsx` 代码
+```js title="src/routes/page.tsx"
+const Index = () => {
+  return (
+    <div className="container-box">subApp: 约定式路由的子应用的根路由</div>
+  )
+}
+
+export default Index;
+```
+
+### 创建自控式路由子应用
 
 通过命令行工具初始化项目：
 
 ```bash
-mkdir table && cd table
+mkdir dashboard && cd dashboard
 npx @modern-js/create
 ```
 
@@ -112,6 +207,9 @@ import appTools, { defineConfig } from '@modern-js/app-tools';
 import garfishPlugin from '@modern-js/plugin-garfish';
 
 export default defineConfig({
+  dev: {
+    port: 8082
+  },
   runtime: {
     router: true,
     state: true,
@@ -122,67 +220,36 @@ export default defineConfig({
   plugins: [appTools(), garfishPlugin()],
 });
 ```
+自控式路由需要删除掉 `routes` 文件夹并在 `src` 目录下新建 `App.tsx`
 
-## 添加代码
+并在 `src/App.tsx` 添加代码，注意需要从 `props` 中解析并传递 `basename` 给 `BrowserRouter`
 
-### main 主应用
+```js title="src/App.tsx"
+import { BrowserRouter, Route, Routes } from '@modern-js/runtime/router';
 
-删除 `src/routers` 目录, 创建 `src/App.tsx`，并添加如下内容：
+export default (props: {basename: string}) => {
+  const { basename } = props;
 
-```tsx
-import { Link } from '@modern-js/runtime/router';
-import { useModuleApps } from '@modern-js/plugin-garfish/runtime';
-
-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>
+    <BrowserRouter basename={basename}>
+      <Routes>
+        <Route index element={<div>自控式路由子应用根路由</div>} />
+        <Route path={'path'} element={<div>自控式路由子应用子路由</div>} />
+      </Routes>
+    </BrowserRouter>
   );
 };
-
-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>;
 ```
 
 ## 调试
+按顺序在目录执行 `pnpm run dev` 命令启动应用：
+- masterApp 主应用 `http://localhost:8080`
+- table 子应用(约定式路由) `http://localhost:8081`
+- dashboard 子应用(自控式路由) `http://localhost:8082`
 
-按顺序在 `main`、 `dashboard`、 `table` 目录执行 `pnpm run dev` 命令启动应用：
-
-- main - `http://localhost:8080`
-- dashboard - `http://localhost:8081`
-- table - `http://localhost:8082`
-
-访问主应用地址 `http://localhost:8080`，效果如下：
-
-![demo](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/micro-demo.gif)
+访问主应用地址 `http://localhost:8080`
 
-在完成了微前端整体开发流程的体验后，你可以进一步了解如何 [开发主应用](./c03-main-app.md)
+在完成了微前端整体开发流程的体验后，你可以进一步了解如何 [开发主应用](/guides/topic-detail/micro-frontend/c03-main-app)
 
 ## 常见问题
 

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

@@ -4,7 +4,7 @@ title: 开发主应用
 ---
 # 开发主应用
 
-在上一章 [体验微前端](./c02-development.md) 通过一个示例演示了如何创建和配置微前端子应用，通过本章你可以进一步了解如何开发主应用，以及它的常见配置。
+在上一章 [体验微前端](/guides/topic-detail/micro-frontend/c02-development.md) 通过一个示例演示了如何创建和配置微前端子应用，通过本章你可以进一步了解如何开发主应用，以及它的常见配置。
 
 在通过 `@modern-js/create` 命令创建应用工程后，可以在项目中执行 `pnpm run new`（实际执行了 `modern new` 命令），在选择了「微前端」模式后，会安装微前端依赖依赖，只需手动注册插件即可。
 
@@ -40,16 +40,15 @@ defineConfig(App, {
     manifest: {
       getAppList: async () => {
         // 可以从其他远程接口获取
-        return [
-          {
-            name: 'DashBoard',
-            entry: 'http://127.0.0.1:8081/',
-          },
-          {
-            name: 'TableList',
-            entry: 'http://localhost:8082',
-          },
-        ];
+        return [{
+          name: 'SubConvention',
+          entry: 'http://localhost:3002',
+          // activeWhen: '/SubConvention'
+        }, {
+          name: 'SubCustom',
+          entry: 'http://localhost:3003'
+          // activeWhen: '/SubConvention'
+        }];
       },
     },
   },
@@ -75,39 +74,71 @@ defineConfig(App, {
 
 编辑主应用 `App.tsx` 文件如下：
 
-```tsx title=主应用：App.tsx
+```js title="App.tsx"
 import { useModuleApps } from '@modern-js/plugin-garfish/runtime';
-import { Route, Switch } from '@modern-js/runtime/router';
 
-function App() {
-  const { DashBoard, TableList } = useModuleApps();
+import { RouterProvider, Route, createBrowserRouter, createRoutesFromElements, BrowserRouter, Link, Outlet } from '@modern-js/runtime/router';
 
-  return (
-    <div>
-      <Route path="/dashboard">
-        <DashBoard
-          loadable={{
-            loading: ({ pastDelay, error }: any) => {
-              if (error) {
-                return <div>error: {error?.message}</div>;
-              } else if (pastDelay) {
-                return <div>loading</div>;
-              } else {
-                return null;
+const AppLayout = () => (
+  <>
+    <div><Link to={'/SubConvention'}>加载约定式路由子应用</Link></div>
+    <div><Link to={'/SubCustom'}>加载自控式路由子应用</Link></div>
+    <div><Link to={'/'}>卸载子应用</Link></div>
+    <Outlet />
+  </>
+)
+
+export default () => {
+  const { apps, MApp } = useModuleApps();
+
+  // 使用的不是 MApp 组件，需要使用 createBrowserRouter 来创建路由
+  const router = createBrowserRouter(
+    createRoutesFromElements(
+      <Route path="/" element={<AppLayout />}>
+        {apps.map(app => {
+          const { Component } = app;
+          // 模糊匹配，path 需要写成类似 abc/* 的模式
+          return (
+            <Route
+              key={app.name}
+              path={`${app.name}/*`}
+              element={
+              <Component
+                loadable={{
+                  loading: ({ pastDelay, error }: any) => {
+                    if (error) {
+                      return <div>error: {error?.message}</div>;
+                    } else if (pastDelay) {
+                      return <div>loading</div>;
+                    } else {
+                      return null;
+                    }
+                  },
+                }}
+              />
               }
-            },
-          }}
-        />
-      </Route>
-      <Route path="/table">
-        <TableList />
+            />
+          )
+        })}
       </Route>
-    </div>
+    )
   );
-}
+
+  return (
+    // 方法一：使用 MApp 自动根据配置的 activeWhen 参数加载子应用(本项目配置在 modern.config.ts 中)
+    // <BrowserRouter>
+    //   <MApp />
+    // </BrowserRouter>
+
+    // 方法二：手动写 Route 组件方式加载子应用，方便于需要鉴权等需要前置操作的场景
+    <>
+      <RouterProvider router={router} />
+    </>
+  );
+};
 ```
 
-这里通过 `Route` 组件自定义了 **DashBoard** 的激活路由为 **/dashboard**， **TableList** 的激活路由为 **/table**。
+这里通过 `Route` 组件自定义了 **SubConvention** 的激活路由为 **/SubConvention**， **SubCustom** 的激活路由为 **/SubCustom**。
 
 ### 集中式路由
 
@@ -131,7 +162,7 @@ function App() {
 }
 ```
 
-这样启动应用后，访问 `/dashboard` 路由，会渲染 `Dashboard` 子应用，访问 `/table` 路由，会渲染 `TableList` 子应用。
+这样启动应用后，访问 `/SubCustom` 路由，会渲染 `SubCustom` 子应用，访问 `/SubConvention` 路由，会渲染 `SubConvention` 子应用。
 
 ### 两种模式混用
 
@@ -151,7 +182,7 @@ function Loading() {
 
 function App(){
   return <>
-    <DashBoard
+    <SubCustom
       loadable={{
         loading: Loading,
       }}
@@ -198,7 +229,7 @@ function Loading({ error, pastDelay }) {
 
 function App(){
   return <>
-    <DashBoard
+    <SubCustom
       loadable={{
         loading: Loading,
         delay: 300 // 0.3 seconds
@@ -234,7 +265,7 @@ function Loading({ error, timeOut, pastDelay }) {
 
 function App(){
   return <>
-    <DashBoard
+    <SubCustom
       loadable={{
         loading: Loading,
         timeOut: 10000 // 10s

package/zh/guides/topic-detail/micro-frontend/c05-mixed-stack.mdx

@@ -16,7 +16,7 @@ Modern.js 微前端方案是基于 [Garfish](https://garfishjs.org/) 封装的
 **Modern.js** 子应用编译后会生成标准的 [Garfish 子应用导出](https://www.garfishjs.org/guide/start#2%E5%AF%BC%E5%87%BA-provider-%E5%87%BD%E6%95%B0)。
 所以可以直接接入标准的微前端主应用。
 
-:::info 注
+:::info
 子应用是 **Modern.js**，主应用使用的原生 Garfish 微前端时，**子应用调试模式** 不可用。
 
 :::

package/zh/guides/topic-detail/model/auto-actions.mdx

@@ -80,7 +80,7 @@ function Counter() {
 
 根据 `a`、`b`、`c` 三个不同的字段分别生成 `setA`、`setB`、`setC` 三个 Actions。
 
-:::info 注
+:::info
 当用户自定义的 Action 和 Modern.js 自动生成的 Action 名字一致时，用户自定义的 Action 优先级更高。例如，
 在 `countModel` 中已经自定义 `setA` 这个 Action，调用 `actions.setA()` 时，最终执行的是用户自定义的 `setA`。
 

package/zh/guides/topic-detail/model/define-model.mdx

@@ -23,7 +23,7 @@ const fooModel = model('foo').define({
 });
 ```
 
-:::info 注
+:::info
 - Model 中的 Action 中不能包含有副作用的逻辑，如请求 HTTP 接口，访问 localStorage 等。
 - `setValue` 内部直接修改了入参 State，看起来是违反了纯函数的定义，实际上 Reduck 内部使用 [immer](https://github.com/immerjs/immer) 来修改不可变对象，保证了这种写法不会影响对象的不可变性，所以 `setValue` 仍然是一个纯函数。当然，你也可以直接在 Action 中返回一个新对象，不过这样的写法会更加复杂一些。
 

package/zh/guides/topic-detail/model/manage-effects.mdx

@@ -187,7 +187,7 @@ const todoModel = model('todo').define((context, utils) => ({
 }));
 ```
 
-:::info 注
+:::info
 可以使用 `use` 函数加载其它 Model（包括 Model 自身），实现 [Model 间通信](/guides/topic-detail/model/model-communicate)。
 
 :::

package/zh/guides/topic-detail/model/quick-start.mdx

@@ -16,7 +16,7 @@ Reduck 在 MVC 模式中，扮演 M(Model) 的角色，React UI Component 对应
 
 Modern.js 的状态管理解决方案，是通过内置 Reduck 实现的。在 Modern.js 中使用 Reduck，不仅免去了手动集成的环节，而且所有 Reduck API 都可以从 Modern.js 的 Runtime 包中直接导入使用，具有更好的一致性体验。
 
-:::info 注
+:::info
 1. Modern.js 中使用 Reduck API，需要先设置 [runtime.state](/configure/app/runtime/state) 以启用状态管理插件。
 2. Reduck 也可以脱离 Modern.js 作为状态管理库[单独使用](/guides/topic-detail/model/use-out-of-modernjs)。
 
@@ -101,7 +101,7 @@ function Counter() {
 
 `useModel` 获取 `countModel` 的 `state` 和 `actions`，组件展示当前计算器的值，点击 `add` 按钮，计数器自增 1。
 
-:::info 注
+:::info
 由于使用的案例比较简单，这里并没有严格按照 MVC 模式进行分层，组件 `Counter` 同时起到了 V 和 C 两层的作用。
 
 :::

package/zh/guides/topic-detail/model/test-model.mdx

@@ -35,7 +35,7 @@ describe('test model', () => {
 });
 ```
 
-:::info 注
+:::info
 这里使用的 [`createStore`](/apis/app/runtime/model/create-store) 是从 `@modern-js/runtime/testing` 导入的，内部会使用 [`runtime.state`](/configure/app/runtime/state) 的配置去创建 `store`。
 
 :::

package/zh/guides/topic-detail/model/use-model.mdx

@@ -111,7 +111,7 @@ const [state, actions] = useModel(
 
 通过 `useStaticModel` 获取 Model ，将 Model 中的状态作为静态状态使用。可以保证组件每次访问到的 Model 的 State 都是最新值，但是 Model 的 State 的变化，并不会引起当前组件的重新渲染。
 
-:::info 注
+:::info
 `useStaticModel` 的使用方式和 `useModel` 完全一致。
 
 :::
@@ -169,7 +169,7 @@ function ThreeComponent() {
 
 通过 `useLocalModel` 获取 Model ，将 Model 中的状态作为局部状态使用。此时 Model State 的变化，只会引起当前组件的重新渲染，但是不会引起其他使用了该 Model 的组件重新渲染。效果和通过 React 的 `useState` 管理状态类似，但是可以将状态的管理逻辑从组件中解耦，统一收敛到 Model 层。
 
-:::info 注
+:::info
 `useLocalModel` 的使用方式和 `useModel` 完全一致。
 
 :::
@@ -241,7 +241,7 @@ setInterval(() => {
 
 完整的示例代码可以在[这里](https://github.com/modern-js-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/counter-model-outof-react)查看。
 
-:::info 注
+:::info
 如果是通过 [`createStore`](/apis/app/runtime/model/create-store) 手动创建的 Store 对象，无需通过 `useStore` 在组件内获取，即可直接使用。
 
 :::

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

@@ -34,12 +34,12 @@ pnpm run new
   模块（内部）
 ```
 
-:::info 注
+:::info
 「应用」与「应用（测试）」都是「应用」类型的项目，区别是「应用」类型的子项目会创建在 `./apps` 目录下，而 「应用（测试）」类型的子项目会创建在 `./examples` 目录下。
 
 :::
 
-:::info 注
+:::info
 「模块」与「模块（内部）」都是「模块」类型的项目，区别之一是「模块」类型的子项目会创建在 `./packages` 目录下，而「模块（内部）」类型的子项目会创建在 `./features` 目录下。
 
 对于「模块」类型的子项目允许被发布到外部（例如 npm)，而对于「模块（内部）」的子项目则可以在应用项目中直接使用其源码（该特性是「模块」项目不具备的，应用项目对于「模块（内部）」子项目做了特殊处理），因此这类子项目不需要发布到外部。