npm - @modern-js/main-doc - Versions diffs - 2.22.1 → 2.23.0 - Mend

@modern-js/main-doc 2.22.1 → 2.23.0

Files changed (68) hide show

package/docs/en/guides/basic-features/html.mdx CHANGED Viewed

@@ -4,13 +4,13 @@ sidebar_position: 9
 ---
 # HTML Template
-Modern.js provides **JSX syntax** and **HTML(EJS) syntax** for customizing HTML template.
+Modern.js provides **JSX syntax** and **HTML(EJS) syntax** to customize the HTML template.
-## JSX syntax
+## JSX Syntax
-Modern.js convention, in the `src/`, or in the entry directory, you can create `Document.[jt]sx` and export a component by default. The rendering result of this component can be used as an HTML template for the entry.
+According to Modern.js conventions, you can create a `Document.[jt]sx` file under `src/` or the entry directory and default export a component". The rendering result of this component can be used as the HTML template of the entry.
-For example the following directory structure:
+For example, consider the following directory structure:
 ```bash
 .
@@ -24,44 +24,42 @@ For example the following directory structure:
     └── modern-app-env.d.ts
 ```
-`entry-a` will take precedence over the `Docoument.[jt]sx` file under the current entry. If the current entry does not have a `Document.[jt]sx` file, such as `entry-b`, it will look for the `Document.[jt]sx` file in the root directory.
+`entry-a` will use the `Docoument.[jt]sx` file under the current entry as the template. If there is no `Document.[jt]sx` file under the current entry, like `entry-b`, it will look for the `Document.[jt]sx` file under the root directory.
-If not, it will go to the the logic of traditional templates.
+If not found, default template will be used.
-### HTML Component
+### HTML Components
-Modern.js provides a list of components for rendering pages to help developers generate templates, which can be exported from `@modern-js/runtime/document`:
+Modern.js provides some components for rendering pages to help developers generate templates. These components can be used from `@modern-js/runtime/document`:
 ```tsx
 import { Html, Body, Root, Head, Scripts } from '@modern-js/runtime/document';
 ```
