內建 swc-loader
builtin:swc-loader 是 Rust 版本的 swc-loader，旨在提供更好的效能。此 Loader 的 設定 與 JS 版本的 swc-loader 對齊。
範例
如果需要在專案中使用 builtin:swc-loader，請依照以下方式設定：
TypeScript 轉譯
轉譯 .ts 檔案：
module.exports = {
module: {
rules: [
{
test: /\.ts$/,
exclude: [/node_modules/],
loader: 'builtin:swc-loader',
options: {
jsc: {
parser: {
syntax: 'typescript',
},
},
},
type: 'javascript/auto',
},
],
},
};
JSX 轉譯
轉譯 React 的 .jsx 檔案：
module.exports = {
module: {
rules: [
{
test: /\.jsx$/,
use: {
loader: 'builtin:swc-loader',
options: {
jsc: {
parser: {
syntax: 'ecmascript',
jsx: true,
},
transform: {
react: {
pragma: 'React.createElement',
pragmaFrag: 'React.Fragment',
throwIfNamespace: true,
development: false,
useBuiltins: false,
},
},
},
},
},
type: 'javascript/auto',
},
],
},
};
語法降級
SWC 提供 jsc.target 和 env.targets 來指定 JavaScript 語法降級的目標。
jsc.target
jsc.target 用於指定 ECMA 版本，例如 es5、es2015、es2016 等。
module.exports = {
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'builtin:swc-loader',
options: {
jsc: {
target: 'es2015',
},
// ...other options
},
},
},
],
},
};
env.targets
env.targets 使用 browserslist 語法來指定瀏覽器範圍，例如：
module.exports = {
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'builtin:swc-loader',
options: {
env: {
targets: [
'chrome >= 87',
'edge >= 88',
'firefox >= 78',
'safari >= 14',
],
},
// ...other options
},
},
},
],
},
};
提示
jsc.target 和 env.targets 不能同時設定，請根據您的需求選擇其中一種。
Polyfill 注入
在專案中使用較高版本的 JavaScript 語法和 API 時，為了確保編譯後的程式碼可以在較低版本的瀏覽器中執行，通常需要執行兩個部分的降級：語法降級和 polyfill 注入。
SWC 支援注入 core-js 作為 API polyfill，可以使用 env.mode 和 env.coreJs 進行設定。
module.exports = {
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'builtin:swc-loader',
options: {
env: {
mode: 'usage',
coreJs: '3.26.1',
targets: [
'chrome >= 87',
'edge >= 88',
'firefox >= 78',
'safari >= 14',
],
},
// ...other options
},
},
},
],
},
};
型別宣告
您可以使用 @rspack/core 匯出的 SwcLoaderOptions 型別來啟用型別提示
module.exports = {
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'builtin:swc-loader',
/** @type {import('@rspack/core').SwcLoaderOptions} */
options: {
// some options
},
},
},
],
},
};
import type { SwcLoaderOptions } from '@rspack/core';
export default {
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'builtin:swc-loader',
options: {
// some options
} satisfies SwcLoaderOptions,
},
},
],
},
};
選項
以下是一些 SWC 設定和 Rspack 特定設定的介紹。完整的選項請參考 SWC 設定。
jsc.experimental.plugins
警告
Wasm 外掛與 SWC 的版本高度耦合，您需要選擇與對應 SWC 版本相容的 Wasm 外掛才能正常運作。selecting-swc-core。
您可以在這裡查看更多關於如何選擇正確 Wasm 外掛版本的相容性資訊：
Rspack 支援在 builtin:swc-loader 中載入 Wasm 外掛，您可以指定外掛名稱，例如：
module.exports = {
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'builtin:swc-loader',
options: {
jsc: {
experimental: {
plugins: [
[
'@swc/plugin-remove-console',
{
exclude: ['error'],
},
],
],
},
},
},
},
},
],
},
};
這是一個關於 Wasm 外掛用法的 範例。
rspackExperiments
由 Rspack 提供的實驗性功能。
rspackExperiments.import
從 babel-plugin-import 移植而來，設定基本上相同。
函式不能在設定中使用，例如 customName、customStyleName，它們會造成一些效能開銷，因為這些函式必須從 Rust 呼叫，受到 modularize_imports 的啟發，一些簡單的函式可以用樣板字串代替。因此，諸如 customName、customStyleName 之類的函式型別設定可以以字串形式作為樣板傳入，以取代函式並提高效能。
例如：
import { MyButton as Btn } from 'foo';
套用以下設定：
rspack.config.js
module.exports = {
module: {
rules: [
{
use: 'builtin:swc-loader',
options: {
...
rspackExperiments: {
import: [{
libraryName: 'foo',
customName: 'foo/es/{{ member }}',
}]
}
}
}
]
}
};
{{ member }} 將被匯入的 specifier 取代。
import Btn from 'foo/es/MyButton';
樣板 customName: 'foo/es/{{ member }}' 與 customName: (member) => `foo/es/${member}` 相同，但樣板字串沒有 Node-API 的效能開銷。
此處使用的樣板是 handlebars。有一些有用的內建 helper，以上述匯入語句為例：
rspack.config.js
module.exports = {
module: {
rules: [
{
use: 'builtin:swc-loader',
options: {
...
rspackExperiments: {
import: [{
libraryName: 'foo',
customName: 'foo/es/{{ kebabCase member }}',
}]
}
}
}
]
}
};
轉換為：
import Btn from 'foo/es/my-button';
除了 kebabCase 之外，還可以使用 camelCase、snakeCase、upperCase、lowerCase 和 legacyKebabCase/legacySnakeCase。
legacyKebabCase/legacySnakeCase 的運作方式與 1.13.7 之前的 babel-plugin-import 版本相同。
您可以查看 babel-plugin-import 的文件以了解其他設定。
以經典的 4.x 版本 ant-design 為例，我們只需要如下設定：
rspack.config.js
module.exports = {
module: {
rules: [
{
use: 'builtin:swc-loader',
options: {
...
rspackExperiments: {
import: [
{
libraryName: 'antd',
style: '{{member}}/style/index.css',
},
]
}
}
}
]
}
};
上述設定會將 import { Button } from 'antd'; 轉換為：
import Button from 'antd/es/button';
import 'antd/es/button/style/index.css';
然後您會看到樣式檔案會自動匯入並套用在頁面上。
當然，如果您已經設定了對 less 的支援，您可以直接使用以下設定：
rspack.config.js
module.exports = {
module: {
rules: [
{
use: 'builtin:swc-loader',
options: {
...
rspackExperiments: {
import: [
{
libraryName: 'antd',
style: true,
},
]
}
}
}
]
}
};
上述設定會將 import { Button } from 'antd'; 轉換為：
import Button from 'antd/es/button';
import 'antd/es/button/style';
