内置 swc-loader
builtin:swc-loader 是 swc-loader 的 Rust 版本，旨在提供更好的性能。加载器的 配置 与 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 }} 将被导入的标识符替换
import Btn from 'foo/es/MyButton';
模板 customName: 'foo/es/{{ member }}' 等同于 customName: (member) => `foo/es/${member}` ，但模板字符串没有 Node-API 的性能开销。
这里使用的模板是 handlebars。有一些有用的内置助手，以上面的导入语句为例
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 的文档，了解其他配置。
以 ant-design 的经典 4.x 版本为例，我们只需要配置如下
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';
