diff --git a/website/docs/en/config/rsbuild/resolve.mdx b/website/docs/en/config/rsbuild/resolve.mdx index 2c5f865f9..05e4b18ee 100644 --- a/website/docs/en/config/rsbuild/resolve.mdx +++ b/website/docs/en/config/rsbuild/resolve.mdx @@ -12,6 +12,8 @@ Control the priority between the `paths` option in `tsconfig.json` and the `reso Create aliases to import or require certain modules, same as the [resolve.alias](https://rspack.dev/config/resolve#resolvealias) config of Rspack. +For TypeScript projects, you only need to configure [compilerOptions.paths](https://www.typescriptlang.org/tsconfig/#paths) in the `tsconfig.json` file. Rslib will automatically recognize it, so there is no need to configure the `resolve.alias` option separately. + It is worth noting that in bundle mode, both `resolve.alias` and [output.externals](/config/rsbuild/output#outputexternals) can be used to set aliases, but they differ in the following ways: - `resolve.alias` is used to replace the target module with another module, which will be bundled into the output. @@ -50,7 +52,7 @@ It is worth noting that in bundle mode, both `resolve.alias` and [output.externa Now, the code `import { useState } from 'react'` will be replaced with `import { useState } from 'preact/compat'`. ::: note -In bundleless mode, since there is no bundling concept, all modules will be externalized, so Rslib will automatically externalize the aliased module in the final output by using `output.externals`. +In bundleless mode, since there is no bundling concept, all modules will be externalized. Rslib will automatically transform the modules resolved to the [outBase](../lib/out-base) directory based on the mappings configured in `resolve.alias` or [compilerOptions.paths](https://www.typescriptlang.org/tsconfig/#paths) in `tsconfig.json`. ::: ## resolve.dedupe diff --git a/website/docs/zh/config/rsbuild/resolve.mdx b/website/docs/zh/config/rsbuild/resolve.mdx index 45c251818..5e321792d 100644 --- a/website/docs/zh/config/rsbuild/resolve.mdx +++ b/website/docs/zh/config/rsbuild/resolve.mdx @@ -12,6 +12,8 @@ import { RsbuildDocBadge } from '@components/RsbuildDocBadge'; 设置文件引用的别名,对应 Rspack 的 [resolve.alias](https://rspack.dev/zh/config/resolve#resolvealias) 配置。 +对于 TypeScript 项目,你只需要在 `tsconfig.json` 中配置 [compilerOptions.paths](https://www.typescriptlang.org/tsconfig/#paths) 即可,Rslib 会自动识别它,不需要额外配置 `resolve.alias` 字段。 + 值得注意的是,在 bundle 模式下,`resolve.alias` 与 [output.externals](/config/rsbuild/output#outputexternals) 都可以用于设置别名,但它们在以下方面有所不同: - `resolve.alias` 用于将目标模块替换为另一个模块,该模块会被打包到产物中。 @@ -50,7 +52,7 @@ import { RsbuildDocBadge } from '@components/RsbuildDocBadge'; 此时,代码 `import { useState } from 'react'` 将被替换为 `import { useState } from 'preact/compat'`。 ::: note -在 bundleless 模式下,由于并没有打包这个概念,所有模块都会被外部化,因此 Rslib 会自动将 `resolve.alias` 中解析的模块通过 `output.externals` 外部化。 +在 bundleless 模式下,由于没有打包这个概念,所有模块都会被外部化,Rslib 会自动根据 `resolve.alias` 或 `tsconfig.json` 中 [compilerOptions.paths](https://www.typescriptlang.org/tsconfig/#paths) 配置的映射关系,对最终解析到 [outBase](../lib/out-base) 目录下的模块进行转换。 ::: ## resolve.dedupe