@modern-js/main-doc 0.0.0-next-1686625388611 → 0.0.0-next-1686651393235

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @modern-js/main-doc
 
-## 0.0.0-next-1686625388611
+## 0.0.0-next-1686651393235
 
 ### Patch Changes
 
@@ -24,6 +24,10 @@
 
   docs(main): 更新 HTML 模板文档
 
+- 5cba7c46b7: docs(main): update bff config doc
+
+  docs(main): 更新 BFF 配置文档
+
 - ef865f285b: docs(main): update config server doc
 
   docs(main): 更新 server 配置文档
@@ -31,7 +35,7 @@
 - 8bb0e146f2: chore: review code split docs
   chore: 审查代码分割文档
 - Updated dependencies [7e6fb5fc16]
-  - @modern-js/builder-doc@0.0.0-next-1686625388611
+  - @modern-js/builder-doc@0.0.0-next-1686651393235
 
 ## 2.22.1
 

package/docs/en/apis/app/commands.mdx

@@ -112,6 +112,7 @@ For example, add application entry, enable some optional features such as Tailwi
 Usage: modern new [options]
 
 Options:
+  --lang <lang>          set the language (zh or en) for the new command.
   -d, --debug            using debug mode to log something (default: false)
   -c, --config <config>  set default generator config(json string)
   --dist-tag <tag>       use specified tag version for its generator
@@ -136,7 +137,7 @@ In the project, execute the `new` command to enable features as follows:
 
 ```bash
 $ npx modern new
-? Please select the operation you want: Enable features
+? Please select the operation you want: Enable Features
 ? Please select the feature name: (Use arrow keys)
 ❯ Enable Tailwind CSS
   Enable BFF
@@ -162,11 +163,10 @@ Usage: modern serve [options]
 Options:
   -c --config <config>  configuration file path, which can be a relative path or an absolute path
   -h, --help            show command help
-  --web-only            only run web service
   --api-only            only run API service
 ```
 
