@modern-js/main-doc 2.21.1 → 2.22.1

package/docs/zh/apis/app/hooks/src/index_.mdx

@@ -4,13 +4,13 @@ sidebar_position: 4
 ---
 # index.[tj]s
 
-应用项目入口标识。
+应用使用自定义 `bootstrap` 时的入口标识。
 
-通常情况下 [`src/App.[tj]sx, src/[entry]/App.[tj]sx`](/apis/app/hooks/src/app) 钩子文件已经能满足我们的需求，当我们需要在 `bootstrap` 之前添加自定义行为或者完全接管 webpack 打包入口时，可以在 `src` 或者入口目录下放置 `index.[tj]s`。 下面有分两种情况进行讨论:
+通常情况下 [`App.[tj]sx`](/apis/app/hooks/src/app) 钩子文件已经能满足我们的需求，当我们需要在 `bootstrap` 之前添加自定义行为或者完全接管 webpack 打包入口时，可以在 `src` 或者入口目录下放置 `index.[tj]s`。 下面有分两种情况进行讨论：
 
-1. 在 bootstrap 之前添加自定义行为：
+## 在 bootstrap 之前添加自定义行为
 
-只需要 `src/index.[tj]s` 默认导出函数:
+只需要 `src/index.[tj]s` 默认导出函数：
 
 ```js title=src/index.js
 import ReactDOM from 'react-dom/client';
@@ -22,9 +22,9 @@ export default (App: React.ComponentType) => {
 };
 ```
 
-2. 完全接管 webpack 入口:
+## 完全接管 webpack 入口
 
-当 `src/index.[tj]sx?` 下没有默认导出函数时，该文件即为真正的 webpack 打包入口文件, 可以直接像使用 create-react-app 等脚手架一样组织代码:
+当 `src/index.[tj]sx?` 下没有默认导出函数时，该文件即为真正的 webpack 打包入口文件, 可以直接像使用 create-react-app 等脚手架一样组织代码：
 
 ```js title=src/index.jsx
 import React from 'react';

package/docs/zh/apis/app/hooks/src/pages.mdx

@@ -4,9 +4,13 @@ sidebar_position: 3
 ---
 # pages/
 
-应用使用基于文件系统路由时的入口标识。
+应用使用 [`Pages` 入口](https://modernjs.dev/v1/docs/guides/usages/entries#pages-%E5%85%A5%E5%8F%A3)时的入口标识。
 
-当项目结构为 `Pages 入口` 类型时， 会分析 `src/pages` 目录下的文件得到客户端路由配置。
+:::info
+兼容 Modern.js 1.0 `Pages` 入口，推荐使用[约定式路由](guides/basic-features/routes.html#约定式路由)。
+:::
+
+当项目结构为 `Pages 入口`类型时， 会分析 `src/pages` 目录下的文件得到客户端路由配置。
 
 举例说明，例如以下目录结构：
 
@@ -20,7 +24,7 @@ sidebar_position: 3
         └── info.jsx
 ```
 
