diff --git a/e2e/cases/source/alias-by-target/rsbuild.config.ts b/e2e/cases/source/alias-by-target/rsbuild.config.ts index 339cd87d58..a88da75fbb 100644 --- a/e2e/cases/source/alias-by-target/rsbuild.config.ts +++ b/e2e/cases/source/alias-by-target/rsbuild.config.ts @@ -1,25 +1,26 @@ import { defineConfig } from '@rsbuild/core'; export default defineConfig({ - source: { - alias(config, { target }) { - if (target === 'web') { - config['@common'] = './src/common'; - } else if (target === 'node') { - config['@common'] = './src/common2'; - } - }, - }, output: { filenameHash: false, }, environments: { web: { + source: { + alias: { + '@common': './src/common', + }, + }, output: { target: 'web', }, }, node: { + source: { + alias: { + '@common': './src/common2', + }, + }, output: { target: 'node', }, diff --git a/packages/core/src/plugins/resolve.ts b/packages/core/src/plugins/resolve.ts index 80a2e29078..c74cf51bf7 100644 --- a/packages/core/src/plugins/resolve.ts +++ b/packages/core/src/plugins/resolve.ts @@ -1,12 +1,11 @@ import { type ChainIdentifier, - type NormalizedConfig, - type RsbuildTarget, + type NormalizedEnvironmentConfig, type RspackChain, castArray, } from '@rsbuild/shared'; import { ensureAbsolutePath } from '../helpers'; -import { reduceConfigsWithContext } from '../reduceConfigs'; +import { reduceConfigs } from '../reduceConfigs'; import type { RsbuildPlugin } from '../types'; // compatible with legacy packages with type="module" @@ -16,7 +15,7 @@ function applyFullySpecified({ CHAIN_ID, }: { chain: RspackChain; - config: NormalizedConfig; + config: NormalizedEnvironmentConfig; CHAIN_ID: ChainIdentifier; }) { chain.module @@ -41,13 +40,11 @@ function applyExtensions({ chain }: { chain: RspackChain }) { function applyAlias({ chain, - target, config, rootPath, }: { chain: RspackChain; - target: RsbuildTarget; - config: NormalizedConfig; + config: NormalizedEnvironmentConfig; rootPath: string; }) { const { alias } = config.source; @@ -56,10 +53,9 @@ function applyAlias({ return; } - const mergedAlias = reduceConfigsWithContext({ + const mergedAlias = reduceConfigs({ initial: {}, config: alias, - ctx: { target }, }); /** @@ -91,14 +87,13 @@ export const pluginResolve = (): RsbuildPlugin => ({ setup(api) { api.modifyBundlerChain({ order: 'pre', - handler: (chain, { target, CHAIN_ID }) => { - const config = api.getNormalizedConfig(); + handler: (chain, { environment, CHAIN_ID }) => { + const config = api.getNormalizedConfig({ environment }); applyExtensions({ chain }); applyAlias({ chain, - target, config, rootPath: api.context.rootPath, }); diff --git a/packages/shared/src/types/config/source.ts b/packages/shared/src/types/config/source.ts index 2880d9170f..48f440af58 100644 --- a/packages/shared/src/types/config/source.ts +++ b/packages/shared/src/types/config/source.ts @@ -1,6 +1,6 @@ import type { RuleSetCondition } from '@rspack/core'; import type { RsbuildEntry, RsbuildTarget } from '../rsbuild'; -import type { ConfigChainMergeContext, ConfigChainWithContext } from '../utils'; +import type { ConfigChain, ConfigChainMergeContext } from '../utils'; export type Alias = Record; @@ -24,7 +24,7 @@ export interface SourceConfig { * Create aliases to import or require certain modules, * same as the [resolve.alias](https://rspack.dev/config/resolve) config of Rspack. */ - alias?: ConfigChainWithContext; + alias?: ConfigChain; /** * Used to control the priority between the `paths` option in `tsconfig.json` * and the `alias` option in the bundler. @@ -84,7 +84,7 @@ export type TransformImport = { export interface NormalizedSourceConfig extends SourceConfig { define: Define; - alias: ConfigChainWithContext; + alias: ConfigChain; aliasStrategy: AliasStrategy; preEntry: string[]; decorators: Required; diff --git a/website/docs/en/config/source/alias.mdx b/website/docs/en/config/source/alias.mdx index dee7aed7b0..ade5bc5c3c 100644 --- a/website/docs/en/config/source/alias.mdx +++ b/website/docs/en/config/source/alias.mdx @@ -14,7 +14,7 @@ Create aliases to import or require certain modules, same as the [resolve.alias] For TypeScript projects, you only need to configure [compilerOptions.paths](https://typescriptlang.org/tsconfig#paths) in the `tsconfig.json` file. The Rsbuild will automatically recognize it, so there is no need to configure the `source.alias` option separately. For more details, please refer to [Path Aliases](/guide/advanced/alias). ::: -### Object Type +## Object Type The `alias` can be an Object, and the relative path will be automatically converted to absolute path. @@ -30,7 +30,7 @@ export default { With above configuration, if `@common/Foo.tsx` is import in the code, it will be mapped to the `/src/common/Foo.tsx` path. -### Function Type +## Function Type The `alias` can be a function, it will accept the previous alias object, and you can modify it. @@ -58,23 +58,40 @@ export default { }; ``` -The function provides a `target` argument, which can be used to determine the build target environment, such as setting different aliases for web outputs and node outputs. +## Set by environment + +When you build for multiple environments, you can set different alias for each environment: + +For example, set different alias for `web` and `node` environments: ```js export default { - source: { - alias: (alias, { target }) => { - if (target === 'node') { - alias['@common'] = './src/node/common'; - } else if (target === 'web') { - alias['@common'] = './src/web/common'; - } + environments: { + web: { + source: { + alias: { + '@common': './src/web/common', + }, + }, + output: { + target: 'web', + }, + }, + node: { + source: { + alias: { + '@common': './src/node/common', + }, + }, + output: { + target: 'node', + }, }, }, }; ``` -### Exact Matching +## Exact Matching By default, `source.alias` will automatically match sub-paths, for example, with the following configuration: @@ -118,7 +135,7 @@ import a from '@common'; // resolved to `./src/common` import b from '@common/util'; // remains as `@common/util` ``` -### Handling npm packages +## Handling npm packages You can use `alias` to resolve an npm package to a specific directory. diff --git a/website/docs/zh/config/source/alias.mdx b/website/docs/zh/config/source/alias.mdx index 15f8967ed8..106bf4bdc1 100644 --- a/website/docs/zh/config/source/alias.mdx +++ b/website/docs/zh/config/source/alias.mdx @@ -14,7 +14,7 @@ type Alias = Record | Function; 对于 TypeScript 项目，你只需要在 `tsconfig.json` 中配置 [compilerOptions.paths](https://typescriptlang.org/tsconfig#paths) 即可，Rsbuild 会自动识别它，不需要额外配置 `source.alias` 字段，详见 [「路径别名」](/guide/advanced/alias)。 ::: -### Object 类型 +## Object 类型 `alias` 的值可以定义为 Object 类型，其中的相对路径会自动被 Rsbuild 转换为绝对路径。 @@ -30,7 +30,7 @@ export default { 以上配置完成后，如果你在代码中引用 `@common/Foo.tsx`, 则会映射到 `/src/common/Foo.tsx` 路径上。 -### Function 类型 +## Function 类型 `alias` 的值定义为函数时，可以接受预设的 alias 对象，并对其进行修改。 @@ -58,23 +58,40 @@ export default { }; ``` -函数提供了 target 参数，可以用于判断构建的目标运行时环境，比如针对 web 产物和 node 产物设置不同的 alias： +## 基于 environment 设置 + +当你面向多个 environment 构建时，可以为每个 environment 设置不同的 alias： + +比如为 `web` 和 `node` 环境设置不同的 alias： ```js export default { - source: { - alias: (alias, { target }) => { - if (target === 'node') { - alias['@common'] = './src/node/common'; - } else if (target === 'web') { - alias['@common'] = './src/web/common'; - } + environments: { + web: { + source: { + alias: { + '@common': './src/web/common', + }, + }, + output: { + target: 'web', + }, + }, + node: { + source: { + alias: { + '@common': './src/node/common', + }, + }, + output: { + target: 'node', + }, }, }, }; ``` -### 精确匹配 +## 精确匹配 默认情况，`source.alias` 会自动匹配子路径，比如以下配置： @@ -118,7 +135,7 @@ import a from '@common'; // 解析为 `./src/common` import b from '@common/util'; // 保持 `@common/util` 不变 ``` -### 处理 npm 包 +## 处理 npm 包 你可以使用 `alias` 将某个 npm 包指向统一的目录。