-These components are rendered:
+- `Html`: provide the ability of native HTML Element and and render necessary components that the developer did not add by default. `<Head>` and `<Body>` must exist, and other components can be assembled as needed.
-- `Html`: Provide the ability of native HTML Elements, and render necessary components that the developer did not add by default. `<Head>` and `<Body>` must exist, and other components can be assembled by selecting appropriate components on demand.
+- `Body`: provide the ability of native Body Element and needs to contain the `<Root>` component internally. It also supports other elements as child elements at the same time, such as adding footers.
-- `Body`: Provide the ability of native Body Element, which needs to contain the `<Root>` component internally, and also supports other elements as child elements at the same time, such as adding footers.
+- `Root`: the root node `<div id='root'></div>` to be rendered. The default id of the root node is `id = 'root'`. You can set `props.rootId` to change the id attribute. Child components can be added and will be rendered in the HTML template. After React rendering is complete, it will be overwritten and is generally used to implement global Loading.
-- `Root`: React root element `<div id='root'></div>`. the default element id is `id = 'root'`, can set `props.rootId` to change the id.Child components can be added, and will also be rendered into HTML templates, which will be overwritten when React rendering is complete, generally used to implement global Loading.
+- `Head`: provide the ability of native Head Element and automatically fills in `<meta>` and `<Scripts>` components.
-- `Head`: Provides native Head Element capabilities and automatically populates `<meta>`, as well as the `<Scripts>` component.
+- `Scripts`: provide the ability to adjust the position of script tags injected into the HTML during the build process. By default, it is placed in the `<Head>` component.
-- `Scripts`: The script content generated by the webpack, which can be used to adjust the position of the bundle result, is placed in the `<Head>` component by default.
+- `Comment`: retain user-written comments like `<!-- gateway -->` and outputs them to the rendered HTML.
-- `Comment`: Make the comment like `<!-- gateway -->`, could be stay to the html that final render.
+### Template Parameters
-### Template Params
+Because it is in JSX format, various variables can be used freely in the component to assign values to various custom components in `Document.[jt]sx`.
-Because it is in the form of JSX, in `Document.[jt]sx`, you can use various variables in the component to assign values to various custom components more freely.
+Modern.js also provides `DocumentContext` to provide some configuration and environment parameters for easy access. The main parameters are:
-At the same time, Modern.js provides `DocumentContext` to provide some configuration and environment parameters, The main parameters as follow:
+- `processEnv`: provides the `process.env` during the build.
+- `config`: the configuration of the Modern.js project. Currently, only the output configuration is exposed.
+- `entryName`: the current entry name.
+- `templateParams`: parameters of HTML template (compatible with traditional templates, so it's not recommended for use).
-- `processEnv`: Provide build-time env vars.
-- `config`: The configuration of the project, only `output` are exposed.
-- `entryName`: current entry name.
-- `templateParams`: HTML template params(in order to be compatible with traditional templates, it is not recommended to use).
-### Examples
+### Example
 ```tsx
 import React, { useContext } from 'react';
@@ -102,7 +100,7 @@ export default function Document(): React.ReactElement {
 }
 ```
-The above JSX component will generate the following HTML template:
+The above JSX components will generate the following HTML template:
 ```html
 <!DOCTYPE html>
@@ -149,22 +147,22 @@ The above JSX component will generate the following HTML template:
 ```
-## Html Synxtax
+## HTML Syntax
-Modern.js also supports HTML syntax. By default, an HTML template is built into the Modern.js application project to generate HTML code.
+Modern.js also supports HTML syntax. By default, Modern.js application projects will include a built-in HTML template for generating HTML code.
-Based on HTML syntax templates, Modern.js provides **Custom HTML Fragments** and **Fully Custom HTML Templates** two ways to customize templates.
+Based on the HTML syntax template, Modern.js provides two ways to customize the template: **custom HTML fragments** and **custom the whole HTML**.
 ### Custom HTML Fragments
-In the application root directory, create the `config/html/` directory, which supports the creation of four kinds of HTML fragments.
+Under the application root directory, create the `config/html/` directory, which supports the creation of four types of HTML fragments:
 - `top.html`
 - `head.html`
 - `body.html`
 - `bottom.html`
-**These fragments will be injected into the default HTML template.**
+**These fragments will be injected into the default HTML template according to their positions.**
 ```html
 <!DOCTYPE html>
@@ -189,44 +187,44 @@ In the application root directory, create the `config/html/` directory, which su
 </html>
 ```
-HTML Fragments support the use [Lodash template](https://lodash.com/docs/4.17.15#template).
+HTML fragments support the use of [Lodash template](https://lodash.com/docs/4.17.15#template).
-For example, insert a script in `body.html`:
+For example, to insert an external script in `body.html`:
 ```html title="config/html/body.html"
 <script src="//example.com/assets/a.js"></script>
 ```
 :::info
-The implementation of the custom HTML fragment is to merge the fragment with the built-in template of the frame. Since `<title>` already exists in the default template of the frame, the `<title>` in the custom HTML template cannot take effect. Please pass [html.title](/configure/app/html/title) to modify the page title.
+The implementation of custom HTML fragments is to merge the fragments with the built-in template. Since the `<title>` already exists in the default template, the title tag in the custom HTML template will not take effect. Please use [html.title](/configure/app/html/title) to modify the page title.
 :::
-### Fully Custom HTML Templates
+### Custom the entire HTML Template
-In some cases, HTML snippets do not meet the customization requirements, Modern.js provide a fully customized way.
+In some cases, HTML fragments may be is not better meet the customization requirements. Modern.js provides a fully customized way.
-:::caution
-It is not recommended to override the default HTML template directly, and some features may be lost. Even if it needs to be replaced, it is recommended to build on the built-in template and modify it as needed.
+:::caution Note
+It is generally not recommended to directly override the default HTML template, as some functional options may be lost. If it is truly necessary to customize the entire HTML template, it is recommended to modify based on the built-in template as needed.
 :::
-In the `config/html/` directory, create a index.html file that will override the default HTML template.
+Under the `config/html/` directory, create an `index.html` file that will replace the default HTML template.
 :::info
-The internal default HTML template can be viewed in `node_modules/.modern-js/${entryName}/index.html`.
+The default HTML template can be viewed in `node_modules/.modern-js/${entryName}/index.html`.
 :::
-### Template Params
+### Template Parameters
-The parameters used in the template can be defined by the [html.templateParameters](/configure/app/html/template-parameters).
+The parameters used in the template can be defined by the [html.templateParameters](/configure/app/html/template-parameters) configuration.
 ### Config By Entry
-The fragment in the `config/html/` directory are valid for all entries in the application. If you want to customize the HTML by entry, you can create a new directory named with the **entry name** in the `config/html/` directory, and then customize the HTML snippets in this directory.
+The HTML fragments in the `config/html/` directory take effect for all entries in the application. If you want to customize HTML fragments by entry, you can create a directory named after the **entry name** under the `config/html/` directory, and then customize the HTML fragments in this directory.
-For example, the following HTML fragment is only valid for `entry1`:
+For example, the following HTML fragments are only effective for the `entry1` entry:
 ```bash
 .

package/docs/en/guides/basic-features/mock.mdx CHANGED Viewed

@@ -4,11 +4,11 @@ sidebar_position: 6
 ---
 # Mock
-Modern.js provides the ability to quickly generate Mock data, allowing the front-end to develop independently without being blocked by the back-end interface.
+Modern.js allows you to easily generate mock data so that the front-end can develop independently without depending on the back-end API.
-## Mock File
+## Enabling Mock
-By convention, when there is `index.[jt]s` in the `config/mock/` directory, the Mock Data will be automatically enabled, as follows:
+By convention, when there is an `index.[jt]s` in the `config/mock/` directory, mock data will be automatically enabled:
 ```bash
 .
@@ -22,7 +22,7 @@ By convention, when there is `index.[jt]s` in the `config/mock/` directory, the
 ## Writing Mock Files
-the `config/mock/index.ts` file only needs to export an object containing all Mock APIs. The properties of the object are composed of the request configuration `method` and `url`, and the corresponding property values can be `Object`, `Array`, `Function`:
+The `config/mock/index.ts` file only needs to export an object containing all Mock APIs. The properties of the object are composed of the request configuration `method` and `url`, and the corresponding property values can be `Object`, `Array`, or `Function`:
 ```js
 export default {
@@ -40,11 +40,11 @@ export default {
 };
 ```
-when access `http://localhost:8080/api/getInfo`, the api will return json `{ "data": [1, 2, 3, 4] }`.
+When you access `http://localhost:8080/api/getInfo`, the API will return JSON `{ "data": [1, 2, 3, 4] }`.
 ## Return Random Data
-Libraries such as [Mock.js](https://github.com/nuysoft/Mock/wiki/Getting-Started) can be used in `config/mock/index.js` to generate random data, for example:
+Libraries such as [Mock.js](https://github.com/nuysoft/Mock/wiki/Getting-Started) can be used in `config/mock/index.js` to generate random data. For example:
 ```js
 const Mock = require('mockjs');
@@ -56,16 +56,16 @@ module.exports = {
 };
 ```
-:::info Other Mock Lib
+:::info Other Mock Libraries
 - [Chancejs](https://github.com/chancejs/chancejs)
 - [Mock](https://github.com/nuysoft/Mock/wiki/Getting-Started)
 :::
-## Delayed Return
+## Delayed Response
-- It can be achieved using the function of the browser "weak connection simulation".
+- You can do this by using the browser's "weak connection simulation" feature.
 - Delays can be set via `setTimeout`, for example:
 ```ts
@@ -92,7 +92,7 @@ export const config = {
 }
 ```
-Currently only the `enable` configuration is supported, through which developers can control whether to execute Mock.
+Currently only the `enable` configuration is supported, which allows developers to control whether to execute mock.
 :::note
 After modifying `config`, there is no need to restart the service, which will take effect immediately.

package/docs/en/guides/topic-detail/framework-plugin/implement.mdx CHANGED Viewed

@@ -1,10 +1,10 @@
 ---
-title: Write Plugins
+title: Develop Plugins
 sidebar_position: 3
 ---
-# How to Write Plugins
+# How to Develop Plugins
-The previous section introduced the Hook models used by Modern.js plugins, while this section describes how to write plugins.
+The previous section introduced the Hook models used by Modern.js plugins, while this section describes how to develop plugins.
 ## Implementing a Plugin
@@ -115,7 +115,7 @@ Please refer to [Extending Hooks](/guides/topic-detail/framework-plugin/extend)
 ### Plugin Configuration
-**It is recommended to write plugins in the form of functions**, so that plugins can receive configuration options through function parameters:
+**It is recommended to develop plugins in the form of functions**, so that plugins can receive configuration options through function parameters:
 ```ts
 import type { CliPlugin } from '@modern-js/core';

package/docs/en/guides/topic-detail/framework-plugin/introduction.mdx CHANGED Viewed

@@ -33,7 +33,7 @@ Among them, the CLI plugin is the main running flow control model in Modern.js,
 ## What Plugins Can Do
-All of Modern.js's features are implemented through this set of plugins, which means that all of Modern.js's capabilities are open to developers. Developers can write plugins to extend more functionality and adapt to complex scenarios, including but not limited to:
+All of Modern.js's features are implemented through this set of plugins, which means that all of Modern.js's capabilities are open to developers. Developers can develop plugins to extend more functionality and adapt to complex scenarios, including but not limited to:
 - Registering commands
 - Modifying Modern.js configuration and validation schema

package/docs/en/guides/troubleshooting/cli.mdx CHANGED Viewed

@@ -4,21 +4,21 @@ sidebar_position: 2
 # CLI FAQ
-### Can't pass command line arguments correctly when using pnpm?
+### Unable to pass command line arguments correctly when using pnpm?
-The pnpm v6 and pnpm v7 versions do not use the same posture when executing commands. The following should be noted:
+There are some differences between pnpm v6 and pnpm v7 in how they execute commands, and the following should be noted:
 pnpm v7:
-When using pnpm to invoke a command in `package.json`, if you need to pass arguments to pnpm, you need to put the arguments before the command.
+When using pnpm to call the commands in `package.json`, if you need to pass parameters to pnpm, you need to put the parameters before the command.
-For example, execute the prepare command with the pnpm '--filter' parameter:
+For example, using the pnpm `--filter` parameter to run the prepare command:
 ```bash
 pnpm run --filter "./packages/**" prepare
 ```
-If you need to pass parameters to a command, you need to put the parameters after the command.
+If you need to pass parameters to the command, you need to put the parameters after the command.
 For example, in the following `package.json` configuration:
@@ -30,7 +30,7 @@ For example, in the following `package.json` configuration:
 }
 ```
-The way to carry parameters when executing the command command is:
+The way to pass parameters when running the command is:
 ```bash
 pnpm run command --options
@@ -48,16 +48,16 @@ In the following `package.json` configuration:
 }
 ```
-If you need to execute `modern command --option`,
+If you need to run `modern command --option`:
-When using pnpm, you need to execute the `pnpm run command -- --option`.
+When using pnpm, you need to run `pnpm run command -- --option`.
-This is because pnpm does not handle command parameters the same as Yarn, but is similar to npm: when not adding a `--` character string, the parameters of pnpm are passed; when using a `--` character string, the parameters of the execution script are passed.
+This is because pnpm's handling of command parameters is different from that of Yarn, but similar to that of npm: when the `--` string is not added, the parameters passed are for pnpm; when the `--` string is used, the parameters passed are for running the script.
-In the above example the parameter `--option` is passed to `modern command`. If `pnpm run command --option` is executed, the parameter `--option` will be passed to pnpm.
+In the above example, the `--option` parameter is passed to `modern command`. If you run `pnpm run command --option`, the `--option` parameter will be passed to pnpm.
-Summary:
+In summary:
-**When using pnpm v7, if you pass arguments to pnpm, you need to put the arguments before the command**
+**When using pnpm v7, if passing parameters to pnpm, the parameters need to be placed before the command.**
-**When using pnpm v6, if the parameter passed to pnpm, you do not need to add `--`; if the parameter passed is for script use, you need to add `--` character string**.
+**When using pnpm v6, if the parameters are passed to pnpm, `--` is not required; if the parameters are passed to the script, the `--` string needs to be added.**

package/docs/en/guides/troubleshooting/dependencies.mdx CHANGED Viewed

@@ -6,15 +6,15 @@ sidebar_position: 1
 ### How to check the actual installed version of a dependency in the project?
-You can use the `ls` command that provided by the package manager to view the dependencies version.
+You can use the `ls` command provided by the package manager to view the version of the dependency in the project.
-The following are some basic examples, please refer to the documentation of each package manager for detailed usage.
+Here are some basic examples. For detailed usage, please refer to the documentation of each package manager.
 **npm / yarn**
-For projects using npm or yarn, the `npm ls` command can be used.
+For projects using npm or yarn, you can use the `npm ls` command.
-For example, execute `npm ls @modern-js/core`, you can see the following results:
+For example, running `npm ls @modern-js/core` will show the following result:
 ```
 project
@@ -24,9 +24,9 @@ project
 **pnpm**
-For projects using pnpm, you can use `pnpm ls` command.
+For projects using pnpm, you can use the `pnpm ls` command.
-For example, execute `pnpm ls @modern-js/core --depth Infinity`, you can see the following results:
+For example, running `pnpm ls @modern-js/core --depth Infinity` will show the following result:
 ```
 devDependencies:
@@ -36,9 +36,9 @@ devDependencies:
 ---
-### The engine "node" is incompatible when installing dependencies?
+### Getting "The engine "node" is incompatible" error during dependency installation?
-If the following error message appears when installing dependencies, it means that the version of Node.js used in the current environment is too low, and Node.js needs to be upgraded to a higher version.
+If you encounter the following error message during dependency installation, it means that the current environment is using a Node.js version that is too low, and you need to upgrade Node.js to a higher version.
 ```bash
 The engine "node" is incompatible with this module.
@@ -46,11 +46,11 @@ The engine "node" is incompatible with this module.
 Expected version ">=14.17.6". Got "12.20.1"
 ```
-When using Modern.js, it is recommended to use [Node.js 14.x](https://nodejs.org/download/release/latest-v14.x/) or [Node.js 16.x](https://nodejs.org/download/release/latest-v16.x/).
+When using Modern.js, it is recommended to use the latest version of [Node.js 14.x](https://nodejs.org/download/release/latest-v14.x/) or [Node.js 16.x](https://nodejs.org/download/release/latest-v16.x/).
-If the Node.js version in the current environment is lower than the required version, you can use [nvm](https://github.com/nvm-sh/nvm) or [fnm](https://github.com/Schniz /fnm) and other tools for version switching.
+If the Node.js version of the current environment is lower than the above requirement, you can use tools such as [nvm](https://github.com/nvm-sh/nvm) or [fnm](https://github.com/Schniz/fnm) to switch versions.
-Here's an example using nvm:
+Here is an example of using nvm:
 ```
 # Install Node.js v14
@@ -63,13 +63,13 @@ nvm use 14
 nvm default 14
 ```
-It is recommended to use [fnm](https://github.com/Schniz/fnm) in the local development environment. Its usage is similar to nvm, but it has better performance than nvm.
+For local development environments, it is recommended to use [fnm](https://github.com/Schniz/fnm), which has better performance than nvm and has similar usage.
 ---
-### ReactNode type error after upgrading dependencies?
+### Getting a ReactNode type error after upgrading dependencies?
-If the following types of errors are reported after upgrading the project's dependencies, it means that the wrong `@types/react` version is installed in the project.
+After upgrading the dependencies of the project, if the following type error occurs, it means that the wrong version of `@types/react` is installed in the project.
 ```bash
 The types returned by 'render()' are incompatible between these types.
@@ -77,9 +77,9 @@ Type 'React.ReactNode' is not assignable to type 'import("/node_modules/@types/r
 Type '{}' is not assignable to type 'ReactNode'.
 ```
-The reason for this problem is that the ReactNode type definitions in React 18 and React 16/17 are different. If there are multiple different `@types/react` versions in the project, there will be a ReactNode type conflict, resulting in the above error.
+The reason for this problem is that the ReactNode type definition in React 18 is different from that in React 16/17. If there are multiple different versions of `@types/react` in the project, a ReactNode type conflict will occur, resulting in the above error.
-The solution is to lock `@types/react` and `@types/react-dom` in the project to a unified version, such as `v17`.
+The solution is to lock the `@types/react` and `@types/react-dom` in the project to a unified version, such as `v17`.
 ```json
 {
@@ -88,23 +88,23 @@ The solution is to lock `@types/react` and `@types/react-dom` in the project to
 }
 ```
-For the method of locking the dependency version, please refer to [Lock nested dependency](/guides/get-started/upgrade.html#lock-nested-dependency).
+For methods of locking dependency versions, please refer to [Lock nested dependency](/guides/get-started/upgrade.html#lock-nested-dependency).
 ---
-### After pnpm install, there are some peer dependencies warnings in the console?
+### Getting peer dependencies warnings in the console after running `pnpm install`?
-The reason for this warning is that the version range of peer dependencies declared by some third-party npm packages does not match the version range installed in Modern.js.
+The reason for this warning is that the version range of peer dependencies declared by some third-party npm packages is inconsistent with the version range installed in Modern.js.
-In most cases, you can ignore the peer dependency warnings because it will not affect the use of Modern.js.
+In most cases, peer dependencies warnings will not affect the project operation and do not need to be processed separately. Please ignore the relevant warnings.
 ---
-### What is the minimum React version supported by the Modern.js framework?
+### What is the minimum supported version of React for the Modern.js framework?
-The recommended React version for **Modern.js framework is >= 18.0.0**, and different features have different React version requirements.
+**The recommended React version for the Modern.js framework is >= 18.0.0**, and different functions have different requirements for the React version.
-- If you are using React 17, some framework features, such as Steaming SSR, will not be available as they rely on new features provided by React 18.
-- If you're still using React 16, you won't be able to use Modern.js's runtime or server-side featurs. You can consider using Modern.js's build mode, that is, only use Modern.js as a builder. In this case, you can still use React 16.
+- If you are using React 17, some framework functions will not be available, such as Steaming SSR, because it relies on new features provided by React 18.
+- If you are still using React 16, you will not be able to use Modern.js's runtime or server-side capabilities. You can consider using the build mode of Modern.js, that is, only using Modern.js's build capabilities. In this case, React 16 can still be used.
-In a future major release of Modern.js, we will remove support for React 16 and React 17. Please upgrade to React 18+ as soon as possible.
+In future major versions of Modern.js, we will gradually remove support for React 16 and React 17. Therefore, please upgrade to React 18 or higher as soon as possible.

package/docs/en/tutorials/first-app/c03-css.mdx CHANGED Viewed

@@ -5,7 +5,7 @@ title: Add Style
 import { Tabs, Tab as TabItem } from "@theme";
-In the previous chapter, we learned how to use components from the three-way library.
+In the previous chapter, we learned how to use components from the third-party library.
 In this chapter, we will learn how to implement UI components.

package/docs/zh/apis/app/commands.mdx CHANGED Viewed

@@ -106,12 +106,13 @@ File sizes after production build:
 `modern new` 命令用于在已有项目中添加项目元素。
-比如添加应用入口、启用启用一些可选功能如 Tailwind CSS、微前端开发模式等。
+比如添加应用入口、启用一些可选功能如 Tailwind CSS、微前端开发模式等。
 ```bash
 Usage: modern new [options]
 Options:
+  --lang <lang>          设置 new 命令执行语言(zh 或者 en)
   -d, --debug            开启 Debug 模式，打印调试日志信息 (default: false)
   -c, --config <config>  生成器运行默认配置(JSON 字符串)
   --dist-tag <tag>       生成器使用特殊的 npm Tag 版本
@@ -162,7 +163,6 @@ Usage: modern serve [options]
 Options:
   -c --config <config>  指定配置文件路径，可以为相对路径或绝对路径
   -h, --help            显示命令帮助
-  --web-only            仅启动 Web 服务
   --api-only            仅启动 API 接口服务
 ```
@@ -180,7 +180,7 @@ export default defineConfig({
 在项目根目录下执行命令 `npx modern upgrade`，会默认将当前执行命令项目的 `package.json` 中的 Modern.js 相关依赖更新至最新版本。
-```
+```bash
 Usage: modern upgrade [options]
 Options:
@@ -194,7 +194,7 @@ Options:
 `modern inspect` 命令用于查看项目的 [Modern.js Builder 配置](https://modernjs.dev/builder/guide/basic/builder-config.html) 以及 webpack 配置。
-```
+```bash
 Usage: modern inspect [options]
 Options:

package/docs/zh/apis/app/runtime/testing/render.mdx CHANGED Viewed

@@ -41,7 +41,7 @@ function render(ui: React.ReactElement<any>, options: Options): RenderResult;
 - `options`：render 可选配置。
   - `container`：表示组件所要挂载到的 DOM 节点，默认是会创建一个 `div` 元素，并自动添加到 `document.body` 上。这个 `div` 元素就是组件要挂载的节点。默认值是 `document.body.append(document.createElement('div'))`。
   - `baseElement`：用于指定 `queries` 中使用到的 `basename`。如果指定了 `container`, 则默认值为 `container` 的值，否则就是 `document.body`。
-  - `hydrate`：如果设置为 `true`，则会使用 [ReactDOM.hydrate](https://reactjs.org/docs/react-dom.html#hydrate) 渲染组件。默认值为 `false`。
+  - `hydrate`：如果设置为 `true`，则会使用 [ReactDOM.hydrate](https://zh-hans.react.dev/reference/react-dom/hydrate) 渲染组件。默认值为 `false`。
   - `wrapper`：是一个 react 组件，可用于自定义渲染逻辑。
   - `queries`：自定义一些自己的 `queries`。

package/docs/zh/components/bff-proxy-path-rewrite.mdx ADDED Viewed

@@ -0,0 +1,16 @@
+这里还可以进行路径重写，如将发送到 `localhost:8080/api/topics` 的请求代理到 `https://cnodejs.org/api/v1/topics`。
+```ts title="modern.server-runtime.config.ts"
+import { defineConfig } from '@modern-js/app-tools/server';
+export default defineConfig({
+  bff: {
+    proxy: {
+      '/api': {
+        target: 'https://cnodejs.org',
+        pathRewrite: { '/api/topics': '/api/v1/topics' },
+        changeOrigin: true,
+      },
+    },
+  },
+});
+```

package/docs/zh/components/bff-proxy-principle.mdx ADDED Viewed

	@@ -0,0 +1 @@
1	+ BFF Proxy 使用了强大的 [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware)，如果需要更多高级的用法，可以查看它的[文档](https://github.com/chimurai/http-proxy-middleware#options)。

package/docs/zh/components/enable-bff-caution.mdx ADDED Viewed

@@ -0,0 +1,4 @@
+:::caution 注意
+请先在当前应用项目根目录使用【[new](/apis/app/commands#modern-new)】 启用 BFF 功能。
+:::

package/docs/zh/components/global-proxy-config.mdx CHANGED Viewed

@@ -1,14 +1,37 @@
 - **类型：** `string | Object`
 - **默认值：** `null`
-配置该选项后，开发环境时会启动全局代理，类似 [Fiddler](https://www.telerik.com/fiddler), [Charles](https://www.charlesproxy.com/) 等 web 代理调试工具，可以用来查看、修改 HTTP/HTTPS 请求、响应、也可以用作代理服务器。
+该选项用于在开发环境下启用基于 [whistle](https://wproxy.org/whistle/) 的全局代理，可以用来查看、修改 HTTP/HTTPS 请求、响应、也可以用作代理服务器。
-:::tip 提示
-使用该选项需要提前安装 `@modern-js/plugin-proxy`。
+### 注册插件
-:::
+使用该选项前，你需要提前安装和注册 `@modern-js/plugin-proxy` 插件：
+```bash
+# npm
+npm add @modern-js/plugin-proxy -D
+# yarn
+yarn add @modern-js/plugin-proxy -D
+# pnpm
+pnpm add @modern-js/plugin-proxy -D
+```
+安装完成后，在 `modern.config.ts` 文件中注册插件：
+```ts title="modern.config.ts"
+import appTools, { defineConfig } from '@modern-js/app-tools';
+import proxyPlugin from '@modern-js/plugin-proxy';
+export default defineConfig({
+  plugins: [appTools(), proxyPlugin()],
+});
+```
-值为 `Object` 时，对象的 `key` 对应匹配的 `pattern`，对象的 `value` 对应匹配的 `target`。
+### Object 类型
+`dev.proxy` 的值为 `Object` 时，对象的 `key` 对应匹配的 `pattern`，对象的 `value` 对应匹配的 `target`。
 例如：
@@ -24,7 +47,11 @@ export default defineConfig({
 });
 ```
-值为 `string` 时， 可以用来指定单独的代理文件，例如：
+请参考 [whistle - 匹配模式](https://wproxy.org/whistle/pattern.html) 来了解详细用法。
+### String 类型
+`dev.proxy` 的值为 `string` 时， 可以用来指定单独的代理文件，例如：
 ```ts title="modern.config.ts"
 export default defineConfig({
@@ -43,10 +70,7 @@ module.exports = {
 };
 ```
-:::info
-Modern.js 全局代理实现底层基于 [whistle](https://wproxy.org/whistle/), 更多匹配模式请参考: [匹配模式](https://wproxy.org/whistle/pattern.html)
-:::
+### 启动代理
 执行 `dev`, 提示如下时，即代理服务器启动成功：
@@ -64,7 +88,7 @@ Modern.js 全局代理实现底层基于 [whistle](https://wproxy.org/whistle/),
 ![proxy ui 界面](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/dev-proxy.png)
-:::caution 注意
+:::info
 https 代理自动安装证书需要获取 root 权限, 请根据提示输入密码即可。**密码仅在信任证书时使用，不会泄漏或者用于其他环节**。
 :::