-对应生成的路由配置为:
+对应生成的路由配置为：
 
 ```bash
 [

package/docs/zh/apis/app/hooks/src/routes.mdx

@@ -4,13 +4,13 @@ sidebar_position: 2
 ---
 # routes/
 
-应用使用基于文件系统路由时的入口标识。
+应用使用[约定式路由](guides/basic-features/routes.html#约定式路由)时的入口标识。
 
-当项目结构为 `Routes 入口` 类型时， 会分析 `src/routes` 目录下的文件得到客户端路由配置。具体用法请查看[约定式路由](/guides/basic-features/routes)
+约定式路由以 `routes/` 为约定的入口， 会分析 `src/routes` 目录下的文件得到客户端路由配置。
 
 任何在 `src/routes` 下的 `layout.[tj]sx` 和 `page.[tj]sx` 都会作为应用的路由：
 
-```bash {3}
+```bash {3,4}
 .
 └── routes
     ├── layout.tsx
@@ -54,7 +54,7 @@ sidebar_position: 2
 
 在组件中，可以通过 [useParams](/apis/app/runtime/router/router#useparams) 获取对应命名的参数。
 
-在 loader 中，params 会作为 [loader](/guides/basic-features/data-fetch#loader-函数) 的入参，通过 `params` 的属性可以获取到对应的参数。
+在使用 [loader](/guides/basic-features/data-fetch#loader-函数) 函数获取数据时，`params` 会作为 `loader` 函数的入参，通过 `params` 的属性可以获取到对应的参数。
 
 ## 布局组件
 

package/docs/zh/apis/app/hooks/src/stories.mdx

@@ -8,7 +8,7 @@ sidebar_position: 7
 
 可以在项目源码目录 `src/` 下创建 `*.stories.[tj]sx` 格式的文件作为 Storybook 的调试文件。
 
-在项目下执行 dev story 命令，支持使用这些文件在 Storybook 中对相关内容进行调试。
+在项目下执行 `npm run dev story` 命令，支持使用这些文件在 Storybook 中对相关内容进行调试。
 
 :::info
 使用 Storybook 需要提前在项目下执行 new 命令启用「Visual Testing (Storybook)」模式。

package/docs/zh/apis/app/runtime/core/use-runtime-context.mdx

@@ -28,6 +28,7 @@ type RuntimeContext = {
     cookie: string;
   };
   store: ReduckStore;
+  router: RemixRouter;
 };
 
 function useRuntimeContext(): RuntimeContext;
@@ -41,7 +42,10 @@ function useRuntimeContext(): RuntimeContext;
   - `query`：请求的查询字符串对象。
   - `headers`：请求头信息。
   - `cookie`：请求的 cookie 信息。
-- `store`：在开启了 state 插件的时候，该值为 reduck 全局 `store`。
+- `store`：在开启了 state 插件的时候，该值为 Reduck 全局 `store`。
+- `router`：在开启 router 插件的时候存在。
+  - `location`：当前路由对应的位置信息。同 [`useLocation`](/apis/app/runtime/router/router.html#uselocation) 返回值。
+  - `navigate`：导航到给定路径。同 [`useNavigate`](/apis/app/runtime/router/router.html#usenavigate) 返回值。
 
 ## 示例
 

package/docs/zh/community/blog/v2-release-note.mdx

@@ -71,7 +71,7 @@ sidebar_position: 97
 
 <div style={{ textAlign: 'center', fontStyle: 'italic' }}>Rspack Logo</div>
 
-相较于 Webpack，Rspack 的构建性能有明显提升，除了 Rust 带来的语言优势，这也来自于它的并行架构和增量编译等特性。经过 benchmark 验证，**Rspack 可以给 Modern.js 项目带来 5 ～ 10 倍编译性能的提升。**
+相较于 webpack，Rspack 的构建性能有明显提升，除了 Rust 带来的语言优势，这也来自于它的并行架构和增量编译等特性。经过 benchmark 验证，**Rspack 可以给 Modern.js 项目带来 5 ～ 10 倍编译性能的提升。**
 
 ![](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/v2-release/rspack-benchmark.png)
 

package/docs/zh/community/contributing-guide.mdx

@@ -120,7 +120,7 @@ pnpm run prepare
 如果你需要清理项目中的所有 `node_modules/*`，执行 `reset` 命令：
 
 ```sh
-pnpm 运行重置
+pnpm run reset
 ```
 
 ---

package/docs/zh/components/init-app.mdx

@@ -1,9 +1,10 @@
-Modern.js 生成器会提供一个可交互的问答界面，根据结果初始化项目，按照默认的选择进行初始化：
+`@modern-js/create` 会提供一个可交互的问答界面，根据结果初始化项目，按照默认的选择进行初始化：
 
 ```bash
-? 请选择你想创建的工程类型：Web 应用
-? 请选择开发语言：TS
-? 请选择包管理工具：pnpm
+? 请选择你想创建的工程类型 Web 应用
+? 请选择开发语言 TS
+? 请选择包管理工具 pnpm
+? 请选择构建工具 webpack
 ```
 
 在生成项目后，Modern.js 会自动安装依赖、创建 git 仓库。
@@ -20,11 +21,6 @@ pnpm run lint         # 运行 ESLint 并自动修复问题
 pnpm run new          # 启用可选功能或创建项目要素
 ```
 
-:::note
-Modern.js 生成器除了在项目初始化时工作外，也能在后续研发中生成项目各种粒度的模块，并非一用即抛开。
-
-:::
-
 现在，项目结构如下：
 
 ```

package/docs/zh/components/language-config.mdx

@@ -0,0 +1,9 @@
+### language
+
+问题：请选择开发语言
+
+选项：
+
+- TS -- ts
+
+- ES6+ -- js

package/docs/zh/components/package-manager.mdx

@@ -0,0 +1,11 @@
+### packageManager
+
+问题：请选择包管理工具
+
+选项：
+
+- pnpm -- pnpm
+
+- Yarn -- yarn
+
+- npm -- npm

package/docs/zh/components/ua-polyfill.mdx

@@ -9,7 +9,7 @@ Modern.js 中还提供了基于浏览器 [UA](https://developer.mozilla.org/zh-C
 
 ```bash
 ? 请选择你想要的操作 启用可选功能
-? 启用可选功能 启用「基于 UA 的 Polyfill」功能
+? 请选择功能名称 启用「基于 UA 的 Polyfill」功能
 ```
 
 执行命令后，在 `modern.config.ts` 中注册 Polyfill 插件:

package/docs/zh/configure/app/output/css-modules.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: cssModules
+---
+
+# output.cssModules
+
+:::tip
+该配置由 Modern.js Builder 提供，更多信息可参考 [output.cssModules](https://modernjs.dev/builder/api/config-output.html#outputcssmodules)。
+:::
+
+import Main from '@modern-js/builder-doc/docs/zh/config/output/cssModules.md';
+
+<Main />

package/docs/zh/configure/app/source/design-system.mdx

@@ -13,7 +13,7 @@ sidebar_label: designSystem
 :::
 
 <details>
-  <summary>designSystem 配置详情</summary>
+  <summary>DesignSystem 配置详情</summary>
 
 ```js
 const designSystem = {
@@ -644,14 +644,13 @@ const designSystem = {
   },
 };
 ```
+</details>
 
 :::tip 提示
-更多关于：<a href="https://tailwindcss.com/docs/configuration#theme" target="_blank">TailwindCSS 配置</a>。
+更多关于 TailwindCSS 配置可查看[这里](https://tailwindcss.com/docs/configuration#theme)。
 
 :::
 
-</details>
-
 `designSystem` 用于定义项目的调色板、排版比例（Typographic Scales 或者 Type Scale）、字体列表、断点、边框圆角值等等。因为 Modern.js 借用了 Tailwind Theme 的设计方式，并且内部也集成了 Tailwind CSS，所以 `designSystem` 使用方式与 Tailwind CSS Theme 相同。
 
 ### 结构

package/docs/zh/configure/app/source/enable-async-entry.mdx

@@ -9,14 +9,11 @@ sidebar_label: enableAsyncEntry
 
 该选项用于 webpack 模块联邦（Module Federation）场景。
 
-开启此选项后，Modern.js 会通过 Dynamic Import 来包裹自动生成的入口文件（asynchronous boundary），使页面代码可以消费模块联邦生成的远程模块。
+开启此选项后，Modern.js 会通过 Dynamic Import 来包裹自动生成的入口文件（Asynchronous Boundaries），使页面代码可以消费模块联邦生成的远程模块。
 
 ## 背景知识
 
-如果不了解 webpack 模块联邦，请先阅读 Module Federation 官方文档：
-
-- [中文文档](https://webpack.docschina.org/concepts/module-federation/)
-- [英文文档](https://webpack.js.org/concepts/module-federation)
+如果不了解 webpack 模块联邦，请先阅读 [Module Federation 官方文档](https://webpack.docschina.org/concepts/module-federation/)。
 
 ## 示例
 

package/docs/zh/configure/app/source/entries.mdx

@@ -20,7 +20,7 @@ type Entries = Record<
 
 - **默认值：** 根据当前项目的目录结构计算出的入口对象。
 
-用于配置自定义的页面入口。
+用于配置自定义页面入口。
 
 :::tip 何时使用
 对于大部分场景，Modern.js 根据目录结构自动生成的入口已经可以满足需求，具体可参考[入口](/guides/concept/entries)。
@@ -156,7 +156,7 @@ export default defineConfig({
 
 例如以下目录结构:
 
-```
+```bash
 .
 ├── src
 │   ├── chat

package/docs/zh/configure/app/tools/swc.mdx

@@ -19,23 +19,9 @@ import SWC from '@modern-js/builder-doc/docs/zh/shared/swc.md';
 
 ## 安装
 
-首先，你需要执行 `pnpm run new` 启用 SWC 编译：
+import EnableSWC from '@modern-js/builder-doc/docs/zh/shared/enable-swc.md';
 
-```bash
-? 请选择你想要的操作：启用可选功能
-? 启用可选功能：启用「SWC 编译」
-```
-
-执行完成后，你只需在 `modern.config.ts` 文件中注册 SWC 插件，即可启用 SWC 编译和压缩能力。
-
-```ts title="modern.config.ts"
-import appTools, { defineConfig } from '@modern-js/app-tools';
-import swcPlugin from '@modern-js/plugin-swc';
-
-export default defineConfig({
-  plugins: [appTools(), swcPlugin()],
-});
-```
+<EnableSWC />
 
 ## 配置项
 

package/docs/zh/guides/advanced-features/rspack-start.mdx

@@ -31,14 +31,14 @@ import InitRspackApp from '@site-docs/components/init-rspack-app';
 
 :::
 
-## 从 webpack 迁移至 Rspack
+## 开启 Rspack 构建
 
 在一个已有的 Modern.js 项目中，你可以通过执行 `pnpm run new` 来启用 Rspack 构建：
 
 ```bash
 $ pnpm run new
-? 请选择你想要的操作：启用可选功能
-? 启用可选功能：启用「Rspack 构建」
+? 请选择你想要的操作 启用可选功能
+? 请选择功能名称 启用「Rspack 构建」
 ```
 
 执行以上命令后，在 `modern.config.ts` 中添加 Rspack 相关配置即可：
@@ -55,9 +55,9 @@ import appTools, { defineConfig } from '@modern-js/app-tools';
 });
 ```
 
-:::tip
-从 webpack 迁移至 Rspack 时，存在一些构建能力和配置上的差异，详情可参考：[配置差异](https://modernjs.dev/builder/guide/advanced/rspack-start.html#从-webpack-迁移到-rspack)
-:::
+## 配置迁移
+
+开启 Rspack 构建能力后，还需要参考 [配置差异](https://modernjs.dev/builder/guide/advanced/rspack-start.html#从-webpack-迁移到-rspack) 进行进一步的配置迁移。
 
 ## Rspack 和 Modern.js 的版本关系
 
@@ -82,8 +82,7 @@ import appTools, { defineConfig } from '@modern-js/app-tools';
       "@rspack/core": "nightly",
       "@rspack/dev-client": "nightly",
       "@rspack/dev-middleware": "nightly",
-      "@rspack/plugin-html": "nightly",
-      "@rspack/postcss-loader": "nightly"
+      "@rspack/plugin-html": "nightly"
     }
   }
 }

package/docs/zh/guides/advanced-features/ssg.mdx

@@ -10,7 +10,7 @@ SSG（Static Site Generation）是一种基于数据与模板，在构建时渲
 
 ```bash
 ? 请选择你想要的操作 启用可选功能
-? 启用可选功能 启用「SSG」功能
+? 请选择功能名称 启用「SSG」功能
 ```
 
 执行命令后，在 `modern.config.ts` 中注册 SSG 插件：

package/docs/zh/guides/advanced-features/testing.mdx

@@ -9,8 +9,8 @@ Modern.js 默认集成了 [Jest](https://jestjs.io/) 的测试能力。
 我们首先需要执行 `pnpm run new` 启用「单元测试 / 集成测试」功能：
 
 ```
-? 请选择你想要的操作： 启用可选功能
-? 启用可选功能： 启用「单元测试 / 集成测试」功能
+? 请选择你想要的操作 启用可选功能
+? 请选择功能名称 启用「单元测试 / 集成测试」功能
 ```
 
 执行上述命令后，`package.json` 中将会自动生成 `"test": "modern test"` 命令。

package/docs/zh/guides/advanced-features/web-server.mdx

@@ -26,7 +26,7 @@ Modern.js 作为以客户端为中心的开发框架，对服务端的定制能
 
 ```bash
 ? 请选择你想要的操作 创建工程元素
-? 创建工程元素 新建「自定义 Web Server」源码目录
+? 请选择创建元素类型 新建「自定义 Web Server」源码目录
 ```
 
 执行命令后，在 `modern.config.ts` 中注册 `@modern-js/plugin-server` 插件:

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

@@ -67,7 +67,7 @@ Modern.js 内部集成了 Babel 的 [babel-plugin-styled-components](https://git
 
 ```bash
 ? 请选择你想要的操作 启用可选功能
-? 启用可选功能 启用 Tailwind CSS 支持
+? 请选择功能名称 启用 「Tailwind CSS」 支持
 ```
 
 在 `modern.config.ts` 中注册 Tailwind 插件:

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

@@ -32,7 +32,7 @@ export default {
   /* method 默认为 GET */
   '/api/getExample': { id: 1 },
 
