跳至内容
文档
配置
编译

编译

SWC 的编译开箱即用,不需要自定义。 您可以选择覆盖配置。 以下是默认值

.swcrc
{
  "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

示例

.swcrc
{
    "jsc": {
        "parser": {
            "syntax": "typescript",
            "tsx": true,
        },
        "externalHelpers": true
    },
    "env": {
        "targets": "Chrome >= 48"
    }
}
 
  • 查询: string[]

  • 每个浏览器的版本: Map<String, Version>

针对 chrome 79 的示例。

.swcrc
{
    "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 转换的示例。

.swcrc
{
    "env": {
        "targets": {
            "chrome": "79",
        },
        "include": [
            "transform-async-to-generator",
            "transform-regenerator",
        ],
    },
}

env.exclude

可选。 类型: string[]

要排除的功能或模块。

env.coreJs

可选。 类型: string

.swcrc
{
    "jsc": {
        "parser": {
            "syntax": "ecmascript",
            "jsx": true
        }
    },
    "env": {
        "mode": "usage",
        "coreJs": "3.26.1"
    }
}

env.path

可选。 目前是 noop。

env.shippedProposals

可选。 类型:布尔值

env.forceAllTransforms

可选。 类型:布尔值

env.bugfixes

可选。 类型:布尔值

启用错误修复传递。

jsc.externalHelpers

.swcrc
{
  "jsc": {
    "externalHelpers": true
  }
}

输出代码可能依赖于辅助函数来支持目标环境。 默认情况下,辅助函数会内联到需要它的输出文件中。

您可以通过启用 externalHelpers 来使用来自外部模块的辅助函数,并且辅助函数代码将从 node_modules/@swc/helpers 由输出文件导入。

在捆绑时,此选项将大大减少您的文件大小。

除了 @swc/core 之外,您还必须添加 @swc/helpers 作为依赖项。

jsc.parser

typescript

.swcrc
{
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": false,
      "decorators": false,
      "dynamicImport": false
    }
  }
}

ecmascript

.swcrc
{
  "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 开始,您可以使用该字段指定目标环境。

.swcrc
{
  "jsc": {
    // Disable es3 / es5 / es2015 transforms
    "target": "es2016"
  }
}

jsc.loose

@swc/core v1.1.4 开始,您可以通过启用 jsc.loose 来启用“宽松”转换,其工作方式类似于 babel-preset-env 宽松模式 (在新标签页中打开).

.swcrc
{
  "jsc": {
    "loose": true
  }
}

jsc.transform

.swcrc
{
  "jsc": {
    "transform": {
      "react": {
        "pragma": "React.createElement",
        "pragmaFrag": "React.Fragment",
        "throwIfNamespace": true,
        "development": false,
        "useBuiltins": false
      },
      "optimizer": {
        "globals": {
          "vars": {
            "__DEBUG__": "true"
          }
        }
      }
    }
  }
}

jsc.transform.legacyDecorator

您可以使用旧版(第 1 阶段)类装饰器语法和行为。

.swcrc
{
  "jsc": {
    "parser": {
      "syntax": "ecmascript",
      "decorators": true
    },
    "transform": {
      "legacyDecorator": true
    }
  }
}

jsc.transform.decoratorMetadata

此功能需要 v1.2.13+

如果您使用的是 typescript 并且使用启用了 emitDecoratorMetadata 的装饰器,您可以使用 swc 进行更快的迭代

.swcrc
{
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "decorators": true
    },
    "transform": {
      "legacyDecorator": true,
      "decoratorMetadata": true
    }
  }
}

jsc.transform.react

jsc.transform.react.runtime

可能的值:automaticclassic。这会影响 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

.swcrc
{
  "jsc": {
    "transform": {
      "constModules": {
        "globals": {
          "@ember/env-flags": {
            "DEBUG": "true"
          },
          "@ember/features": {
            "FEATURE_A": "false",
            "FEATURE_B": "true"
          }
        }
      }
    }
  }
}

然后,像这样的源代码

source.js
import { DEBUG } from "@ember/env-flags";
import { FEATURE_A, FEATURE_B } from "@ember/features";
 
console.log(DEBUG, FEATURE_A, FEATURE_B);

被转换为

output.js
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,同时跳过优化。

.swcrc
{
  "jsc": {
    "transform": {
      "optimizer": {
        "simplify": false,
        "globals": {
          "vars": {
            "__DEBUG__": "true"
          }
        }
      }
    }
  }
}

jsc.transform.optimizer.globals

需要 v1.2.101+

  • vars - 要内联的变量。
  • typeofs - 如果您设置 { "window": "object" }typeof window 将被替换为 "object"
.swcrc
{
  "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。
.swcrc
{
  "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

路径必须指定为绝对路径。

了解更多 (opens in a new tab).

jsc.minify

需要 v1.2.67+

有关更多详细信息,请参阅 缩小文档

jsc.experimental

jsc.experimental.keepImportAssertions

保留导入断言。这是实验性的,因为导入断言尚未被 ecmascript 规范涵盖。

jsc.experimental.plugins

它遵循 node.js 的解析规则。

像这样指定插件名称

.swcrc
{
  "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 阶段装饰器。

.swcrc
{
    "jsc": {
        "parser": {
            "syntax": "ecmascript",
            "decorators": true
        },
        "transform": {
            "decoratorVersion": "2022-03"
        }
    }
}

可能的值

  • "2021-12" (默认)

传统装饰器。

  • "2022-03"

第 3 阶段装饰器。

jsc.output

jsc.output.charset

可能的值:utf8ascii

这可用于保持输出为纯 ASCII。

多个条目

需要 v1.0.47+

[
  {
    "test": ".*\\.js$",
    "module": {
      "type": "commonjs"
    }
  },
  {
    "test": ".*\\.ts$",
    "module": {
      "type": "amd"
    }
  }
]

这使得 SWC 将 JavaScript 文件编译为 CommonJS 模块,并将 TypeScript 文件编译为 AMD 模块。

注意,test 选项可用于仅转译 TypeScript 文件,例如

.swcrc
{
  "test": ".*\\.ts$",
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": false,
      "decorators": true,
      "dynamicImport": true
    }
  }
}

test

类型:Regex / Regex[]

.swcrc
{
  "test": ".*\\.ts$",
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": false,
      "decorators": true,
      "dynamicImport": true
    }
  }
}

exclude

类型:Regex / Regex[]

.swcrc
{
  "exclude": [".*\\.js$", ".*\\.map$"],
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": false,
      "decorators": true,
      "dynamicImport": true
    }
  }
}

sourceMaps

需要 v1.2.50+

通过在 .swcrc 中添加 sourceMaps: truesourceMaps: 'inline' 来启用源映射。

.swcrc
{
  "sourceMaps": true
}

inlineSourcesContent

需要 v1.2.101+

默认为 true。如果您想让 swc 将文件内容存储到源映射中,您可以将 inlineSourcesContent 设置为 true

.swcrc
{
  "sourceMaps": true,
  "inlineSourcesContent": true
}

isModule

可能的值:truefalse"unknown"

用于将输入视为模块或脚本。如果将其设置为 unknown,如果它是 esm,则将为 Module,否则为 Script

上次更新于 2024 年 4 月 18 日