CC 4.0 授權

本節內容源自以下連結的內容，並受 CC BY 4.0 授權約束。
https://webpack.dev.org.tw/configuration/target/
若未特別說明，以下內容可視為在原始內容基礎上修改和刪除的結果。

目標

用於配置 Rspack 輸出的目標環境和 Rspack 運行時程式碼的 ECMAScript 版本。

字串

目前支援以下選項

選項	描述
`'web'`	編譯為瀏覽器環境中可用的程式碼 (預設)
`'webworker'`	編譯為 Web Worker
`'browserslist'`	根據已設定的 browserslist 推斷 ES 功能版本 (如果 browserslist 設定可用則為預設值)
`'node[[X].Y]'`	編譯為 Node.js 環境可用的程式碼
`'async-node[[X].Y]'`	編譯為類似 Node.js 環境中使用的程式碼 (使用 fs 和 vm 非同步載入程式碼片段)
`'esX'`	將 Rspack 運行時編譯為對應的 ECMAScript 版本。目前支援 `es3`、`es5`、`es2015`、`es2016`、`es2017`、`es2018`、`es2019`、`es2020`、`es2021`、`es2022` (預設使用 es5)
`'electron[[X].Y]-main'`	為 Electron 的主程序編譯。
`'electron[[X].Y]-renderer'`	為 Electron 的渲染程序編譯，為瀏覽器環境提供使用 `array-push` 作為程式碼片段格式和 `jsonp` 作為程式碼片段載入的目標，以及為 CommonJS 和 Electron 內建模組提供 `NodeTargetPlugin` 和 `ExternalsPlugin`。
`'electron[[X].Y]-preload'`	為 Electron 渲染程序的預載入腳本編譯
`'nwjs[[X].Y]'`	編譯為 NW.js 環境可用的程式碼
`'node-webkit[[X].Y]'`	編譯為 node-webkit 環境可用的程式碼

esX 的範圍

target 配置中的 esX 只能指定 Rspack 運行時程式碼的 ECMAScript 版本。如果要指定使用者程式碼的 ECMAScript 版本，可以使用builtin:swc-loader或babel-loader來降級使用者程式碼。

指定編譯器需要編譯為 Node.js 環境

rspack.config.js

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

當傳遞多個目標時，將使用功能的公共子集

rspack.config.js

module.exports = {
  // Rspack will generate a runtime code for web platform and will use only ES5 features
  target: ['web', 'es5'],
};

請注意，目前並非所有目標都能混合使用。當指定編譯器需要為多個平台編譯時，會回報錯誤。

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 設置為 false，這將指示 Rspack 不使用任何插件。

rspack.config.js

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

本頁內容