編譯

編譯在 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`

可能的值

查詢：字串

範例

.swcrc

{
    "jsc": {
        "parser": {
            "syntax": "typescript",
            "tsx": true,
        },
        "externalHelpers": true
    },
    "env": {
        "targets": "Chrome >= 48"
    }
}

查詢：字串陣列
每個瀏覽器的版本：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`

選用。類型：字串

.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/helpers 作為相依項加入，才能使用 @swc/core。

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

可能的值：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 Developer Tools 等開發工具使用。

當與 swc-loader 搭配使用時，此選項會根據 Webpack mode 設定自動設定。請參閱使用 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 編譯器相同的假設。
您不會將欄位新增至文字常數，例如數字文字常數、正規表示式或字串文字常數。
檔案以 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 相同：了解更多（在新分頁中開啟）。

需要 jsc.baseUrl。請參閱下方。

jsc.baseUrl

路徑必須指定為絕對路徑。

了解更多（在新分頁中開啟）.

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

可能值：utf8、ascii。

這可以用於保持輸出僅為 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
    }
  }
}

排除

類型：Regex / Regex[]

.swcrc

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

sourceMaps

需要 v1.2.50+

透過加入 sourceMaps: true 或 sourceMaps: 'inline' 至 .swcrc 來啟用 source map。

.swcrc

{
  "sourceMaps": true
}

inlineSourcesContent

需要 v1.2.101+

預設為 true。如果您想要讓 swc 將檔案內容儲存在 sourcemap 中，您可以將 inlineSourcesContent 設定為 true。

.swcrc

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

isModule

可能的值：true、false、"unknown"

用於將輸入視為模組或腳本。如果將此設定為 unknown，則會是 Module（如果是 esm）或 Script（如果不是）。

上次更新於 2024 年 4 月 18 日

.swcrc 支援的瀏覽器