From f7052cd4ae8166e9f79ee1cf5a360abcd4c6ada2 Mon Sep 17 00:00:00 2001 From: Timeless0911 <1604889533@qq.com> Date: Wed, 4 Dec 2024 14:24:32 +0800 Subject: [PATCH 1/2] docs: add `resolve` field of Rsbuild config --- website/docs/en/config/rsbuild/_meta.json | 1 + website/docs/en/config/rsbuild/output.mdx | 2 +- website/docs/en/config/rsbuild/resolve.mdx | 52 ++++++++++++++++++++++ website/docs/en/config/rsbuild/source.mdx | 45 ------------------- website/docs/zh/config/rsbuild/_meta.json | 1 + website/docs/zh/config/rsbuild/resolve.mdx | 1 + 6 files changed, 56 insertions(+), 46 deletions(-) create mode 100644 website/docs/en/config/rsbuild/resolve.mdx create mode 100644 website/docs/zh/config/rsbuild/resolve.mdx diff --git a/website/docs/en/config/rsbuild/_meta.json b/website/docs/en/config/rsbuild/_meta.json index 03c9920bb..5c06549da 100644 --- a/website/docs/en/config/rsbuild/_meta.json +++ b/website/docs/en/config/rsbuild/_meta.json @@ -1,4 +1,5 @@ [ + "resolve", "source", "output", "tools", diff --git a/website/docs/en/config/rsbuild/output.mdx b/website/docs/en/config/rsbuild/output.mdx index 45d9ecaff..aa5f37401 100644 --- a/website/docs/en/config/rsbuild/output.mdx +++ b/website/docs/en/config/rsbuild/output.mdx @@ -44,7 +44,7 @@ Whether to emit CSS to the output bundles. At build time, prevent some `import` dependencies from being packed into bundles in your code, and instead fetch them externally at runtime. -It is important to note that `output.externals` differs from [source.alias](/config/rsbuild/source#sourcealias). Check out [source.alias](/config/rsbuild/source#sourcealias) documentation for more information. +It is important to note that `output.externals` differs from [resolve.alias](/config/rsbuild/resolve#resolvealias). Check out [resolve.alias](/config/rsbuild/resolve#resolvealias) documentation for more information. ## output.filenameHash diff --git a/website/docs/en/config/rsbuild/resolve.mdx b/website/docs/en/config/rsbuild/resolve.mdx new file mode 100644 index 000000000..65579e90b --- /dev/null +++ b/website/docs/en/config/rsbuild/resolve.mdx @@ -0,0 +1,52 @@ +import { RsbuildDocBadge } from '@components/RsbuildDocBadge'; + +# resolve + +## resolve.aliasStrategy + +`resolve.aliasStrategy` is used to control the priority between the `paths` option in `tsconfig.json` and the `alias` option in the bundler. + +## resolve.alias + +Create aliases to import or require certain modules, same as the [resolve.alias](https://rspack.dev/config/resolve#resolvealias) config of Rspack. + +It is important to note that `resolve.alias` differs from [output.externals](/config/rsbuild/output#outputexternals) in the following ways: + +- `resolve.alias` is used when bundling target code into the product (when [lib.bundle](/config/lib/bundle) is set to `true`). It allows you to replace the target module you want to include in the output with another module. + + For example, if you want to replace `lodash` with `lodash-es` in a bundled CLI application, you can configure it as follows: + + ```ts title="rslib.config.ts" + export default { + // ... + resolve: { + alias: { + lodash: 'lodash-es', + }, + }, + }; + ``` + + All `lodash` modules imported in the source code will be mapped to `lodash-es` and be bundled into the output. + +- `output.externals` is used to handle alias mapping for externalized modules. Externalized modules are not included in the bundle; instead, they are imported from external sources at runtime. + + For example, if you want to replace `react` and `react-dom` with `preact/compat` in the bundle, you can configure it as follows: + + ```ts title="rslib.config.ts" + export default { + // ... + output: { + externals: { + react: 'preact/compat', + 'react-dom': 'preact/compat', + }, + }, + }; + ``` + + Now, the code `import { useState } from 'react'` will be replaced with `import { useState } from 'preact/compat'`. + +## resolve.dedupe + +`resolve.dedupe` is used to resolve the specified packages from project root, which is useful for deduplicating packages and reducing the bundle size. diff --git a/website/docs/en/config/rsbuild/source.mdx b/website/docs/en/config/rsbuild/source.mdx index d6c50d6b9..edb9f9e2d 100644 --- a/website/docs/en/config/rsbuild/source.mdx +++ b/website/docs/en/config/rsbuild/source.mdx @@ -5,51 +5,6 @@ import { RsbuildDocBadge } from '@components/RsbuildDocBadge'; Configure the source code parsing and compilation options. -## source.aliasStrategy - -`source.aliasStrategy` is used to control the priority between the `paths` option in `tsconfig.json` and the `alias` option in the bundler. - -## source.alias - -Create aliases to import or require certain modules, same as the [resolve.alias](https://rspack.dev/config/resolve#resolvealias) config of Rspack. - -It is important to note that `source.alias` differs from [output.externals](/config/rsbuild/output#outputexternals) in the following ways: - -- The `source.alias` is used when bundling target code into the product (when [lib.bundle](/config/lib/bundle) is set to `true`). It allows you to replace the target module you want to include in the output with another module. - - For example, if you want to replace `lodash` with `lodash-es` in a bundled CLI application, you can configure it as follows: - - ```ts title="rslib.config.ts" - export default { - // ... - source: { - alias: { - lodash: 'lodash-es', - }, - }, - }; - ``` - - All `lodash` modules imported in the source code will be mapped to `lodash-es` and be bundled into the output. - -- `output.externals` is used to handle alias mapping for externalized modules. Externalized modules are not included in the bundle; instead, they are imported from external sources at runtime. - - For example, if you want to replace `react` and `react-dom` with `preact/compat` in the bundle, you can configure it as follows: - - ```ts title="rslib.config.ts" - export default { - // ... - source: { - alias: { - react: 'preact/compat', - 'react-dom': 'preact/compat', - }, - }, - }; - ``` - - Now, the code `import { useState } from 'react'` will be replaced with `import { useState } from 'preact/compat'`. - ## source.assetsInclude Include additional files that should be treated as static assets. diff --git a/website/docs/zh/config/rsbuild/_meta.json b/website/docs/zh/config/rsbuild/_meta.json index 03c9920bb..5c06549da 100644 --- a/website/docs/zh/config/rsbuild/_meta.json +++ b/website/docs/zh/config/rsbuild/_meta.json @@ -1,4 +1,5 @@ [ + "resolve", "source", "output", "tools", diff --git a/website/docs/zh/config/rsbuild/resolve.mdx b/website/docs/zh/config/rsbuild/resolve.mdx new file mode 100644 index 000000000..31b7776aa --- /dev/null +++ b/website/docs/zh/config/rsbuild/resolve.mdx @@ -0,0 +1 @@ +# resolve From 7a87c0d8840412aa41e13f204bc23a13ad2d63e0 Mon Sep 17 00:00:00 2001 From: Timeless0911 <50201324+Timeless0911@users.noreply.github.com> Date: Wed, 4 Dec 2024 14:49:08 +0800 Subject: [PATCH 2/2] Update website/docs/en/config/rsbuild/resolve.mdx Co-authored-by: neverland --- website/docs/en/config/rsbuild/resolve.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/docs/en/config/rsbuild/resolve.mdx b/website/docs/en/config/rsbuild/resolve.mdx index 65579e90b..7f857f13d 100644 --- a/website/docs/en/config/rsbuild/resolve.mdx +++ b/website/docs/en/config/rsbuild/resolve.mdx @@ -12,7 +12,7 @@ Create aliases to import or require certain modules, same as the [resolve.alias] It is important to note that `resolve.alias` differs from [output.externals](/config/rsbuild/output#outputexternals) in the following ways: -- `resolve.alias` is used when bundling target code into the product (when [lib.bundle](/config/lib/bundle) is set to `true`). It allows you to replace the target module you want to include in the output with another module. +- `resolve.alias` allows you to replace the target module you want to include in the output bundles with another module. It only works if [lib.bundle](/config/lib/bundle) is set to `true`. For example, if you want to replace `lodash` with `lodash-es` in a bundled CLI application, you can configure it as follows: