@modern-js/main-doc 2.22.1 → 2.23.1

package/docs/en/guides/basic-features/alias.mdx

@@ -4,7 +4,7 @@ sidebar_position: 8
 ---
 # Alias
 
-Modern.js allow aliases in JS and CSS, and the following aliases are built in:
+Modern.js allows you to use alias to import modules from custom directories in JS and CSS, and comes with the following built-in alias:
 
 ```js
 {
@@ -14,11 +14,11 @@ Modern.js allow aliases in JS and CSS, and the following aliases are built in:
 ```
 
 :::info
-When the optional features is enable, the generator will also add built-in aliases dynamically. For example, when BFF is enabled, the `@api` alias will be added by default.
+When enabling optional features, the `new` command will also dynamically add built-in alias specific to the features. For example, when enabling BFF, the `@api` alias is added by default.
 
 :::
 
-For example, import the modules from the `src/common/` directory in the `src/App.tsx` file:
+For example, importing modules from the `src/common` directory in the `src/App.tsx` file:
 
 ```bash
 .
@@ -27,17 +27,19 @@ For example, import the modules from the `src/common/` directory in the `src/App
 │   │   └── base.css
 │   └── utils
 │       └── index.ts
-├── App.tsx
+└── App.tsx
 ```
 
-the code in `src/App.tsx`:
+The code in `src/App.tsx` is as follows:
 
 ```ts
 import utils from '@/src/common/utils';
 import '@/src/common/styles/base.css';
 ```
 
-Modern.js also provides a way to config aliases. Adding the `@common` alias as an example. For TypeScript projects, you only need to configure `compilerOptions.paths` under the project root directory `tsconfig.json` as follows:
+Modern.js also provides a way to customize alias. For example, adding the `@common` alias is as follows:
+
+For TypeScript projects, just set `compilerOptions.paths` in the project's `tsconfig.json`:
 
 ```json
 {
@@ -50,9 +52,9 @@ Modern.js also provides a way to config aliases. Adding the `@common` alias as a
 }
 ```
 
-JavaScript project can config by [`source.alias`](/configure/app/source/alias) in `modern.config.js`:
+For JavaScript projects, set `source.alias` in `modern.config.js`:
 
-```ts title="modern.config.ts"
+```ts title="modern.config.js"
 export default defineConfig({
   source: {
     alias: {
@@ -62,4 +64,4 @@ export default defineConfig({
 });
 ```
 
-For detailed usage, please refer to [source.alias documentation](/configure/app/source/alias).
+For the specific usage of alias configuration, please refer to the [source.alias documentation](/configure/app/source/alias).

package/docs/en/guides/basic-features/env-vars.mdx

@@ -10,15 +10,15 @@ Modern.js provides support for environment variables, including built-in environ
 
 ### ASSET_PREFIX
 
-The  current path prefix of resource file, which is a **read-only** environment variable.
+The current path prefix of the resource file, which is a read-only environment variable.
 
 ### NODE_ENV
 
 The current execution environment and is a **read-only** environment variable whose have different values under different execution commands:
 
-- `production`: the default value when exec `modern build` or `modern serve`.
-- `test`: the default value when exec `modern test`.
-- `development`: the default value when exec `modern dev`, alse the default value of other case.
+- `production`: Default value when running `modern build` or `modern serve`.
+- `test`: Default value when running `modern test`.
+- `development`: Default value when running `modern dev`, also the default value in other cases.
 
 ### MODERN_ENV
 
@@ -33,7 +33,7 @@ MODERN_ENV priority is higher than NODE_ENV.
 
 When using `@modern-js/runtime`, Modern.js will automatically inject `MODERN_TARGET` to distinguish between SSR and CSR environments.
 
