Skip to content

docs: add bundleless externals note #763

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Feb 18, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion website/docs/en/config/rsbuild/resolve.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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 <RsbuildDocBadge path="/config/resolve/dedupe" text="resolve.dedupe" />
Expand Down
4 changes: 3 additions & 1 deletion website/docs/zh/config/rsbuild/resolve.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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` 用于将目标模块替换为另一个模块,该模块会被打包到产物中。
Expand Down Expand Up @@ -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 <RsbuildDocBadge path="/config/resolve/dedupe" text="resolve.dedupe" />
Expand Down
Loading