@modern-js/main-doc 2.22.1 → 2.23.0

package/docs/en/configure/app/server/port.mdx

@@ -7,7 +7,7 @@ sidebar_label: port
 - **Type:** `number`
 - **Default:** `8080`
 
-When Modern.js executes `dev`, `start` and `serve` commands, it will start with `8080` as the default port, and will automatically increment the port number when the port is occupied. You can change the port number of Server through this config:
+When running the `dev`, `start`, and `serve` commands, Modern.js will start with `8080` as the default port and automatically increase the port number when the port is occupied. You can use this configuration to modify the port number that the Server starts with:
 
 ```js title="modern.config.ts"
 export default defineConfig({
@@ -17,14 +17,14 @@ export default defineConfig({
 });
 ```
 
-### Difference with dev.port
+### Difference between `server.port` and `dev.port`
 
-In most cases, we recommend using `server.port` instead of `dev.port` to set the port number, the differences between them are as follows:
+In most cases, we recommend using `server.port` instead of `dev.port` to set the port number, and the differences between them are as follows:
 
-- `dev.port` only takes effect in the development, and `server.port` takes effect in both development and production.
-- In the development, `dev.port` takes precedence over `server.port`.
+- `dev.port` only works in the development environment, while `server.port` works in both the development and production environments.
+- In the development environment, `dev.port` has a higher priority than `server.port`.
 
-When you set `dev.port` and `server.port` at the same time, `dev.port` will take effect in the development, and `server.port` will take effect in the production. For example, in the following example, the port in the development is `3001`, and the port in the production is `3002`.
+When you set both `dev.port` and `server.port`, `dev.port` will take effect in the development environment, and `server.port` will take effect in the production environment. For example, in the following example, the port number listened to in the development environment is `3001`, and the port number listened to in the production environment is `3002`.
 
 ```ts title="modern.config.ts"
 export default defineConfig({

package/docs/en/configure/app/server/public-routes.mdx

@@ -5,20 +5,20 @@ sidebar_label: publicRoutes
 # server.publicRoutes
 
 - **Type:** `Object`
-- **Default:** Automatic generation of server-level routing rules based on file conventions: One routing rule is generated per file of the application.
+- **Default:** Server-side routing rules generated based on file conventions, with one route rule generated for each file.
 
-This configuration option only applies to server-level routing, and you can customize the access route of resources in `config/public/`.
+This configuration option only applies to server-side routing and can customize the access route of resources under `config/public/`.
 
-The `key` of the object is the relative file path of the current application (not used `./`), value can be `string`.
+The `key` of the object is the relative file path of the `config/public/` (without using `./`), and the value can be a `string`.
 
 ```ts title="modern.config.ts"
 export default defineConfig({
   server: {
     publicRoutes: {
-      // Set up a long route
+      // Set a long route
       'index.json': '/user-config/card-info/extra/help.json',
 
-      // Set up a route without a suffix
+      // Set a route without a suffix
       'robot.txt': '/app/authentication',
     },
   },

package/docs/en/configure/app/server/routes.mdx

@@ -5,30 +5,30 @@ sidebar_label: routes
 # server.routes
 
 - **Type:** `Object`
-- **Default:** Automatic generation of server-level routing rules based on file conventions: One routing rule is generated per file of the application,and the default route is the same as the entry name.
+- **Default:** Server-side routing rules generated based on file conventions, with one route rule generated for each entry, and the entry name is equal to the route path.
 
-This configuration option only applies to server-level routing, and can customize the service access configuration of the application entry.
+This configuration option only applies to server-side routing and can customize the access route of application entries.
 
-## Custom access routing
+## Custom access routes
 
-The `key` of the object is the entry name of the current application, and the value can be `string | Array<string>`.
+The `key` of the object is the name of the current application entry, and the value can be a `string | Array<string>`.
 
-When the value type is `string`, the current value represents the name of the route to access the entry.
+When the value type is `string`, the current value represents the route path for accessing the entry.
 
 ```ts title="modern.config.ts"
 export default defineConfig({
   server: {
     routes: {
-      // The default route is /entryName1, /p/test1 after customization
+      // Default route is /entryName1, customized to /p/test1
       entryName1: '/p/test1'
-      // Support dynamic server-level routing configuration
+      // Supports dynamic server-side routing configuration
       entryName2: '/detail/:id'
     }
   }
 });
 ```
 
-Multiple access routes can also be set for entries using the `Array<string>`:
+Multiple access routes can also be set for the entry through `Array<string>`:
 
 ```ts title="modern.config.ts"
 export default defineConfig({
@@ -40,9 +40,9 @@ export default defineConfig({
 });
 ```
 
-At this point, the '`page-a` entry can be accessed through both `/a` and `/b` routes.
+At this time, the `page-a` entry can be accessed through both the `/a` and `/b` routes.
 
-After executing the `dev` command, you can see in `dist/route.json` that there are two routing records in the entry `page-a`:
+After executing the `dev` command, you can view two route records for the `page-a` entry in `dist/route.json`:
 
 ```json
 {
@@ -65,9 +65,9 @@ After executing the `dev` command, you can see in `dist/route.json` that there a
 }
 ```
 
-## Custom response header
+## Custom response headers
 
-The response header can be set by configuring the resHeaders of the entry:
+Response headers can be set by configuring the `resHeaders` of the entry:
 
 ```ts title="modern.config.ts"
 export default defineConfig({
@@ -85,6 +85,6 @@ export default defineConfig({
 ```
 
 :::note
-This configuration takes effect in both the production environment and the development environment, and can set different response headers according to the NODE_ENV. But if you only need to set response headers in the development environment, `tools.devServer.headers` is recommended.
+This configuration takes effect in both the production and development environments, and different response headers can be set according to the NODE_ENV to distinguish between environments. However, if you only need to set response headers in the development environment, it is recommended to use `tools.devServer.headers`.
 
 :::

package/docs/en/configure/app/server/ssr-by-entries.mdx

@@ -7,10 +7,10 @@ sidebar_label: ssrByEntries
 - **Type:** `Object`
 - **Default:** `undefined`
 
-Set the ssr option according to the entry. The attributes in the option are the same as [ssr](./ssr.mdx). The specified value will be replaced and merged with the content of the ssr attribute. For example:
+Set SSR options by entry, and the properties inside the option are the same as [ssr](./ssr.mdx). The specified value will be replaced and merged with the content of the SSR attribute, for example:
 
 :::info
-The "entry name" defaults to the directory name. In a few cases, when the entry is customized by `source.entries`, the entry name `source.entries` the `key` of the object.
+The "entry name" defaults to the directory name. In a few cases, when defining an entry through `source.entries`, the entry name is the `key` of the `source.entries` object.
 
 :::
 
@@ -19,11 +19,11 @@ export default defineConfig({
   server: {
     ssr: true,
     ssrByEntries: {
-      // page-a does not enable ssr
+      // page-a does not enable SSR
       'page-a': false,
     },
   },
 });
 ```
 
-As configured above, the project has ssr enabled as a whole, but the ssr rendering capability is turned off for the entry `page-a`.
+In the above configuration, the project enables SSR as a whole, but the SSR rendering ability is disabled for the `page-a` entry.

package/docs/en/configure/app/server/ssr.mdx

@@ -11,7 +11,7 @@ Enalbe SSR configuration.
 
 ### Boolean Type
 
-When the value type is `boolean`, it indicates whether to enable SSR deployment mode, and `false` is not enabled by default.
+When the value type is `boolean`, it indicates whether to enable SSR deployment mode. The default is `false` to disable it.
 
 ```ts title="modern.config.ts"
 export default defineConfig({
@@ -23,11 +23,11 @@ export default defineConfig({
 
 ### Object Type
 
-When the value type is `Object`, The following properties can be configured:
+When the value type is `Object`, the following properties can be configured:
 
-- `mode`: `string = 'string'`, use `renderToString` rendering default. onfigure 'stream' to enable streaming rendering.
-- `forceCSR`: `boolean = false`, forced CSR rendering is disable by default. When configured as `true`, add `?csr=true` in URL to force CSR.
-- `inlineScript`：`boolean = true`, by default SSR data will be injected into HTML as inline scripts and directly assigned to global variables. Configure as `false` to inject JSON instead of directly assigning.
+- `mode`: `string = 'string'`, which defaults to using `renderToString` for rendering. Configure `stream` to enable streaming rendering.
+- `forceCSR`: `boolean = false`, which is off by default for forcing CSR rendering. Configure `true` to force CSR by adding `?csr=true` when accessing the page.
+- `inlineScript`: `boolean = true`, by default, SSR data is injected into HTML as inline scripts and assigned directly to global variables. Configure `false` to distribute JSON instead of assigning to global variables.
 
 ```ts title="modern.config.ts"
 export default defineConfig({

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

@@ -2,13 +2,12 @@
 title: Code Split
 sidebar_position: 6
 ---
-# Code Split
+# Code Splitting
 
-Code Split is a common way to optimizing front-end resource loading. This doc will introduce three methods 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 you use Modern.js [Conventional routing](/guides/basic-features/routes#conventional-routing), by default it will do code splitting based on routing components, wrapping `Suspense` components, no need to do code splitting by yourself.
-
+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.
 :::
 
 - `import`
@@ -17,7 +16,7 @@ When you use Modern.js [Conventional routing](/guides/basic-features/routes#conv
 
 ## import
 
-use dynamic `import()`, `import` The JS modules pass to this API will be packaged into a separate JS file as a new packaging entry, for example:
+use dynamic `import()`, the JS modules pass to this API will be packaged as a separate JS file, for example:
 
 ```ts
 import('./math').then(math => {
@@ -25,15 +24,14 @@ import('./math').then(math => {
 });
 ```
 
-The JS modules corresponding to the './math' path will be packaged in a separate JS file.
-
 ## React.lazy
 
 The officially way provides by React to split component code.
 
 :::caution
-SSR is not supported in React 17 and below, and it is recommended that SSR applications for React 17 use loadable.
+`React.lazy` is typically used in together with `<Suspense>`, hence it is only available in CSR or React 18 Streaming SSR.
 
+For projects that use Traditional SSR（renderToString）, `React.lazy` is not supported. Please use the Loadable API instead.
 :::
 
 ```ts
@@ -56,11 +54,11 @@ function MyComponent() {
 }
 ```
 
-For detail, see [React lazy](https://reactjs.org/docs/code-splitting.html#reactlazy).
+For details, see [React lazy](https://react.dev/reference/react/lazy).
 
-## loadable
+## Loadable
 
-use `loadable` API, for example:
+In Modern.js, you can use the Loadable API, which is exported from `@modern-js/runtime/loadable`. Here's an example:
 
 ```ts
 import loadable from '@modern-js/runtime/loadable';
@@ -72,9 +70,12 @@ function MyComponent() {
 }
 ```
 
-For detail, see [loadable API](/apis/app/runtime/utility/loadable).
+With the out-of-the-box support of `loadable` in SSR by Modern.js, you no longer need to add Babel plugins or inject scripts into HTML during SSR.
 
-:::info
-SSR is supported out of the box by `loadable`.
+However, it's important to note that any Loadable API in SSR does not support the use of `<Suspense>`.
 
+:::info
+If you want to use `<Suspense>` in CSR projects with React 17 and below, you can substitute `React.lazy` with `loadable.lazy`.
 :::
+
+For details, see [Loadable API](/apis/app/runtime/utility/loadable).

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

@@ -80,7 +80,6 @@ For example, if you are using pnpm, you can update the Rspack version with `over
     "overrides": {
       "@rspack/core": "nightly",
       "@rspack/dev-client": "nightly",
-      "@rspack/dev-middleware": "nightly",
       "@rspack/plugin-html": "nightly"
     }
   }

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

@@ -75,7 +75,7 @@ Warning: Expected server HTML to contain a matching <div> in <div>.
 This is caused by the inconsistency between the rendering result and the SSR rendering result when React executes the hydrate logic on the client side. Although the page performs normally, in complex applications, it is likely to cause problems such as DOM hierarchy confusion and style confusion.
 
 :::info
-For hydrate logic, please refer to [here](https://reactjs.org/docs/react-dom.html#hydrate).
+For hydrate logic, please refer to [here](https://react.dev/reference/react-dom/hydrate).
 
 :::
 
@@ -455,7 +455,7 @@ export default Page;
 ```
 
 `Await` needs to be wrapped inside the `Suspense` component. The `resolve` of `Await` passes in the data acquired asynchronously by the Data Loader. When the data acquisition is completed,
-the obtained data is rendered through the [Render Props](https://reactjs.org/docs/render-props.html) mode. When the data acquisition is in pending status, the
+the obtained data is rendered through the [Render Props](https://react.dev/reference/react/cloneElement#passing-data-with-a-render-prop) mode. When the data acquisition is in pending status, the
 content set by the `fallback` property of the `Suspense` component will display.
 
 

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/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).