编译
SWC 的编译开箱即用,不需要自定义。 您可以选择覆盖配置。 以下是默认值
{
"jsc": {
"parser": {
"syntax": "ecmascript",
"jsx": false,
"dynamicImport": false,
"privateMethod": false,
"functionBind": false,
"exportDefaultFrom": false,
"exportNamespaceFrom": false,
"decorators": false,
"decoratorsBeforeExport": false,
"topLevelAwait": false,
"importMeta": false,
"preserveAllComments": false
},
"transform": null,
"target": "es5",
"loose": false,
"externalHelpers": false,
// Requires v1.2.50 or upper and requires target to be es2016 or upper.
"keepClassNames": false
},
"isModule": false
}
env
SWC 为 preset-env
提供了一种替代方案。 您可以
- 设置目标浏览器
- 使用
browserslist
- 控制转换
使用 env
条目。 请注意,这与 jsc.target
不兼容。
env.targets
可能的值
- 查询:
string
示例
{
"jsc": {
"parser": {
"syntax": "typescript",
"tsx": true,
},
"externalHelpers": true
},
"env": {
"targets": "Chrome >= 48"
}
}
-
查询:
string[]
-
每个浏览器的版本:
Map<String, Version>
针对 chrome 79
的示例。
{
"env": {
"targets": {
"chrome": "79",
}
},
}
env.mode
可选。 可能的值: "usage" | "entry" | false
,默认为 false
。
env.debug
可选。 类型:布尔值
启用调试日志记录。
env.dynamicImport
可选。 类型:布尔值
env.loose
可选。 类型:布尔值
启用宽松模式。 另请参阅 jsc.loose。
env.skip
可选。 类型: string[]
env.include
可选。 类型: string[]
要包含的功能或模块。
在针对 chrome 79 的同时启用 async
/yield
转换的示例。
{
"env": {
"targets": {
"chrome": "79",
},
"include": [
"transform-async-to-generator",
"transform-regenerator",
],
},
}
env.exclude
可选。 类型: string[]
要排除的功能或模块。
env.coreJs
可选。 类型: string
{
"jsc": {
"parser": {
"syntax": "ecmascript",
"jsx": true
}
},
"env": {
"mode": "usage",
"coreJs": "3.26.1"
}
}
env.path
可选。 目前是 noop。
env.shippedProposals
可选。 类型:布尔值
env.forceAllTransforms
可选。 类型:布尔值
env.bugfixes
可选。 类型:布尔值
启用错误修复传递。
jsc.externalHelpers
{
"jsc": {
"externalHelpers": true
}
}
输出代码可能依赖于辅助函数来支持目标环境。 默认情况下,辅助函数会内联到需要它的输出文件中。
您可以通过启用 externalHelpers
来使用来自外部模块的辅助函数,并且辅助函数代码将从 node_modules/@swc/helpers
由输出文件导入。
在捆绑时,此选项将大大减少您的文件大小。
除了 @swc/core
之外,您还必须添加 @swc/helpers
作为依赖项。
jsc.parser
typescript
{
"jsc": {
"parser": {
"syntax": "typescript",
"tsx": false,
"decorators": false,
"dynamicImport": false
}
}
}
ecmascript
{
"jsc": {
"parser": {
"syntax": "ecmascript",
"jsx": false,
"dynamicImport": false,
"privateMethod": false,
"functionBind": false,
"classPrivateProperty": false,
"exportDefaultFrom": false,
"exportNamespaceFrom": false,
"decorators": false,
"decoratorsBeforeExport": false,
"importMeta": false
}
}
}
jsc.target
从 @swc/core
v1.0.27 开始,您可以使用该字段指定目标环境。
{
"jsc": {
// Disable es3 / es5 / es2015 transforms
"target": "es2016"
}
}
jsc.loose
从 @swc/core
v1.1.4 开始,您可以通过启用 jsc.loose
来启用“宽松”转换,其工作方式类似于 babel-preset-env
宽松模式 (在新标签页中打开).
默认情况下,这些 假设 (在新标签页中打开) 在宽松模式下被使用,如果您的代码不满足这些假设,您可能会得到意外的结果。
- privateFieldsAsProperties (在新标签页中打开)
- setPublicClassFields (在新标签页中打开)
- constantSuper (在新标签页中打开)
- noDocumentAll (在新标签页中打开)
- pureGetters (在新标签页中打开)
- objectRestNoSymbols (在新标签页中打开)
- setSpreadProperties (在新标签页中打开)
- ignoreFunctionName
- ignoreFunctionLength (在新标签页中打开)
- ignoreToPrimitiveHint (在新标签页中打开)
- mutableTemplateObject (在新标签页中打开)
- noClassCalls (在新标签页中打开)
- setClassMethods (在新标签页中打开)
- superIsCallableConstructor (在新标签页中打开)
- iterableIsArray (在新标签页中打开)
{
"jsc": {
"loose": true
}
}
jsc.transform
{
"jsc": {
"transform": {
"react": {
"pragma": "React.createElement",
"pragmaFrag": "React.Fragment",
"throwIfNamespace": true,
"development": false,
"useBuiltins": false
},
"optimizer": {
"globals": {
"vars": {
"__DEBUG__": "true"
}
}
}
}
}
}
jsc.transform.legacyDecorator
您可以使用旧版(第 1 阶段)类装饰器语法和行为。
{
"jsc": {
"parser": {
"syntax": "ecmascript",
"decorators": true
},
"transform": {
"legacyDecorator": true
}
}
}
jsc.transform.decoratorMetadata
此功能需要 v1.2.13+
。
如果您使用的是 typescript 并且使用启用了 emitDecoratorMetadata
的装饰器,您可以使用 swc
进行更快的迭代
{
"jsc": {
"parser": {
"syntax": "typescript",
"decorators": true
},
"transform": {
"legacyDecorator": true,
"decoratorMetadata": true
}
}
}
jsc.transform.react
jsc.transform.react.runtime
可能的值:automatic
,classic
。这会影响 JSX 源代码的编译方式。
- 默认值为
classic
。 - 使用
runtime: automatic
来使用 JSX 运行时模块(例如 React 17 中引入的react/jsx-runtime
)。 - 使用
runtime: classic
来使用React.createElement
代替 - 使用此选项,您必须确保在使用 JSX 时React
在作用域内。
jsc.transform.react.importSource
- 默认值为
react
。 - 当使用
runtime: automatic
时,确定要导入的运行时库。 - 此选项可以通过
@jsxImportSource foo
覆盖。
jsc.transform.react.pragma
- 默认值为
React.createElement
。 - 当使用
runtime: classic
时,替换编译 JSX 表达式时使用的函数。 - 此选项可以通过
@jsx foo
覆盖。
jsc.transform.react.pragmaFrag
- 默认值为
React.Fragment
- 替换编译 JSX 片段时使用的组件。
- 此选项可以通过
@jsxFrag foo
覆盖。
jsc.transform.react.throwIfNamespace
切换是否在使用 XML 命名空间标签名时抛出错误。例如:<f:image />
虽然 JSX 规范允许这样做,但默认情况下它是禁用的,因为 React 的 JSX 目前不支持它。
jsc.transform.react.development
切换从 JSX 生成的元素上的调试属性 __self
和 __source
,这些属性由 React 开发者工具等开发工具使用。
此选项会根据 Webpack mode
设置自动设置,当与 swc-loader
一起使用时。请参阅 使用 swc 与 webpack.
jsc.transform.react.useBuiltins
使用 Object.assign()
代替 _extends
。默认值为 false。
jsc.transform.react.refresh
启用 react-refresh (在新标签页中打开) 相关的转换。默认值为 false
,因为它被认为是实验性的。
传递 refresh: true
来启用此功能,或者传递一个包含以下内容的对象
interface ReactRefreshConfig {
refreshReg: String;
refreshSig: String;
emitFullSignatures: boolean;
}
jsc.transform.constModules
{
"jsc": {
"transform": {
"constModules": {
"globals": {
"@ember/env-flags": {
"DEBUG": "true"
},
"@ember/features": {
"FEATURE_A": "false",
"FEATURE_B": "true"
}
}
}
}
}
}
然后,像这样的源代码
import { DEBUG } from "@ember/env-flags";
import { FEATURE_A, FEATURE_B } from "@ember/features";
console.log(DEBUG, FEATURE_A, FEATURE_B);
被转换为
console.log(true, false, true);
jsc.transform.optimizer
SWC 优化器假设
- 它是一个模块或被包装在一个 iife 中。
- 访问(获取)全局变量没有副作用。它与 google closure compiler 的假设相同。
- 您不会向文字添加字段,例如数字文字、正则表达式或字符串文字。
- 文件以 gzip 形式提供。
SWC 不会专注于减少非 gzip 文件的大小。
将此设置为 undefined
会跳过优化器传递。
jsc.transform.optimizer.simplify
需要
v1.2.101+
您可以将其设置为 false
以使用 inline_globals
,同时跳过优化。
{
"jsc": {
"transform": {
"optimizer": {
"simplify": false,
"globals": {
"vars": {
"__DEBUG__": "true"
}
}
}
}
}
}
jsc.transform.optimizer.globals
需要
v1.2.101+
vars
- 要内联的变量。typeofs
- 如果您设置{ "window": "object" }
,typeof window
将被替换为"object"
。
{
"jsc": {
"transform": {
"optimizer": {
"globals": {
"vars": {
"__DEBUG__": "true"
}
}
}
}
}
}
然后,您可以像这样使用它 npx swc '__DEBUG__' --filename input.js
。
jsc.transform.optimizer.jsonify
需要
v1.1.1+
minCost
- 如果解析纯对象字面量的成本大于此值,则对象字面量将转换为JSON.parse('{"foo": "bar"}')
。默认为 1024。
{
"jsc": {
"transform": {
"optimizer": {
"jsonify": {
"minCost": 0
}
}
}
}
}
这将把所有 **纯** 对象字面量更改为 JSON.parse("")
。
jsc.keepClassNames
需要
v1.2.50+
以及目标为 es2016 或更高版本
启用此选项将使 swc 保留原始类名。
jsc.paths
需要
v1.2.62+
语法与 tsconfig.json
相同:了解更多 (opens in a new tab).
需要 jsc.baseUrl
。见下文。
jsc.baseUrl
路径必须指定为绝对路径。
jsc.minify
需要
v1.2.67+
有关更多详细信息,请参阅 缩小文档。
jsc.experimental
jsc.experimental.keepImportAssertions
保留导入断言。这是实验性的,因为导入断言尚未被 ecmascript 规范涵盖。
jsc.experimental.plugins
它遵循 node.js 的解析规则。
像这样指定插件名称
{
"jsc": {
"experimental": {
"plugins": [
["@swc/plugin-styled-jsx", {}]
]
}
}
}
styled-jsx
工作是因为它发布为 @swc/plugin-styled-jsx
。
jsc.preserveAllComments
指示在编译期间应保留所有注释。来自源代码的注释可能会被移动以保留它们从源代码到编译输出的相对位置。此功能对于需要注释保持相对靠近源代码的转译很有用:例如,在测试下带有 istanbul-ignore 覆盖注释的文件。
jsc.transform.useDefineForClassFields
可能的值
true
:
class Foo {
init = 3;
}
console.log(Foo.init)
将被编译为
class Foo {
constructor(){
// Helper
_defineProperty(this, "init", 3);
}
}
console.log(Foo.init);
false
:
class Foo {
init = 3;
}
console.log(Foo.init)
将被编译为
class Foo {
constructor(){
this.init = 3;
}
}
console.log(Foo.init);
jsc.transform.decoratorVersion
从 v1.3.47
开始,您可以使用第 3 阶段装饰器。
{
"jsc": {
"parser": {
"syntax": "ecmascript",
"decorators": true
},
"transform": {
"decoratorVersion": "2022-03"
}
}
}
可能的值
"2021-12"
(默认)
传统装饰器。
"2022-03"
第 3 阶段装饰器。
jsc.output
jsc.output.charset
可能的值:utf8
,ascii
。
这可用于保持输出为纯 ASCII。
多个条目
需要
v1.0.47+
[
{
"test": ".*\\.js$",
"module": {
"type": "commonjs"
}
},
{
"test": ".*\\.ts$",
"module": {
"type": "amd"
}
}
]
这使得 SWC 将 JavaScript 文件编译为 CommonJS 模块,并将 TypeScript 文件编译为 AMD 模块。
注意,test
选项可用于仅转译 TypeScript 文件,例如
{
"test": ".*\\.ts$",
"jsc": {
"parser": {
"syntax": "typescript",
"tsx": false,
"decorators": true,
"dynamicImport": true
}
}
}
test
类型:Regex / Regex[]
{
"test": ".*\\.ts$",
"jsc": {
"parser": {
"syntax": "typescript",
"tsx": false,
"decorators": true,
"dynamicImport": true
}
}
}
exclude
类型:Regex / Regex[]
{
"exclude": [".*\\.js$", ".*\\.map$"],
"jsc": {
"parser": {
"syntax": "typescript",
"tsx": false,
"decorators": true,
"dynamicImport": true
}
}
}
sourceMaps
需要
v1.2.50+
通过在 .swcrc
中添加 sourceMaps: true
或 sourceMaps: 'inline'
来启用源映射。
{
"sourceMaps": true
}
inlineSourcesContent
需要
v1.2.101+
默认为 true
。如果您想让 swc
将文件内容存储到源映射中,您可以将 inlineSourcesContent
设置为 true
。
{
"sourceMaps": true,
"inlineSourcesContent": true
}
isModule
可能的值:true
,false
,"unknown"
用于将输入视为模块或脚本。如果将其设置为 unknown
,如果它是 esm,则将为 Module
,否则为 Script
。