简体中文

Target

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

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 版本，当前支持 `es3`、`es5`、`es2015`、`es2016`、`es2017`、`es2018`、`es2019`、`es2020`、`es2021`、`es2022`（默认使用 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-loader 或 babel-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 配置，那么 Rspack 将会使用它：

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

什么是 Browserslist

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

支持的 browserslist 值：

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

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

rspack.config.js

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

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

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

rspack.config.js

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

ON THIS PAGE