-  /* 可以使用自定义函数根据请求动态返回数据，返回值参考 express middleware */
+  /* 可以使用自定义函数根据请求动态返回数据, req & res 都是 Node.js HTTP 原生对象 */
   'POST /api/addInfo': (req, res, next) => {
     res.setHeader('Access-Control-Allow-Origin', '*');
     res.end('200');

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

@@ -449,7 +449,7 @@ export const init = (context: RuntimeContext) => {
 在约定式路由下， Modern.js 会根据路由，自动地对路由进行分片，当用户访问具体的路由时，会自动加载对应的分片，这样可以有效地减少首屏加载的时间。但这也带来了一个问题，当用户访问一个路由时，如果该路由对应的分片还未加载完成，就会出现白屏的情况。
 这种情况下你可以通过定义 `Loading` 组件，在静态资源加载完成前，展示一个自定义的 `Loading` 组件。
 
-为了进一步提升用户体验，减少 loading 的时间，Modern.js 支持在 Link 组件上定义 `prefetch` 属性，可以提前对静态资源和数据进行加载， `prefetch` 属性有三个可选值：
+为了进一步提升用户体验，减少 loading 的时间，Modern.js 支持在 Link 组件上定义 `prefetch` 属性，可以提前对静态资源和数据进行加载：
 
 ```tsx
 <Link prefetch="intent" to="page">
@@ -461,6 +461,8 @@ export const init = (context: RuntimeContext) => {
 
 :::
 
+`prefetch` 属性有三个可选值：
+
 - `none`， 默认值，不会做 prefetch，没有任何额外的行为。
 - `intent`，这是我们推荐大多数场景下使用的值，当你把鼠标放在 Link 上时，会自动开始加载对应的分片和 Data Loader 中定义的数据，当鼠标移开时，会自动取消加载。在我们的测试中，即使是快速点击，也能减少大约 200ms 的加载时间。
 - `render`，当 Link 组件渲染时，就会加载对应的分片和 Data Loader 中定义的数据。
@@ -505,8 +507,6 @@ export default () => {
 Modern.js 默认对约定式路由做了一系列资源加载及渲染上的优化，并且提供了开箱即用的 SSR 能力，而这些能力，在使用自控路由时，都需要开发者自行封装，推荐开发者使用约定式路由。
 :::
 
-使用自控式路由时，如果开发者关闭了 [`runtime.router`](/configure/app/runtime/router) 配置，并直接使用 `react-router-dom`，那还需要根据 React Router 文档自行包裹 `Provider`。
-
 ## 其他路由方案
 
 默认情况下，Modern.js 会开启内置的路由方案，即 React Router。
@@ -519,7 +519,9 @@ export default defineConfig({
 });
 ```
 
-Modern.js 从 `@modern-js/runtime/router` 命名空间暴露了 React Router 的 API 供开发者使用，保证开发者和 Modern.js 中使用同一份代码。另外，这种情况下，React Router 的代码会被打包到 JS 产物中。如果项目已经有自己的路由方案，或者不需要使用客户端路由，可以关闭这个功能。
+如上述配置，当开启 [`runtime.router`](/configure/app/runtime/router) 配置时，Modern.js 会从 `@modern-js/runtime/router` 命名空间导出 React Router 的 API 供开发者使用，保证开发者和 Modern.js 中使用同一份代码，并自动根据 router 配置包裹 `Provider` 组件。另外，这种情况下，React Router 的代码会被打包到 JS 产物中。
+
+如果项目已经有自己的路由方案，或者不需要使用客户端路由，可以关闭这个功能。
 
 ```js
 export default defineConfig({
@@ -529,5 +531,6 @@ export default defineConfig({
 });
 ```
 
+如上述配置， 如果关闭了 [`runtime.router`](/configure/app/runtime/router) 配置，并直接使用 `react-router-dom` 进行项目路由管理时，还需要根据 React Router 文档自行包裹 `Provider`。
 
 

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

@@ -14,7 +14,7 @@ Modern.js Builder 是 Modern.js 体系的核心组件之一，它是一个面向
 
 - 上层研发框架：Modern.js。
 - 通用构建引擎：Modern.js Builder。
-- 底层打包工具：webpack 和 rspack。
+- 底层打包工具：webpack 和 Rspack。
 
 <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/builder-layers-1117.png" style={{ width: '100%', maxWidth: '540px' }} />
 

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

@@ -30,12 +30,12 @@ Modern.js 初始化的项目是单入口的（SPA），项目结构如下：
 └── tsconfig.json
 ```
 
-在 Modern.js 项目中，你可以很方便的将单入口切换成多入口，直接在项目下执行 `pnpm run new`，通过生成器创建入口即可：
+在 Modern.js 项目中，你可以很方便的将单入口切换成多入口，直接在项目下执行 `pnpm run new`，根据提示创建入口即可：
 
 ```bash
-? 请选择你想要的操作：创建工程元素
-? 创建工程元素：新建「应用入口」
-? 请填写入口名称：new-entry
+? 请选择你想要的操作 创建工程元素
+? 请选择创建元素类型 新建「应用入口」
+? 请填写入口名称 new-entry
 ```
 
 执行后，Modern.js 会自动生成一个新的入口目录，此时可以看到 `src/` 目录变成如下结构：
@@ -54,34 +54,38 @@ Modern.js 初始化的项目是单入口的（SPA），项目结构如下：
         └── page.tsx
 ```
 
-原本的代码被移动到了和 `package.json` 中 `name` 同名的目录下，并创建了新的目录。
+原本的入口代码被移动到了和 `package.json` 中 `name` 同名的目录下，并创建了 `new-entry` 入口目录。
 
 执行 `pnpm run dev` 后，可以看到新增了一条名为 `/new-entry` 的路由，并且被迁移的代码路由并未发生变化。
 
 :::tip
-Modern.js 会将与 package.json 文件中 `name` 字段同名的入口作为主入口，主入口的路由为 `/`，其他入口的路由为 `/{entryName}`。
+Modern.js 会将与 `package.json` 文件中 `name` 字段同名的入口作为主入口，主入口的路由为 `/`，其他入口的路由为 `/{entryName}`。
 
-比如，package.json 中的 `name` 为 `myapp` 时，`src/myapp` 会作为项目的主入口。
+比如，`package.json` 中的 `name` 为 `myapp` 时，`src/myapp` 会作为项目的主入口。
 
 :::
 
 ## 入口类型
 
-不同的入口类型具有不同的编译和运行时行为。在 Modern.js 创建项目时，开发者可以手动选择创建**框架模式**或是**构建模式**的项目。完成创建后，可以看到不同模式的项目样板文件是不同的。
+不同的入口类型具有不同的编译和运行时行为。
+
+import EntryMode from '@site-docs/components/entry-mode.mdx';
+
+<EntryMode />
 
 默认情况下，Modern.js 启动项目前会对 `src/` 下的文件进行扫描，识别入口，并生成对应的服务端路由。
 
 :::tip
-可以通过 [source.entriesDir](/configure/app/source/entries-dir) 更改入口目录为其他目录。
+可以通过 [source.entriesDir](/configure/app/source/entries-dir) 修改页面的入口识别目录。
 
 :::
 
 并非 `src/` 下所有的一级目录都会成为项目入口, 入口所在目录必须满足以下四个条件之一：
 
-1. 具有 `routes/` 目录
-2. 具有 `App.[jt]sx?` 文件
-3. 具有 `index.[jt]sx?` 文件
-4. 具有 `pages/` 目录（兼容 Modern.js 1.0）
+1. 具有 `routes/` 目录。
+2. 具有 `App.[jt]sx?` 文件。
+3. 具有 `index.[jt]sx?` 文件。
+4. 具有 `pages/` 目录（兼容 Modern.js 1.0）。
 
 当 `src/` 目录满足入口特征时，Modern.js 会认为当前项目为单入口应用。
 
@@ -94,7 +98,7 @@ Modern.js 会将与 package.json 文件中 `name` 字段同名的入口作为主
 
 ### 框架模式入口
 
-框架模式指需要使用 Modern.js 框架能力，例如 Router、SSR、一体化调用等。这类入口约定下，开发者定义的入口并不是真正的 Webpack 编译入口。Modern.js 在启动时会生成一个封装过的入口，可以在 `node_modules/.modern/{entryName}/index.js` 找到真正的入口。
+框架模式指需要使用 Modern.js 框架能力，例如 Router、SSR、一体化调用等。这类入口约定下，开发者定义的入口并不是真正的 webpack 编译入口。Modern.js 在启动时会生成一个封装过的入口，可以在 `node_modules/.modern/{entryName}/index.js` 找到真正的入口。
 
 #### 约定式路由
 
@@ -135,7 +139,7 @@ export default () => {
 
 #### 自定义 Bootstrap
 
-如果入口中存在 `index.[jt]sx` 文件，并且当文件默认导出函数时，Modern.js 会将默认的 bootstrap 函数作为入参传入，并用导出的函数替代默认的 bootstrap，这样开发者可以自定义将组件挂载到 DOM 节点上，或在挂载前添加自定义行为。例如：
+如果入口中存在 `index.[jt]sx` 文件，并且当文件默认导出函数时，Modern.js 会将默认的 `bootstrap` 函数作为入参传入，并用导出的函数替代默认的 `bootstrap`，这样开发者可以自定义将组件挂载到 DOM 节点上，或在挂载前添加自定义行为。例如：
 
 ```tsx
 export default (App: React.ComponentType, bootstrap: () => void) => {
@@ -178,9 +182,9 @@ export default AppWrapper;
 
 ### 构建模式入口
 
-构建模式是指不使用任何 Modern.js 运行时的能力，完全由开发者自己定义项目 Webpack 的入口。
+构建模式是指不使用任何 Modern.js 运行时的能力，完全由开发者自己定义项目 webpack 的入口。
 
-如果入口中存在 `index.[jt]sx` ，并且没有默认导出函数时，这时候该文件就是真正的 Webpack 入口文件。这里和 [Create React App](https://github.com/facebook/create-react-app) 类似，需要自己将组件挂载到 DOM 节点、添加热更新代码等。例如:
+如果入口中存在 `index.[jt]sx` ，并且没有默认导出函数时，这时候该文件就是真正的 webpack 入口文件。这里和 [Create React App](https://github.com/facebook/create-react-app) 类似，需要自己将组件挂载到 DOM 节点、添加热更新代码等。例如:
 
 ```js title=src/index.jsx
 import React from 'react';

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

@@ -12,9 +12,9 @@ import Prerequisites from "@site-docs/components/prerequisites"
 
 ## 安装
 
-Modern.js 提供了 `@modern-js/create` 生成器来创建项目，不要全局安装，使用 `npx` 按需运行。
+Modern.js 提供了 `@modern-js/create` 工具来创建项目，不要全局安装，使用 `npx` 按需运行。
 
-可以使用已有的空目录来创建项目：
+可以在已有的空目录来创建项目：
 
 ```bash
 mkdir myapp && cd myapp
@@ -41,9 +41,9 @@ import DebugApp from "@site-docs/components/debug-app"
 
 ## 使用配置
 
-通过生成器创建的 Modern.js 项目中，存在 `modern.config.ts` 文件。
+通过 `@modern-js/create` 创建的 Modern.js 项目中，会默认生成 `modern.config.ts` 文件。
 
-可以通过配置文件来开启功能，或覆盖 Modern.js 的默认行为。例如添加如下配置，开启 SSR：
+可以通过该配置文件修改配置，覆盖 Modern.js 的默认行为。例如添加如下配置，开启 SSR：
 
 ```ts title="modern.config.ts"
 import appTools, { defineConfig } from '@modern-js/app-tools';
@@ -51,7 +51,6 @@ import appTools, { defineConfig } from '@modern-js/app-tools';
 export default defineConfig({
   runtime: {
     router: true,
-    state: true,
   },
   server: {
     ssr: true,
@@ -93,14 +92,12 @@ info    File sizes after production build:
 构建产物默认生成到 `dist/`，目录结构如下：
 
 ```
-.
-├── asset-manifest.json
+dist
 ├── html
-│   └── main
-├── loader-routes
-│   └── main
+│   └── main
 ├── modern.config.json
 ├── route.json
+├── routes-manifest.json
 └── static
     ├── css
     └── js

package/docs/zh/guides/get-started/upgrade.mdx

@@ -16,7 +16,7 @@ $ pnpm run upgrade
 
 > modern upgrade
 
-[INFO] [项目类型]: 应用
+[INFO] [项目类型]: Web 应用
 [INFO] [Modern.js 最新版本]: 2.0.0
 [INFO] 已更新 Modern.js 依赖至最新版本!
 ```