CC 4.0 协议声明

本节内容派生于以下链接指向的内容 ,并遵守 CC BY 4.0 许可证的规定。

以下内容如果没有特殊声明,可以认为都是基于原内容的修改和删减后的结果。

Target

目标环境与兼容性:该选项用于配置 Rspack 输出产物的目标环境和 Rspack runtime 代码的 ECMAScript 版本。

  • 类型: string | string[]

string

现在支持的字符串格式有:

选项 描述
'web' 编译为浏览器环境可用(默认值)
'webworker' 编译为 Web Worker
'browserslist' 根据配置的 browserslist 完成 ECMAScript 特性的推断(如果 browserslist 存在,则默认开启)
'node[[X].Y]' 编译为 Node.js 环境可用
'async-node[[X].Y]' 编译为类 Node.js 环境可用(使用 fs 和 vm 异步加载分块)
'es[X]' 编译 Rspack runtime 为对应的 ECMAScript 版本,当前支持 es3es5es2015es2016es2017es2018es2019es2020es2021es2022(默认使用 es5 )
'electron[[X].Y]-main' 编译 Electron 的主进程
'electron[[X].Y]-renderer' 编译 Electron 的渲染器进程,该 target 下会使用 array-push 作为 chunkFormat,jsonp 作为 chunkLoading,为 CommonJS 和 Electron 内置模块提供 NodeTargetPlugin 和 ExternalsPlugin
'electron[[X].Y]-preload' 编译 Electron 的预加载脚本
'nwjs[[X].Y]' 编译为 NW.js 环境可用
'node-webkit[[X].Y]' 编译为 node-webkit 环境可用
esX 生效范围

target 配置中的 esX 只能指定 Rspack runtime 代码使用的 ECMAScript 语法版本,如果你需要指定用户代码的 ECMAScript 版本,可以使用 builtin:swc-loaderbabel-loader 进行代码降级。

示例

指定 Compiler 需要编译为 Node.js 环境下的代码:

rspack.config.js
module.exports = {
  target: 'node',
};

当传递多个 target 时,Rspack 将使用公共的 features 子集:

rspack.config.js
module.exports = {
  // Rspack 将为 web 平台生成运行时代码,并且只使用 ES5 特性
  target: ['web', 'es5'],
};

注意并非所有 target 都可以混合使用。当指定 Compiler 需要编译为多个平台时,则会报错:

rspack.config.js
module.exports = {
  target: ['web', 'node'],
};

对于上述的情况,你可以基于 MultiCompiler,定义多份 Rspack 配置进行打包。

browserslist

如果一个项目有 browserslist 配置,那么 Rspack 将会使用它:

  • 确定可用于运行时代码的 ES 特性。
  • 推断环境(例如:last 2 node versions 等价于 target: node,并会进行一些 output.environment 设置).
什么是 Browserslist

Browserslist 可以指定 web 应用能够在哪些浏览器中正常运行,它提供了统一的配置格式,并且已经成为了前端社区中的标准。Browserslist 被 Autoprefixer, Babel, ESLint, PostCSS,SWC 和 webpack 等库所使用。

支持的 browserslist 值:

  • browserslist - 使用自动解析的 browserslist 配置和环境(从最近的 package.jsonBROWSERSLIST 环境变量中获取,具体请查阅 browserslist 文档
  • browserslist:modern - 使用自动解析的 browserslist 配置中的 modern 环境
  • browserslist:last 2 versions - 使用显式 browserslist 查询(配置将被忽略)
  • browserslist:/path/to/config - 明确指定 browserslist 配置路径
  • browserslist:/path/to/config:modern - 明确指定 browserslist 的配置路径和环境

Node.js 版本

可以选择指定一个 node 或 electron 的版本。这在上表中用 [[X].Y] 表示。

rspack.config.js
module.exports = {
  // ...
  target: 'node18.12',
};

当 Rspack 生成运行时代码时,这有助于确定所能使用的 ES 特性(所有的代码块和模块都被运行时代码包裹)。

target: false

如果上述列表中的预设 target 都不符合你的需求,你可以将 target 设置为 false,这将告诉 Rspack 不使用任何插件。

rspack.config.js
module.exports = {
  // ...
  target: false,
};