-By default, the project will run in `localhost:8080`, you can modify the Server port number with `server.port`:
+By default, the project will run in `localhost:8080`, you can modify the server port number with `server.port`:
 
 ```js
 export default defineConfig({
@@ -180,7 +180,7 @@ export default defineConfig({
 
 Execute the command `npx modern upgrade` in the project, by default, dependencies in the `package.json` are updated to the latest version.
 
-```
+```bash
 Usage: modern upgrade [options]
 
 Options:
@@ -194,7 +194,7 @@ Options:
 
 The `modern inspect` command is used to view the [Modern.js Builder config](https://modernjs.dev/builder/en/guide/basic/builder-config.html) and webpack config of the project.
 
-```
+```bash
 Usage: modern inspect [options]
 
 Options:

package/docs/en/components/bff-proxy-path-rewrite.mdx

@@ -0,0 +1,16 @@
+Path rewriting can also be performed here, such as proxying the request sent to `localhost:8080/api/topics` to `https://cnodejs.org/api/v1/topics`.
+
+```js title="modern.server-runtime.config.js"
+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/en/components/bff-proxy-principle.mdx

@@ -0,0 +1 @@
+BFF Proxy uses the powerful [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware). For more advanced usage, please refer to its [documentation](https://github.com/chimurai/http-proxy-middleware#options).

package/docs/en/components/enable-bff-caution.mdx

@@ -0,0 +1,3 @@
+:::caution
+Please enable BFF functionality in the current application project root directory using [new](/apis/app/commands#modern-new) first.
+:::

package/docs/en/configure/app/bff/enable-handle-web.mdx

@@ -7,13 +7,13 @@ title: enableHandleWeb
 - **Type:** `boolean`
 - **Default:** `false`
 
-:::caution
-First you need to enable the "BFF" function using [new](/apis/app/commands#modern-new) command.
-:::
+import EnableBFFCaution from "@site-docs-en/components/enable-bff-caution";
 
-By default, the BFF service can only handle requests from the BFF API.
+<EnableBFFCaution />
 
-When this value is set to `true`, page request traffic also goes through the BFF, and the logic built into Modern.js for page rendering defaults to running as the last middleware for the BFF service.
+By default, the BFF service can only handle requests for BFF APIs.
+
+When this value is set to `true`, page request will also pass through BFF, and the default logic for page rendering built in Modern.js will run as the last middleware of the BFF service.
 
 ```ts title="modern.config.ts"
 export default defineConfig({

package/docs/en/configure/app/bff/prefix.mdx

@@ -7,18 +7,18 @@ sidebar_label: prefix
 - **Type:** `string`
 - **Default:** `/api`
 
-:::caution
-First you need to enable the "BFF" function using [new](/apis/app/commands#modern-new) command.
-:::
+import EnableBFFCaution from "@site-docs-en/components/enable-bff-caution";
 
-By default, the route access BFF prefix's directory is `/api`, with the following directory structure:
+<EnableBFFCaution />
+
+By default, the prefix for accessing routes in the BFF API directory is `/api`, as shown in the following directory structure:
 
 ```bash
 api
 └── hello.ts
 ```
 
-The corresponding route for `api/hello.ts` access is `localhost:8080/api/hello`.
+The route corresponding to `api/hello.ts` when accessed is `localhost:8080/api/hello`.
 
 This configuration option can modify the default route prefix:
 
@@ -30,4 +30,4 @@ export default defineConfig({
 });
 ```
 
-The corresponding `api/hello.ts` access route is `localhost:8080/api-demo/hello`.
+The corresponding route for `api/hello.ts` when accessed is `localhost:8080/api-demo/hello`.

package/docs/en/configure/app/bff/proxy.mdx

@@ -7,16 +7,13 @@ sidebar_label: proxy
 - **Type:** `Record<string, string>`
 - **Default:** `{}`
 
-:::caution Caution
-First you need to enable the "BFF" function using [new](/apis/app/commands#modern-new) command.
+import EnableBFFCaution from "@site-docs-en/components/enable-bff-caution";
 
-:::
-
-With simple configuration, no code is required, Modern.js automatically forwards requests. Requests sent to Modern.js BFF server are proxied to the specified service.
+<EnableBFFCaution />
 
-BFF Proxy uses the powerful [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware), and if you need more advanced usage, you can check its [documentation](https://github.com/chimurai/http-proxy-middleware#options).
+With simple configuration, Modern.js can automatically proxy requests sent to the BFF server to the specified service.
 
-Add the following configuration to `modern.server-runtime.config.ts`, you can turn on the proxy:
+Add the following configuration to `modern.server-runtime.config.js` to enable proxy:
 
 ```ts title="modern.server-runtime.config.ts"
 import { defineConfig } from '@modern-js/app-tools/server';
@@ -29,41 +26,31 @@ export default defineConfig({
 });
 ```
 
-Assuming that the starting Modern.js BFF server's service address is `localhost:8080`, all requests whose path starts with `api` will be intercepted, such as requests sent to `localhost:8080/api/v1/topics` will be proxied to `https://cnodejs.org/api/v1/topics`.
+Assuming the address of Modern.js BFF server is `localhost:8080`, all requests starting with `api` will be proxied to `https://cnodejs.org`, for example, the request to `localhost:8080/api/v1/topics` will be proxied to `https://cnodejs.org/api/v1/topics`.
 
-You can do path rewriting, such as proxying requests sent to `localhost:8080/api/topics` to `https://cnodejs.org/api/v1/topics`.
+import BFFProxyPathRewrite from "@site-docs/components/bff-proxy-path-rewrite";
 
-```js title="modern.server-runtime.config.js"
-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,
-      },
-    },
-  },
-});
-```
+<BFFProxyPathRewrite />
 
-Unlike [dev.proxy](/configure/app/dev/proxy), the proxy described in this section only works on requests entering the BFF/API service; at the same time, this configuration can be used not only in the development environment, but also in the production environment. The corresponding request will also be proxied in the production environment.
+Unlike [dev.proxy](/configure/app/dev/proxy), the proxy here only applies to requests entering the BFF/API service; at the same time, this configuration can not only be used in the development environment, but also proxies corresponding requests in the production environment.
 
-## Common usage
+import BFFProxyPrinciple from "@site-docs/components/bff-proxy-principle";
 
-### Solve interface cross-domain problems
+<BFFProxyPrinciple />
 
-In the process of project development, because web pages and interface services are not deployed under the same domain name, cross-domain problems are often encountered.
+## Common Usage
 
-There are many ways to solve cross-domain problems, and here we use `bff.proxy` to easily solve cross-domain problems.
+### Solving Cross-Domain Issues for APIs
+
+During project development, cross-domain issues are often encountered because web pages and API services are not deployed under the same domain name.
+There are many ways to solve cross-domain issues, and here we can easily solve them using `bff.proxy`.
 
 :::info
-In BFF proxy mode, if you do not need to write the BFF interface, the API directory can be deleted; at this time, BFF proxy will still be enabled.
+Under BFF proxy mode, if you don't need to write BFF code, the API directory can be deleted; BFF proxy will still be enabled.
 
 :::
 
-As shown below, in the `modern.server-runtime.config.js`, write the following configuration; we send all web pages to the same domain that request proxies starting with `/api` to another domain's service.
+As shown below, the following configuration in `modern.server-runtime.config.ts` will proxy all web page requests starting with `/api` to a service on another domain with the same domain.
 
 ```ts title="modern.server-runtime.config.ts"
 export default defineServerConfig({
@@ -74,3 +61,5 @@ export default defineServerConfig({
   },
 };
 ```
+
+

package/docs/en/configure/app/usage.mdx

@@ -12,7 +12,7 @@ The compile configuration can be configured in two places:
 - `package.json` file
 
 :::info
-Configurations in both package.json and modern.config.ts file are not supported for the same configuration. Configuration in modern.config.ts is recommended.
+Configurations in both `package.json` and `modern.config.ts` file are not supported for the same configuration. Configuration in `modern.config.ts` is recommended.
 :::
 
 Server runtime configuration can be configured in the `modern.server-runtime.config.(ts|js|mjs)` file in the root path.
@@ -54,7 +54,7 @@ When using Rspack as the bundler, due to some differences in configuration types
 
 ### modern.config.js
 
-If you are developing a non-TypeScript project, you can use the configuration file in .js format:
+If you are developing a non-TypeScript project, you can use the configuration file in `.js` format:
 
 ```js title="modern.config.js"
 export default {
@@ -66,7 +66,7 @@ export default {
 };
 ```
 
-You can also dynamically set it with `process.env.NODE _ENV`:
+You can also configure depending on your environment with `process.env.NODE_ENV`:
 
 ```js title="modern.config.js"
 export default {
@@ -122,7 +122,7 @@ export default defineConfig(async ({ env, command }) => {
 
 You can specify the name of the configuration file using the `--config` option.
 
-For example, if you need to use the `modern.prod.config.js` file when running build, you can add the following scripts to `package.json`:
+For example, if you need to use the `modern.prod.config.js` file when running `build`, you can add the following scripts to `package.json`:
 
 ```json title="package.json"
 {
@@ -155,7 +155,7 @@ In addition to configuration files, configuration options can also be set the `m
 }
 ```
 
-Due to the limitation of the JSON file format, only simple types such as numbers, strings, boolean values, arrays, etc. can be defined in `package.json`. When we need to set the value of the function type, it is recommended to set it in the Modern.js configuration file.
+Due to the limitation of the JSON file format, only simple types such as numbers, strings, boolean values, arrays, etc. can be defined in `package.json`. When we need to set the value of the function type, it is recommended to do so in the Modern.js configuration file.
 
 ### Note
 

package/docs/en/guides/advanced-features/code-split.mdx

@@ -4,7 +4,7 @@ sidebar_position: 6
 ---
 # Code Splitting
 
-Code splitting is a common method to optimize frontend resource loading. This article will introduce the three types of code splitting supported by Modern.js:
+Code splitting is a common way to optimize frontend resource loading. This article will introduce the three types of code splitting supported by Modern.js:
 
 :::info
 When using Modern.js [Conventional routing](/guides/basic-features/routes#conventional-routing). By default, code splitting is done according to the routing component, so you don't need to do it yourself.

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

@@ -6,16 +6,16 @@ title: Testing
 
 Modern.js integrates the testing capabilities of [Jest](https://jestjs.io/) by default.
 
-First need to execute `pnpm run new` enable [unit test/integration test] features:
+First need to execute `pnpm run new` to enable [unit test/integration test] features:
 
-```
+```bash
 ? Please select the operation you want: Enable features
 ? Please select the feature name: Enable Unit Test / Integration Test
 ```
 
-After executing the above command, the `"test": "modern test"` command will be automatically generated in package.json.
+After executing the above command, the `"test": "modern test"` command will be added in `package.json` automatically.
 
-register plugin in `modern.config.ts`:
+After registering the `@modern-js/plugin-testing` plugin in `modern.config.ts`, you can use the testing features:
 
 ```ts title="modern.config.ts"
 import testPlugin from '@modern-js/plugin-testing';
@@ -35,12 +35,13 @@ If you need to customize the test directory, you can configure it with [tools.je
 
 Modern.js test support [testing-library](https://testing-library.com/docs/). API can be imported from `@modern-js/runtime/testing`.
 
-```
+```ts
 import { render, screen } from '@modern-js/runtime/testing';
 ```
 
-Other Modern.js supported testing APIs can be found [here](/apis/app/runtime/testing/cleanup).
+Other testing APIs supported by Modern.js can be referred to [here](/apis/app/runtime/testing/cleanup).
 
 ## transform
 
-Modern.js tests use [babel-jest](https://www.npmjs.com/package/babel-jest) for source code compilation by default. If you need to use [ts-jest](https://github.com/kulshekhar/ts-jest), you can configure it through [testing.transform](/configure/app/testing/transformer).
+By default, Modern.js testing uses [babel-jest](https://www.npmjs.com/package/babel-jest) for source code compilation. If you need to use [ts-jest](https://github.com/kulshekhar/ts-jest), you can configure it through [testing.transform](/configure/app/testing/transformer).
+

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

@@ -4,15 +4,15 @@ sidebar_position: 3
 ---
 # Custom Web Server
 
-As a client side-centric development framework, Modern.js has weak customization capabilities on the server side. In some development scenarios, special server level logic needs to be customized, such as user authentication, request preprocessing, and adding page rendering skeletons.
+As a client-centric development framework, Modern.js has limited customization capabilities on the server side. However, in some development scenarios, special server-level logic needs to be customized, such as user authentication, request preprocessing, and adding page rendering skeletons.
 
-Some developers may be wondering, Modern.js already provides [BFF](/guides/advanced-features/bff/function.html), why do you need **Custom Web Server**.
+Some developers may be wondering, Modern.js already provides [BFF](/guides/advanced-features/bff/function.html), why you need **Custom Web Server**.
 
-Because by default, page routing does not go through BFF, it has no way to provide server-side custom logic for page access. The reason for this design is that we do not want the service that controls the page to be bound to the BFF service, so as to avoid the BFF framework restricting how the page is deployed.
+The reason is that by default, page routing does not go through BFF, it has no way to provide server-side custom logic for page access. The reason for this design is that we do not want the service that controls the page to be bound to the BFF service, this is to avoid the BFF framework restricting how the page is deployed.
 
-For example, hosting pages separately from BFF, deploying page services to non-Node environments, or customizing for deployment platforms, etc.
+For example, hosting pages separately from BFF, deploying page services to non-Node environments, customizing for deployment platforms, etc.
 
-For the above reasons, Modern.js provides three ways that projects can customize server level capabilities progressively according to their needs.
+For the above reasons, Modern.js provides three ways that projects can customize server-level capabilities progressively according to their needs.
 
 :::warning
 The three extension methods cannot work at the same time, and developers need to choose the appropriate method according to the scenario.
@@ -20,11 +20,11 @@ The three extension methods cannot work at the same time, and developers need to
 
 ## Extending Web Server with API
 
-The first way is to customize the server level at a specific life cycle through the server level runtime API provided by Modern.js. The purpose of providing this way is that in some cases, developers do not need to control the full Web Server, but only need to add server level logic.
+The first way is to customize the server-side at a specific lifecycle through the server-side runtime API provided by Modern.js. The purpose of providing this way is that in some cases, developers do not need to control the full Web Server, but only need to add server-level logic.
 
-Because the full web server cannot be controlled this way, and the extension logic **only takes effect when the page is requested**. Therefore, it is relatively simple to apply to server level logic, and you do not want to create additional BFFs or BFFs and pages without common server level logic scenarios.
+Because the full web server cannot be controlled this way, and the extension logic **only takes effect when the page is requested**. Therefore, it is relatively simple to apply server-level logic, and you do not want to create additional BFFs or BFFs and pages without common server-level logic scenarios.
 
-You can execute the'pnpm run new 'command in the project root directory to enable the "Custom Web Serve" function:
+You can run the'pnpm run new 'command in the project root directory to enable the "Custom Web Serve" function:
 
 ```bash
 ? Please select the operation you want: Create Element
@@ -47,7 +47,7 @@ After the function is turned on, the `server/index.ts` file will be automaticall
 
 The Hook provided by Modern.js is used to control the built-in logic in the Web Server, and all page requests go through the Hook.
 
-There are currently two Hooks provided, namely `AfterMatch` and `AfterRender`, which can be used to modify the rendering results. It can be written in `server/index.ts` like this:
+Currently, two Hooks are provided: `AfterMatch` and `AfterRender`, which can be used to modify the rendering results. It can be written in `server/index.ts` as follows:
 
 ```ts
 import type { AfterMatchHook, AfterRenderHook } from '@modern-js/runtime/server';
@@ -61,11 +61,11 @@ export const afterRender: AfterRenderHook = (ctx, next) => {
 }
 ```
 
-Projects should have the following best practices when using Hook:
+Projects should follow these best practices when using Hook:
 
-1. Permission verification in afterMatch.
+1. Authentication in afterMatch.
 2. Do Rewrite and Redirect in afterMatch.
-3. Do HTML content injection in afterRender.
+3. Inject HTML content in afterRender.
 
 :::note
 For more detail, see [Hook](/apis/app/runtime/web-server/hook).
@@ -91,10 +91,10 @@ export const middleware: Middlewre = (context, next) => {
 For more detail, see [Middleware] (/apis/app/runtime/web-server/middleware).
 :::
 
-Projects should have the following best practices when using Middleware:
+Projects should follow these best practices when using Middleware:
 
 1. In Middleware, you can directly operate origin request and response objects, do event tracking, and inject Node services (databases, Redis, etc.) that may be used for SSR rendering.
-2. Marking and crawler optimization can be done in Middleware.
+2. Operations such as marking and crawler optimization can be done in Middleware.
 3. In Middleware, you can ignore the default rendering and customize the rendering process.
 
 **In general, in CSR projects, using Hook can basically meet all the needs of simple scenarios. In SSR projects, Middleware can be used for more complex Node extensions.**
@@ -103,9 +103,9 @@ Projects should have the following best practices when using Middleware:
 
 The second way is to use BFF to Managed page rendering. In this way, all requests will first hit the BFF service.
 
-This method can uniformly control the server level logic of all requests through BFF. Therefore, it is suitable for scenarios where the server level logic is complex, and BFF and pages need common server level logic. But it still relies on the Web Server of Modern.js as a whole, and cannot run the logic on existing services.
+This method can uniformly control the server-level logic of all requests through BFF. Therefore, it is suitable for scenarios where the server-level logic is complex, and BFF and pages need common server-level logic. But it still relies on the Web Server of Modern.js as a whole, and cannot run the logic on existing services.
 
-To use this method, we need to first enable the "BFF" function through `pnpm new`. Then add [`bff.enableHandleWeb`](/configure/app/bff/enable-handle-web.html) configuration in the configuration file:
+To use this method, we first need to enable the "BFF" function through `pnpm new`. Then add [`bff.enableHandleWeb`](/configure/app/bff/enable-handle-web.html) configuration in the configuration file:
 
 ```ts
 export default defineConfig({

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/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/zh/apis/app/commands.mdx

@@ -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/components/bff-proxy-path-rewrite.mdx

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

@@ -0,0 +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

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

package/docs/zh/configure/app/bff/enable-handle-web.mdx

@@ -7,9 +7,9 @@ title: enableHandleWeb
 - **类型：** `boolean`
 - **默认值：** `false`
 
-:::caution 注意
-请先在当前应用项目根目录使用【[new](/apis/app/commands#modern-new)】 启用 BFF 功能。
-:::
+import EnableBFFCaution from "@site-docs/components/enable-bff-caution";
+
+<EnableBFFCaution />
 
 默认情况下，BFF 服务只能处理 BFF API 的请求。
 

package/docs/zh/configure/app/bff/prefix.mdx

@@ -7,10 +7,9 @@ sidebar_label: prefix
 - **类型：** `string`
 - **默认值：** `/api`
 
-:::caution 注意
-请先在当前应用项目根目录使用【[new](/apis/app/commands#modern-new)】 启用 BFF 功能。
+import EnableBFFCaution from "@site-docs/components/enable-bff-caution";
 
-:::
+<EnableBFFCaution />
 
 默认情况下，BFF API 目录下的路由访问前缀是 `/api`, 如下目录结构：
 

package/docs/zh/configure/app/bff/proxy.mdx

@@ -7,13 +7,11 @@ sidebar_label: proxy
 - **类型：** `Record<string, string>`
 - **默认值：** `{}`
 
-:::info 补充信息
-请先在当前应用项目根目录使用【[new](/apis/app/commands#modern-new)】 启用 BFF 功能。
+import EnableBFFCaution from "@site-docs/components/enable-bff-caution";
 
-:::
+<EnableBFFCaution />
 
-通过简单配置，无需编写代码，Modern.js 会自动转发请求。发送给 Modern.js BFF server 的请求，会代理到指定的服务上。
-BFF Proxy 使用了强大的 [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware)，如果需要更多高级的用法， 可以查看它的[文档](https://github.com/chimurai/http-proxy-middleware#options)。
+通过简单配置，Modern.js 可以将发送给 BFF server 的请求，自动代理到指定的服务上。
 
 在 `modern.server-runtime.config.js` 中加入以下配置；即可开启代理：
 
@@ -28,27 +26,18 @@ export default defineConfig({
 });
 ```
 
-假设启动的 Modern.js BFF server 的服务地址是 `localhost:8080`，所有 path 以 `api` 开头的请求都会被拦截，如发送到 `localhost:8080/api/v1/topics` 的请求会被代理到 `https://cnodejs.org/api/v1/topics`。
+假设 Modern.js BFF server 的地址是 `localhost:8080`，所有以 `api` 开头的请求都会被代理到 `https://cnodejs.org`，如 `localhost:8080/api/v1/topics` 的请求会被代理到 `https://cnodejs.org/api/v1/topics`。
 
-你可以做路径的重写，如将发送到 `localhost:8080/api/topics` 的请求代理到 `https://cnodejs.org/api/v1/topics`。
+import BFFProxyPathRewrite from "@site-docs/components/bff-proxy-path-rewrite";
 
-```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,
-      },
-    },
-  },
-});
-```
+<BFFProxyPathRewrite />
 
 与 [dev.proxy](/configure/app/dev/proxy) 不同，本节所介绍的代理只作用于进入 BFF/API 服务的请求；同时，这一配置不但可以在开发环境中使用，在生产环境中也会代理相应的请求。
 
+import BFFProxyPrinciple from "@site-docs/components/bff-proxy-principle";
+
+<BFFProxyPrinciple />
+
 ## 常见用法
 
 ### 解决接口跨域问题
@@ -72,3 +61,4 @@ export default defineServerConfig({
   },
 };
 ```
+

package/docs/zh/configure/app/usage.mdx

@@ -4,7 +4,7 @@ sidebar_position: 0
 
 # 配置使用
 
-Modern.js 中有两种配置，一个是编译时配置，一个是服务端运行时配置。
+Modern.js 中有两种配置，分别是编译时配置和服务端运行时配置。
 
 编译时配置可以在两个位置进行配置：
 
@@ -12,10 +12,10 @@ Modern.js 中有两种配置，一个是编译时配置，一个是服务端运
 - `package.json` 文件
 
 :::info
-Modern.js 不支持同时在 package.json 中和 modern.config.ts 中配置同一个配置项，推荐优先在 modern.config.ts 中进行配置。如果 Modern.js 检测到重复配置导致的冲突，将会抛出警告。
+Modern.js 不支持同时在 `package.json` 中和 `modern.config.ts` 中配置同一个配置项，推荐在 `modern.config.ts` 中进行配置。如果 Modern.js 检测到重复配置导致的冲突，将会抛出警告。
 :::
 
-服务端运行时配置可以在根路径下的 `modern.server-runtime.config.(ts|js|mjs)` 中自定义配置选项。
+服务端运行时配置可以在根路径下的 `modern.server-runtime.config.(ts|js|mjs)` 中进行配置。
 
 ## 在配置文件中配置
 
@@ -27,7 +27,7 @@ Modern.js 的配置文件定义在项目的根目录下，支持 `.ts`, `.js`
 
 ### modern.config.ts（推荐）
 
-我们推荐使用 .ts 格式的配置文件，它提供了友好的 TypeScript 类型提示，从而帮助你避免配置中的错误。
+我们推荐使用 `.ts` 格式的配置文件，它提供了友好的 TypeScript 类型提示，从而帮助你避免配置中的错误。
 
 从 `@modern-js/app-tools` 中导入 `defineConfig` 工具函数, 它会帮助你进行配置的类型推导和类型补全：
 
@@ -54,7 +54,7 @@ export default defineConfig({
 
 ### modern.config.js
 
-如果你在开发一个非 TypeScript 项目，可以使用 .js 格式的配置文件：
+如果你在开发一个非 TypeScript 项目，可以使用 `.js` 格式的配置文件：
 
 ```js title="modern.config.js"
 export default {
@@ -66,7 +66,7 @@ export default {
 };
 ```
 
-你也可以通过 `process.env.NODE_ENV` 进行动态设置：
+你也可以通过 `process.env.NODE_ENV`，根据环境做不同配置：
 
 ```js title="modern.config.js"
 export default {
@@ -98,7 +98,7 @@ export default defineConfig(({ env, command }) => ({
   - 当运行 `modern dev` 或 `modern start` 时，`env` 的值为 `development`。
   - 当运行 `modern build` 或 `modern serve` 时，`env` 的值为 `production`。
   - 当运行 `modern test` 时，`env` 的值为 `test`。
-- `command`: 对应当前运行的命令，如 `dev`、`start`、`build`、`serve`。
+- `command`：对应当前运行的命令，如 `dev`、`start`、`build`、`serve`。
 
 ### 导出异步函数
 
@@ -122,7 +122,7 @@ export default defineConfig(async ({ env, command }) => {
 
 Modern.js 命令行支持通过 `--config` 选项来指定配置文件的名称。
 
-例如，你需要在执行 build 命令时使用 `modern.prod.config.ts` 文件，可以在 `package.json` 中添加如下配置：
+例如，你需要在执行 `build` 命令时使用 `modern.prod.config.ts` 文件，可以在 `package.json` 中添加如下配置：
 
 ```json title="package.json"
 {
@@ -159,7 +159,7 @@ $ modern build -c modern.prod.config.js
 
 ### 注意事项
 
-- 不建议同时使用 `package.json` 和 `modern.config.js` 进行配置。如果同时使用了两者并出现配置冲突，Modern.js 会在命令行进行提示。
+- 不建议同时使用 `package.json` 和 `modern.config.js` 进行配置。如果同时使用了两者并出现配置冲突，Modern.js 会在命令行进行提示错误。
 - `@modern-js/runtime` 导出了同名的 [defineConfig](/apis/app/runtime/app/define-config) API，请注意区分。
 
 ## 本地调试配置

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

@@ -8,14 +8,14 @@ Modern.js 默认集成了 [Jest](https://jestjs.io/) 的测试能力。
 
 我们首先需要执行 `pnpm run new` 启用「单元测试 / 集成测试」功能：
 
-```
+```bash
 ? 请选择你想要的操作 启用可选功能
 ? 请选择功能名称 启用「单元测试 / 集成测试」功能
 ```
 
-执行上述命令后，`package.json` 中将会自动生成 `"test": "modern test"` 命令。
+执行上述命令后，`package.json` 中将会自动添加 `"test": "modern test"` 命令。
 
-在 `modern.config.ts` 中注册 Test 插件：
+在 `modern.config.ts` 中注册 `@modern-js/plugin-testing` 插件后即可使用测试功能：
 
 ```ts title="modern.config.ts"
 import testPlugin from '@modern-js/plugin-testing';
@@ -36,7 +36,7 @@ Modern.js 默认识别的测试文件路径为：`<rootDir>/src/**/*.test.[jt]s?
 
 Modern.js test 支持使用 [testing-library](https://testing-library.com/docs/) 相关包 API，可直接通过 `@modern-js/runtime/testing` 进行导入:
 
-```
+```ts
 import { render, screen } from '@modern-js/runtime/testing';
 ```
 

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

@@ -6,7 +6,7 @@ sidebar_position: 6
 
 Modern.js 提供了快速生成 Mock 数据的功能，能够让前端独立自主开发，不被后端接口阻塞。
 
-## Mock 文件
+## 启用 Mock
 
 约定当 `config/mock` 目录下存在 `index.[jt]s` 时，会自动开启 Mock 功能，如下：
 
@@ -63,7 +63,7 @@ module.exports = {
 
 :::
 
-## 延迟返回
+## 延迟响应
 
 - 可以使用浏览器「 弱网模拟 」的功能实现。
 - 可以通过 `setTimeout` 为单个接口设置延迟，例如：

package/package.json

@@ -15,14 +15,14 @@
     "modern",
     "modern.js"
   ],
-  "version": "0.0.0-next-1686625388611",
+  "version": "0.0.0-next-1686651393235",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public",
     "provenance": true
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "0.0.0-next-1686625388611"
+    "@modern-js/builder-doc": "0.0.0-next-1686651393235"
   },
   "devDependencies": {
     "classnames": "^2",
@@ -34,9 +34,9 @@
     "fs-extra": "^10",
     "@types/node": "^16",
     "@types/fs-extra": "^9",
-    "@modern-js/builder-doc": "0.0.0-next-1686625388611",
-    "@modern-js/doc-plugin-auto-sidebar": "0.0.0-next-1686625388611",
-    "@modern-js/doc-tools": "0.0.0-next-1686625388611"
+    "@modern-js/builder-doc": "0.0.0-next-1686651393235",
+    "@modern-js/doc-tools": "0.0.0-next-1686651393235",
+    "@modern-js/doc-plugin-auto-sidebar": "0.0.0-next-1686651393235"
   },
   "scripts": {
     "dev": "modern dev",