docs: clarityinclude and exclude usages (#4360)

website/docs/en/config/source/exclude.mdx

@@ -3,11 +3,15 @@
 - **Type:** [Rspack.RuleSetCondition](https://rspack.dev/config/module#condition)
 - **Default:** `[]`
 
-Specifies JavaScript/TypeScript files that do not need to be compiled. The usage is consistent with [Rule.exclude](https://rspack.dev/config/module#ruleexclude) in Rspack, which supports passing in strings or regular expressions to match the module path.
+Exclude JavaScript or TypeScript files that do not need to be compiled by [SWC](/guide/basic/configure-swc).
+
+## Usage
+
+The usage of `source.exclude` is consistent with [Rule.exclude](https://rspack.dev/config/module#ruleexclude) in Rspack, which supports passing in strings or regular expressions to match the module path.
 
 For example:
 
-```js
+```js title="rsbuild.config.ts"
 import path from 'node:path';
 
 export default {
@@ -19,13 +23,13 @@ export default {
 
 > Refer to [source.include](/config/source/include) to learn more.
 
-### Not compiled vs not bundled
+## Exclude from bundling
 
-`source.exclude` is used to specify JavaScript/TypeScript files that do not need to be compiled. This means that these files will not be translated by SWC or Babel, but they will still be bundled into the outputs (if referenced).
+`source.exclude` is used to specify JavaScript/TypeScript files that do not need to be compiled. This means that these files will not be translated by SWC, but the referenced files will still be bundled into the outputs.
 
-If you want certain files to be ignored and not bundled into the outputs, you can use Rspack's [IgnorePlugin](https://rspack.dev/plugins/webpack/ignore-plugin).
+If you want certain files to be excluded and not bundled into the outputs, you can use Rspack's [IgnorePlugin](https://rspack.dev/plugins/webpack/ignore-plugin).
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     rspack: (config, { rspack }) => {

website/docs/en/config/source/include.mdx

@@ -1,7 +1,17 @@
 # source.include
 
 - **Type:** [Rspack.RuleSetCondition](https://rspack.dev/config/module#condition)
-- **Default:**
+
+Specify additional JavaScript files that need to be compiled by [SWC](/guide/basic/configure-swc).
+
+## Default value
+
+To avoid double compilation, by default, Rsbuild's built-in [swc-loader](https://rspack.dev/guide/features/builtin-swc-loader) compiles the following files:
+
+- TypeScript and JSX files in any directory, matching file extensions `.ts`, `.tsx`, `.jsx`, `.mts`, `.cts`.
+- JavaScript files in the [root](/config/root) directory, excluding the `node_modules` directory, matching file extensions `.js`, `.mjs`, `.cjs`.
+
+The default value of `source.include` can be expressed as:
 
 ```ts
 const defaultInclude = [
@@ -12,15 +22,13 @@ const defaultInclude = [
 ];
 ```
 
-The `source.include` is used to specify additional JavaScript files that need to be compiled.
-
-To avoid redundant compilation, by default, Rsbuild only compiles JavaScript files in the current directory and TypeScript and JSX files in all directories. It does not compile JavaScript files under node_modules.
+## Usage
 
 Through the `source.include` config, you can specify directories or modules that need to be compiled by Rsbuild. The usage of `source.include` is consistent with [Rule.include](https://rspack.dev/config/module#ruleinclude) in Rspack, which supports passing in strings or regular expressions to match the module path.
 
 For example:
 
-```ts
+```ts title="rsbuild.config.ts"
 import path from 'node:path';
 
 export default {
@@ -40,20 +48,20 @@ If you are unsure which third-party dependencies in node_modules contain ESNext
 
 Take `query-string` as an example, you can add the following config:
 
-```ts
+```ts title="rsbuild.config.ts"
 import path from 'node:path';
 
 export default {
   source: {
     include: [
       // Method 1:
-      // First get the path of the module by require.resolve
-      // Then pass path.dirname to point to the corresponding directory
-      path.dirname(require.resolve('query-string')),
-      // Method 2:
       // Match by regular expression
       // All paths containing `node_modules/query-string/` will be matched
       /node_modules[\\/]query-string[\\/]/,
+      // Method 2:
+      // First get the path of the module by require.resolve
+      // Then pass path.dirname to point to the corresponding directory
+      path.dirname(require.resolve('query-string')),
     ],
   },
 };
@@ -71,7 +79,7 @@ When you compile an npm package via `source.include`, Rsbuild will only compile
 
 Take `query-string` for example, it depends on the `decode-uri-component` package, which also has ESNext code, so you need to add the `decode-uri-component` package to `source.include` as well.
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   source: {
     include: [
@@ -86,7 +94,7 @@ export default {
 
 When developing in Monorepo, if you need to refer to the source code of other libraries in Monorepo, you can add the corresponding library to `source.include`:
 
-```ts
+```ts title="rsbuild.config.ts"
 import path from 'node:path';
 
 const packagesDir = path.resolve(__dirname, '../../packages');
@@ -114,7 +122,7 @@ For example, if you symlink the `packages/foo` path in Monorepo to the `node_mod
 
 In general, `source.include` should not be used to compile the entire `node_modules` directory. For example, the following configuration is not recommended:
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   source: {
     include: [/[\\/]node_modules[\\/]/],
@@ -126,7 +134,7 @@ This is because most of the npm packages in `node_modules` are already compiled,
 
 If you are willing to accept the increase in compilation time, you can use the following configuration to compile all JavaScript files but exclude `core-js':
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   source: {
     include: [{ not: /[\\/]core-js[\\/]/ }],

website/docs/en/guide/basic/configure-swc.mdx

@@ -9,7 +9,13 @@ Rsbuild enables the following SWC features by default:
 
 ## Loader options
 
-The options for `builtin:swc-loader` are consistent with the JS version of swc-loader. Rsbuild provides the [tools.swc](/config/tools/swc) option to configure `builtin:swc-loader`. Here are some examples:
+The options for `builtin:swc-loader` are the same as those for the JS version of `swc-loader`. Rsbuild exposes some options to configure `builtin:swc-loader`:
+
+- [tools.swc](/config/tools/swc)：to configure the options for `builtin:swc-loader`.
+- [source.include](/config/source/include)：to specify files that need to be compiled by SWC.
+- [source.exclude](/config/source/exclude)：to exclude files that do not need to be compiled by SWC.
+
+Here are some examples:
 
 ### Register SWC plugin
 

website/docs/zh/config/source/exclude.mdx

@@ -3,11 +3,15 @@
 - **类型：** [RuleSetCondition](https://rspack.dev/zh/config/module#condition)
 - **默认值：** `[]`
 
-指定不需要编译的 JavaScript/TypeScript 文件。用法与 Rspack 中的 [Rule.exclude](https://rspack.dev/zh/config/module#ruleexclude) 一致，支持传入字符串或正则表达式来匹配模块的路径。
+排除不需要被 [SWC](/guide/basic/configure-swc) 编译的 JavaScript 或 TypeScript 文件。
+
+## 用法
+
+`source.exclude` 的用法与 Rspack 中的 [Rule.exclude](https://rspack.dev/zh/config/module#ruleexclude) 一致，支持传入字符串或正则表达式来匹配模块的路径。
 
 比如:
 
-```js
+```js title="rsbuild.config.ts"
 import path from 'node:path';
 
 export default {
@@ -19,13 +23,13 @@ export default {
 
 > 参考 [source.include](/config/source/include) 来了解更多。
 
-### 不编译 vs 不打包
+## 排除打包
 
-`source.exclude` 用于指定不需要编译的 JavaScript/TypeScript 文件。这意味着这些文件不会经过 SWC 或 Babel 转译，但这些文件仍然会被打包到产物中（如果被引用）。
+`source.exclude` 用于指定不需要编译的 JavaScript/TypeScript 文件。这意味着这些文件不会经过 SWC 转译，但被引用的文件仍然会被打包到产物中。
 
-如果你希望某些文件在打包过程中被忽略，不被打包到产物中，可以使用 Rspack 的 [IgnorePlugin](https://rspack.dev/zh/plugins/webpack/ignore-plugin)。
+如果你希望某些文件在打包过程中被排除，不被打包到产物中，可以使用 Rspack 的 [IgnorePlugin](https://rspack.dev/zh/plugins/webpack/ignore-plugin)。
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     rspack: (config, { rspack }) => {

website/docs/zh/config/source/include.mdx

@@ -1,7 +1,17 @@
 # source.include
 
 - **类型：** [RuleSetCondition](https://rspack.dev/zh/config/module#condition)
-- **默认值：**
+
+用于指定额外需要被 [SWC](/guide/basic/configure-swc) 编译的 JavaScript 文件。
+
+## 默认值
+
+为了避免二次编译，默认情况下，Rsbuild 内置的 [swc-loader](https://rspack.dev/guide/features/builtin-swc-loader) 会编译以下文件：
+
+- 任意目录下的 TypeScript 和 JSX 文件，匹配的文件后缀为 `.ts`、`.tsx`、`.jsx`、`.mts`、`.cts`。
+- [root](/config/root) 目录下的 JavaScript 文件，但不包含 `node_modules` 目录，匹配的文件后缀为 `.js`、`.mjs`、`.cjs`。
+
+`source.include` 的默认值可以表示为：
 
 ```ts
 const defaultInclude = [
@@ -12,15 +22,13 @@ const defaultInclude = [
 ];
 ```
 
-`source.include` 用于指定额外需要编译的 JavaScript 文件。
+## 用法
 
-为了避免二次编译，默认情况下，Rsbuild 只会编译当前目录下的 JavaScript 文件，以及所有目录下的 TypeScript 和 JSX 文件，不会编译 node_modules 下的 JavaScript 文件。
-
-通过 `source.include` 配置项，可以指定需要 Rsbuild 额外进行编译的目录或模块。`source.include` 的用法与 Rspack 中的 [Rule.include](https://rspack.dev/zh/config/module#ruleinclude) 一致，支持传入字符串、正则表达式来匹配模块的路径。
+通过 `source.include` 配置项，你可以指定需要 Rsbuild 额外进行编译的目录或模块。`source.include` 的用法与 Rspack 中的 [Rule.include](https://rspack.dev/zh/config/module#ruleinclude) 一致，支持传入字符串、正则表达式来匹配模块的路径。
 
 比如:
 
-```ts
+```ts title="rsbuild.config.ts"
 import path from 'node:path';
 
 export default {
@@ -40,20 +48,20 @@ export default {
 
 以 `query-string` 为例，你可以做如下的配置：
 
-```ts
+```ts title="rsbuild.config.ts"
 import path from 'node:path';
 
 export default {
   source: {
     include: [
       // 方法一:
-      // 先通过 require.resolve 来获取模块的路径
-      // 再通过 path.dirname 来指向对应的目录
-      path.dirname(require.resolve('query-string')),
-      // 方法二:
       // 通过正则表达式进行匹配
       // 所有包含 `node_modules/query-string/` 的路径都会被匹配到
       /node_modules[\\/]query-string[\\/]/,
+      // 方法二:
+      // 先通过 require.resolve 来获取模块的路径
+      // 再通过 path.dirname 来指向对应的目录
+      path.dirname(require.resolve('query-string')),
     ],
   },
 };
@@ -71,7 +79,7 @@ export default {
 
 以 `query-string` 为例，它依赖的 `decode-uri-component` 包中同样存在 ESNext 代码，因此你需要将 `decode-uri-component` 也加入到 `source.include` 中：
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   source: {
     include: [
@@ -86,7 +94,7 @@ export default {
 
 在 Monorepo 中进行开发时，如果需要引用 Monorepo 中其他库的 JavaScript 代码，也可以直接在 `source.include` 进行配置:
 
-```ts
+```ts title="rsbuild.config.ts"
 import path from 'node:path';
 
 const packagesDir = path.resolve(__dirname, '../../packages');
@@ -114,19 +122,19 @@ export default {
 
 通常来说，`source.include` 不应该用于编译整个 `node_modules` 目录，比如下面的写法是不推荐的：
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   source: {
     include: [/[\\/]node_modules[\\/]/],
   },
 };
 ```
 
-这是因为 `node_modules` 中的大部分 npm 包发布的已经是编译后的产物，通常没必要经过二次编译。如果你对整个 `node_modules` 进行编译，会使编译时间增加，并且个别的 npm 包可能会产生不可预期的错误，比如 `core-js` 被编译后会出现运行时异常。
+这是因为 `node_modules` 中的大部分 npm 包发布的已经是编译后的产物，通常没必要经过二次编译。如果 Rsbuild 对整个 `node_modules` 进行编译，会使编译时间增加，并且个别的 npm 包可能会产生不可预期的错误，比如 `core-js` 被编译后会出现运行时异常。
 
 如果你可以接受编译时间的增加，可以通过下面的配置来编译所有 JavaScript 文件，但是需要排除 `core-js`：
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   source: {
     include: [{ not: /[\\/]core-js[\\/]/ }],

website/docs/zh/guide/basic/configure-swc.mdx

@@ -9,7 +9,13 @@ Rsbuild 默认启用 SWC 的以下功能：
 
 ## Loader 选项
 
-`builtin:swc-loader` 的选项与 JS 版本的 swc-loader 一致。Rsbuild 提供了 [tools.swc](/config/tools/swc) 选项来配置 `builtin:swc-loader`，下面是一些示例：
+`builtin:swc-loader` 的选项与 JS 版本的 `swc-loader` 一致。Rsbuild 暴露了一些选项来配置 `builtin:swc-loader`：
+
+- [tools.swc](/config/tools/swc)：用于配置 `builtin:swc-loader` 的选项。
+- [source.include](/config/source/include)：用于指定需要被 SWC 编译的文件。
+- [source.exclude](/config/source/exclude)：用于排除不需要被 SWC 编译的文件。
+
+下面是一些示例：
 
 ### 注册 SWC 插件