-You can use `process.env.MODERN_TARGET` to judge the environment and execute the appropriate code.
+You can use `process.env.MODERN_TARGET` to determine the environment and execute appropriate code.
 
 ```ts title="App.tsx"
 function App() {
@@ -65,7 +65,7 @@ function App() {
 This can provide different outputs for different environments to ensure that the bundle size is minimized. It can also be convenient to deal with some side effects for different environments.
 
 :::note Dead Code Elimination
-In the production environment, minimizers such as Terser and SWC will analyze the code and remove dead code to reduce the bundle size. This process is called "Dead Code Elimination" (DCE).
+In production environment, minimizers such as Terser and SWC will analyze the code and remove dead code to reduce the bundle size. This process is called "Dead Code Elimination" (DCE).
 
 For example, the code inside the `if (false)` statement will be removed, while the code inside the `if (true)` will be preserved.
 
@@ -75,9 +75,9 @@ If you do not use `process.env.MODERN_TARGET` as described above, the code minim
 
 ## Custom Environment Variables
 
-Custom environment variables can be specified in both `shell` and `.env` files.
+You can specify custom environment variables in both `shell` and `.env` files.
 
-### Specify via `shell`
+### Via `shell`
 
 Add custom environment variables before the command:
 
@@ -85,7 +85,7 @@ Add custom environment variables before the command:
 REACT_APP_FOO=123 BAR=456 pnpm run dev
 ```
 
-### Specify via `.env` file
+### Via `.env` file
 
 Create a `.env` file in the project root and add custom environment variables, which are added to the Node.js process by default, for example:
 
@@ -97,7 +97,7 @@ BAR=456
 The `.env` file follows the following loading rules:
 
 - `.env`: default.
-- `.env.{ MODERN_ENV | NODE_ENV }`: Setting environment variables for a specific environment overrides the same in `.env`.
+- `.env.{ MODERN_ENV | NODE_ENV }`: Overrides `.env` for a specific environment.
 
 When you need to use different config according to the environment, you can define environment variables in the `.env` file corresponding to the environment name, and manually set the execution environment when starting the project.
 
@@ -137,7 +137,7 @@ In custom HTML templates, you can also use such environment variables directly.
 
 ### Any Other Names
 
-If you need to use environment variables with any other names in your code, you can config [`source.globalVars`](/configure/app/source/global-vars), for example:
+If you need to use environment variables with any other names in your code, you can configure them in [`source.globalVars`](/configure/app/source/global-vars). For example:
 
 ```ts title="modern.config.ts"
 export default defineConfig({
@@ -149,7 +149,7 @@ export default defineConfig({
 });
 ```
 
-At this point, the `process.env.VERSION` in the code will be replaced with the value of `VERSION` in the environment variables.
+At this point, the `process.env.VERSION` in the code will be replaced by the value of `VERSION` in the environment variables.
 
 :::note
 `source.globalVars` also supports replacing other expressions or strings with specified values, not limited to environment variables.
@@ -158,7 +158,7 @@ At this point, the `process.env.VERSION` in the code will be replaced with the v
 
 ## Use Global Replacement
 
-In addition to environment variables, Modern.js also supports replacing variables in code with other values or expressions, which can be used like distinguish development environment and production environment in code.
+In addition to environment variables, Modern.js also supports replacing variables in code with other values or expressions, which can be used to distinguish between development environment and production environment in code.
 
 For example, converts the expression `TWO` to `1 + 1`:
 
@@ -179,4 +179,4 @@ const foo = TWO;
 const foo = 1 + 1;
 ```
 
-In most cases, `source.globalVars` is already sufficient to replace variables. But the values passed in by `source.globalVars` will be serialized by JSON by default. So it cannot be replaced like `1 + 1` in the example above, at this time, we need use [`source.define`](/configure/app/source/define).
+In most cases, `source.globalVars` is already sufficient to replace variables. But the values passed in by `source.globalVars` will be serialized by JSON by default. So it cannot be replaced like `1 + 1` in the example above, at this time, we need to use [`source.define`](/configure/app/source/define).

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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.