targets

  • 类型:
type RsbuildTarget = 'web' | 'node' | 'web-worker' | 'service-worker';

type Targets = RsbuildTarget[];
  • 默认值: ['web']
  • 版本: >= 0.2.0

用于设置 Rsbuild 的构建产物类型。

Rsbuild 支持多种构建产物类型,分别适用于不同的目标运行环境。在设置正确的产物类型后,Rsbuild 会针对该环境优化打包结果,在构建过程中启用一些对应的插件或者配置。

默认产物

默认情况下,targets 会被设置为 ['web'],并构建出运行在浏览器环境里的产物

同时,Rsbuild 会读取项目中的 Browserslist 配置,以确定需要兼容的浏览器范围。

可选类型

除了 'web' 外,targets 还可以包含以下类型:

  • 'node':构建出运行在 Node.js 环境的产物,通常用于 SSR 等场景。
  • 'web-worker':构建出运行在 Web Worker 里的产物。

比如构建出适用于 Node.js 环境的产物:

export default {
  output: {
    targets: ['node'],
  },
};

并行构建

当 targets 包含多个值时,Rsbuild 会并行构建,并生成多份不同的产物。

比如同时构建浏览器产物和 SSR 产物:

export default {
  output: {
    targets: ['web', 'node'],
  },
};

Node 产物

指运行在 Node.js 环境的产物,通常用于 SSR 等场景。

target 设置为 'node' 时,Rsbuild 会进行以下处理:

  • 不会生成 HTML 文件,与 HTML 相关的逻辑也不会执行,因为 Node.js 环境不需要 HTML。
  • 不会打包或抽取 CSS 代码,但产物中会包含 CSS Modules 的 id 信息。
  • 不会开启默认的拆包策略,但 dynamic import 依然可以生效。
  • 不会开启热更新相关的能力。
  • 将 Browserslist 的默认值调整为 ['node >= 16']
TIP

如果触发了并行构建,比如同时构建 web 产物和 node 产物,那么上述处理不会影响 web 产物,web 产物所需的 HTML、CSS 等文件依然会正确生成。

Web Worker 产物

指运行在 Web Worker 环境的产物。

Web Worker

Web Workers 是一种 JavaScript API,它允许网页在后台线程中执行脚本,与主线程(网页)分离。这意味着,您可以使用 Web Workers 来执行计算密集型或长时间运行的任务,而无需阻塞主线程,进而影响网页的性能。

target 设置为 'web-worker' 时,Rsbuild 会进行以下处理:

  • 不会生成 HTML 文件,与 HTML 相关的逻辑也不会执行,因为 Web Worker 环境不需要 HTML。
  • 不会打包或抽取 CSS 代码,但产物中会包含 CSS Modules 的 id 信息。
  • 不会开启默认的拆包策略,并且 dynamic import 也不会生效,因为 Web Worker 仅运行支持单个 JavaScript 文件。
  • 不会开启热更新相关的能力。