chore: update

Author: Timeless0911

website/docs/en/config/lib/redirect.mdx

@@ -72,9 +72,21 @@ In bundleless mode, there are often needs such as using aliases or automatically
 
 Controls the redirect of the import paths of output JavaScript files.
 
+- **Example:**
+
+By default, when set `compilerOptions.paths` to `{ "@/*": ["src/*"] }` in `tsconfig.json`, the import path for the JavaScript output file will be redirected to the correct relative path and the corresponding file extension will be added:
+
+```ts
+import { foo } from '@/foo'; // source code of './src/bar.ts' ↓
+import { foo } from './foo.mjs'; // expected output of './dist/bar.mjs'
+
+import { foo } from '@/foo'; // source code of './src/utils/index.ts' ↓
+import { foo } from '../foo.mjs'; // expected output of './dist/utils/index.mjs'
+```
+
 :::warning
 
-When [output.externals](/config/rsbuild/output#outputexternals) is configured and a request is matched, neither `redirect.js.path` nor `redirect.js.extension` will take effect, and the final rewritten request path will be entirely controlled by [output.externals](/config/rsbuild/output#outputexternals).
+When [output.externals](/config/rsbuild/output#outputexternals) is configured and a request is matched, neither `redirect.js.path` nor `redirect.js.extension` will take effect, and the final redirected request path will be entirely controlled by [output.externals](/config/rsbuild/output#outputexternals).
 
 :::
 
@@ -85,20 +97,20 @@ Whether to automatically redirect the import paths of JavaScript output files.
 - **Type:** `boolean`
 - **Default:** `true`
 
-When set to `true`, [resolve.alias](/config/rsbuild/resolve#resolvealias) and [resolve.aliasStrategy](/config/rsbuild/resolve#aliasstrategy) will take effect in the output file, and the import path of the output file will be rewritten. For TypeScript projects, just configure [compilerOptions.paths](https://typescriptlang.org/tsconfig#paths) in the `tsconfig.json` file.
+When set to `true`, [resolve.alias](/config/rsbuild/resolve#resolvealias) and [resolve.aliasStrategy](/config/rsbuild/resolve#aliasstrategy) will take effect in the output file, and the import path of the output file will be redirected. For TypeScript projects, just configure [compilerOptions.paths](https://typescriptlang.org/tsconfig#paths) in the `tsconfig.json` file.
 
 When set to `false`, the import path will not be effected by [resolve.alias](/config/rsbuild/resolve#resolvealias), [resolve.aliasStrategy](/config/rsbuild/resolve#aliasstrategy) and `tsconfig.json`.
 
 - **Example:**
 
-When set `compilerOptions.paths` to `{ "@/*": ["src/*"] }` in `tsconfig.json`, the output file will be redirected to the correct relative path:
+When set `compilerOptions.paths` to `{ "@/*": ["src/*"] }` in `tsconfig.json`, the import path for the JavaScript output file will be redirected to the correct relative path:
 
 ```ts
 import { foo } from '@/foo'; // source code of './src/bar.ts' ↓
-import { foo } from './foo.js'; // expected output of './dist/bar.js'
+import { foo } from './foo'; // expected output of './dist/bar.js'
 
 import { foo } from '@/foo'; // source code of './src/utils/index.ts' ↓
-import { foo } from '../foo.js'; // expected output './dist/utils/index.js'
+import { foo } from '../foo'; // expected output './dist/utils/index.js'
 ```
 
 ### redirect.js.extension
@@ -132,6 +144,18 @@ import { foo } from './foo.mjs'; // expected output './dist/utils/index.mjs'
 
 Controls the redirect of the import paths of output style files.
 
+- **Example:**
+
+By default, when `compilerOptions.paths` is set to `{ "@/*": ["src/*"] }` in `tsconfig.json`, the import paths of style output files will be redirected to the correct relative paths. Additionally, when importing [CSS Modules](/config/rsbuild/output#outputcssmodules), the file extension will be rewritten to the corresponding JavaScript output file extension.
+
+```ts
+import '@/foo.css'; // source code of './src/bar.ts' ↓
+import './foo.css'; // expected output of './dist/bar.js'
+
+import styles from '@/foo.module.less'; // source code of './src/baz.ts' ↓
+import styles from './foo.module.mjs'; // expected output of './dist/baz.mjs'
+```
+
 ### redirect.style.path
 
 Whether to automatically redirect the import paths of style output files.
@@ -145,6 +169,8 @@ When set to `false`, the original import path will remain unchanged.
 
 - **Example:**
 
+When set `compilerOptions.paths` to `{ "@/*": ["src/*"] }` in `tsconfig.json`, the import path for the style output file will be redirected to the correct relative path.
+
 When importing normal style files:
 
 ```ts
@@ -174,8 +200,8 @@ Whether to automatically redirect the file extension of import paths based on th
 
 When set to `true`:
 
-- When importing a normal style file, the path will be rewritten to `.css`.
-- When importing [CSS Modules](/config/rsbuild/output#outputcssmodules), the path will be rewritten to the corresponding JavaScript output file.
+- When importing a normal style file, the path will be redirected to `.css`.
+- When importing [CSS Modules](/config/rsbuild/output#outputcssmodules), the file extension will be redirected to the corresponding JavaScript output file extension.
 
 When set to `false`, the file extension will remain unchanged from the original import path.
 
@@ -195,6 +221,15 @@ import styles from './index.module.mjs'; // expected output
 
 Controls the redirect of the import paths of output asset files.
 
+- **Example:**
+
+By default, when `compilerOptions.paths` is set to `{ "@/*": ["src/*"] }` in `tsconfig.json`, the import paths of asset files will be redirected to the correct relative paths, and the file extensions will be rewritten to the corresponding JavaScript output file extensions.
+
+```ts
+import url from '@/assets/logo.svg'; // source code of './src/foo.ts' ↓
+import url from './assets/logo.mjs'; // expected output of './dist/foo.mjs'
+```
+
 ### redirect.asset.path
 
 Whether to automatically redirect the import paths of asset output files.
@@ -208,6 +243,8 @@ When set to `false`, the original import path will remain unchanged.
 
 - **Example:**
 
+When set `compilerOptions.paths` to `{ "@/*": ["src/*"] }` in `tsconfig.json`, the import path for the asset file will be redirected to the correct relative path:
+
 ```ts
 import url from '@/assets/logo.svg'; // source code of './src/foo.ts' ↓
 import url from './assets/logo.svg'; // expected output of './dist/foo.js'
@@ -220,7 +257,7 @@ Whether to automatically redirect the file extension of import paths based on th
 - **Type:** `boolean`
 - **Default:** `true`
 
-When set to `true`, the paths of imported asset files will be redirected to the corresponding JavaScript output file.
+When set to `true`, the file extension of imported asset files will be redirected to the corresponding JavaScript output file extension.
 
 When set to `false`, the file extension will remain unchanged from the original import path.
 
@@ -241,6 +278,15 @@ The way to import static assets in a JavaScript file and the corresponding outpu
 
 Controls the redirect of the import paths of output TypeScript declaration files.
 
+- **Example:**
+
+By default, when `compilerOptions.paths` is set to `{ "@/*": ["src/*"] }` in `tsconfig.json`, the import path in the declaration output file will be redirected to the correct relative path:
+
+```ts
+import { foo } from '@/foo'; // source code of './src/bar.ts' ↓
+import { foo } from './foo'; // expected output of './dist/bar.d.ts'
+```
+
 ### redirect.dts.path
 
 Whether to automatically redirect the import paths of TypeScript declaration output files.
@@ -254,7 +300,7 @@ When set to `false`, the original import path will remain unchanged.
 
 - **Example:**
 
-When `compilerOptions.paths` is set to `{ "@/*": ["src/*"] }` in `tsconfig.json`, the declaration output file will be redirected to the correct relative path:
+When `compilerOptions.paths` is set to `{ "@/*": ["src/*"] }` in `tsconfig.json`, the import path in the declaration output file will be redirected to the correct relative path:
 
 ```ts
 import { foo } from '@/foo'; // source code of './src/bar.ts' ↓

website/docs/zh/config/lib/redirect.mdx

@@ -72,9 +72,21 @@ const defaultRedirect = {
 
 控制 JavaScript 产物文件导入路径的重定向。
 
+- **示例：**
+
+默认情况下，在 `tsconfig.json` 中将 `compilerOptions.paths` 设置为 `{ "@/*": ["src/*"] }` 时，JavaScript 产物文件的导入路径将被重定向到正确的相对路径并添加对应的文件扩展名。
+
+```ts
+import { foo } from '@/foo'; // './src/bar.ts' 的源码 ↓
+import { foo } from './foo.mjs'; // './dist/bar.mjs' 预期生成的代码
+
+import { foo } from '@/foo'; // './src/utils/index.ts' 的源码 ↓
+import { foo } from '../foo.mjs'; // './dist/utils/index.mjs' 预期生成的代码
+```
+
 :::warning
 
-当 [output.externals](/config/rsbuild/output#outputexternals) 被配置且请求被匹配时，`redirect.js.path` 和 `redirect.js.extension` 都不会生效，最终重写的请求路径将完全由 [output.externals](/config/rsbuild/output#outputexternals) 控制。
+当 [output.externals](/config/rsbuild/output#outputexternals) 被配置且请求被匹配时，`redirect.js.path` 和 `redirect.js.extension` 都不会生效，最终重定向的请求路径将完全由 [output.externals](/config/rsbuild/output#outputexternals) 控制。
 
 :::
 
@@ -89,16 +101,16 @@ const defaultRedirect = {
 
 当设置为 `false` 时，导入路径将不受 [resolve.alias](/config/rsbuild/resolve#resolvealias)、[resolve.aliasStrategy](/config/rsbuild/resolve#aliasstrategy) 和 `tsconfig.json` 的影响。
 
-- 示例：
+- **示例：**
 
-在 `tsconfig.json` 中将 `compilerOptions.paths` 设置为 `{ "@/*": ["src/*"] }` 时，产物文件将被重定向到正确的相对路径：
+在 `tsconfig.json` 中将 `compilerOptions.paths` 设置为 `{ "@/*": ["src/*"] }` 时，JavaScript 产物文件的导入路径将被重定向到正确的相对路径：
 
 ```ts
 import { foo } from '@/foo'; // './src/bar.ts' 的源码 ↓
-import { foo } from './foo.js'; // './dist/bar.js' 预期生成的代码
+import { foo } from './foo'; // './dist/bar.js' 预期生成的代码
 
 import { foo } from '@/foo'; // './src/utils/index.ts' 的源码 ↓
-import { foo } from '../foo.js'; // './dist/utils/index.js' 预期生成的代码
+import { foo } from '../foo'; // './dist/utils/index.js' 预期生成的代码
 ```
 
 ### redirect.js.extension
@@ -132,6 +144,18 @@ import { foo } from './foo.mjs'; // './dist/utils/index.mjs' 预期生成的代
 
 控制样式产物文件导入路径的重定向。
 
+- **示例：**
+
+默认情况下，在 `tsconfig.json` 中将 `compilerOptions.paths` 设置为 `{ "@/*": ["src/*"] }` 时，样式产物文件的导入路径将被重定向到正确的相对路径。此外，在导入 [CSS Modules](/config/rsbuild/output#outputcssmodules) 时，文件扩展名将被重写为对应的 JavaScript 产物文件扩展名。
+
+```ts
+import '@/foo.css'; // './src/bar.ts' 的源码 ↓
+import './foo.css'; // './dist/bar.js' 预期生成的代码
+
+import styles from '@/foo.module.less'; // './src/baz.ts' 的源码 ↓
+import styles from './foo.module.mjs'; // './dist/baz.mjs' 预期生成的代码
+```
+
 ### redirect.style.path
 
 是否自动重定向样式产物文件的导入路径。
@@ -145,6 +169,8 @@ import { foo } from './foo.mjs'; // './dist/utils/index.mjs' 预期生成的代
 
 - **示例：**
 
+在 `tsconfig.json` 中将 `compilerOptions.paths` 设置为 `{ "@/*": ["src/*"] }` 时，样式产物文件的导入路径将被重定向到正确的相对路径。
+
 导入普通样式文件时：
 
 ```ts
@@ -155,7 +181,7 @@ import '@/foo.css'; // './src/utils/index.ts' 的源码 ↓
 import '../foo.css'; // './dist/utils/index.js' 预期生成的代码
 ```
 
-导入 [CSS Modules](/zh/config/rsbuild/output#outputcssmodules) 时：
+导入 [CSS Modules](/config/rsbuild/output#outputcssmodules) 时：
 
 ```ts
 import styles from '@/foo.css'; // './src/bar.ts' 的源码 ↓
@@ -175,7 +201,7 @@ import styles from '../foo.css'; // './dist/utils/index.js' 预期生成的代
 当设置为 `true` 时：
 
 - 导入普通样式文件的文件扩展名将被重写为 `.css`。
-- 导入 [CSS Modules](/config/rsbuild/output#outputcssmodules) 时，路径将被重写为到对应的 JavaScript 产物文件。
+- 导入 [CSS Modules](/config/rsbuild/output#outputcssmodules) 时，文件扩展名将被重写为对应的 JavaScript 产物文件扩展名。
 
 当设置为 `false` 时，文件扩展名将保持原始导入路径。
 
@@ -195,6 +221,15 @@ import styles from './index.module.mjs'; // 预期生成的代码
 
 控制资源文件导入路径的重定向。
 
+- **示例：**
+
+默认情况下，在 `tsconfig.json` 中将 `compilerOptions.paths` 设置为 `{ "@/*": ["src/*"] }` 时，资源文件的导入路径将被重定向到正确的相对路径，扩展名将被重写为对应的 JavaScript 产物文件扩展名。
+
+```ts
+import url from '@/assets/logo.svg'; // './src/foo.ts' 的源码 ↓
+import url from './assets/logo.mjs'; // './dist/foo.mjs' 预期生成的代码
+```
+
 ### redirect.asset.path
 
 是否自动重定向资源文件的导入路径。
@@ -208,6 +243,8 @@ import styles from './index.module.mjs'; // 预期生成的代码
 
 - **示例：**
 
+在 `tsconfig.json` 中将 `compilerOptions.paths` 设置为 `{ "@/*": ["src/*"] }` 时，资源文件的导入路径将被重定向到正确的相对路径并
+
 ```ts
 import url from '@/assets/logo.svg'; // './src/foo.ts' 的源码 ↓
 import url from './assets/logo.svg'; // './dist/foo.js' 预期生成的代码
@@ -220,7 +257,7 @@ import url from './assets/logo.svg'; // './dist/foo.js' 预期生成的代码
 - **类型:** `boolean`
 - **默认值:** `true`
 
-当设置为 `true` 时，导入资源文件的路径将被重写到对应的 JavaScript 产物文件。
+当设置为 `true` 时，导入资源文件的扩展名将被重写为对应的 JavaScript 产物文件扩展名。
 
 当设置为 `false` 时，文件扩展名将保持原始导入路径。
 
@@ -241,6 +278,15 @@ import url from './assets/logo.mjs'; // './dist/foo.mjs' 预期生成的代码
 
 控制 TypeScript 类型文件中导入路径的重定向。
 
+- **示例：**
+
+默认情况下，在 `tsconfig.json` 中将 `compilerOptions.paths` 设置为 `{ "@/*": ["src/*"] }` 时，类型声明产物文件的导入路径将被重定向到正确的相对路径。
+
+```ts
+import { foo } from '@/foo'; // './src/bar.ts' 的源码 ↓
+import { foo } from './foo'; // './dist/bar.d.ts' 预期生成的代码
+```
+
 ### redirect.dts.path
 
 是否自动重定向 TypeScript 类型文件中的导入路径。
@@ -254,7 +300,7 @@ import url from './assets/logo.mjs'; // './dist/foo.mjs' 预期生成的代码
 
 - **示例：**
 
-在 `tsconfig.json` 中将 `compilerOptions.paths` 设置为 `{ "@/*": ["src/*"] }` 时，类型声明产物文件将被重定向到正确的相对路径：
+在 `tsconfig.json` 中将 `compilerOptions.paths` 设置为 `{ "@/*": ["src/*"] }` 时，类型声明产物文件中的导入路径将被重定向到正确的相对路径：
 
 ```ts
 import { foo } from '@/foo'; // './src/bar.ts' 的源码 ↓