コンパイル

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`

オプション。タイプ: Bool

デバッグログを有効にします。

`env.dynamicImport`

オプション。タイプ: Bool

`env.loose`

オプション。タイプ: Bool

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`

オプション。現在は機能しません。

`env.shippedProposals`

オプション。タイプ: Bool

`env.forceAllTransforms`

オプション。タイプ: Bool

`env.bugfixes`

オプション。タイプ: Bool

バグ修正パスを有効にします。

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 を有効にすることで「loose」変換を有効にできます。これは、babel-preset-env の loose モード（新しいタブで開きます）のように機能します。

⚠️

これらの前提条件（新しいタブで開きます）は、デフォルトでlooseモードで行われます。コードがこれらの前提条件を満たしていない場合、予期しない結果が生じる可能性があります。

.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+ が必要です。

emitDecoratorMetadata が有効になっているtypescriptとデコレータを使用している場合、swc を使用して、より高速なイテレーションを行うことができます。

.swcrc

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

jsc.transform.react

jsc.transform.react.runtime

使用可能な値: automatic、classic。これは、JSXソースコードのコンパイル方法に影響します。

デフォルトは classic です。
JSXランタイムモジュール（React 17で導入されたreact/jsx-runtime など）を使用するには、runtime: automatic を使用します。
React.createElement を代わりに使用するには、runtime: classic を使用します。このオプションを使用する場合は、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 設定に基づいて自動的に設定されます。webpack で swc を使用するを参照してください。

jsc.transform.react.useBuiltins

_extends の代わりに Object.assign() を使用します。デフォルトは 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+ が必要です。

最適化をスキップしながら inline_globals を使用するには、これを false に設定できます。

.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", {}]
      ]
    }
  }
}

@swc/plugin-styled-jsx として公開されているため、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

種類: 正規表現 / 正規表現[]

.swcrc

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

除外

種類: 正規表現 / 正規表現[]

.swcrc

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

ソースマップ

v1.2.50+が必要です

ソースマップを有効にするには、.swcrcにsourceMaps: trueまたはsourceMaps: 'inline'を追加します。

.swcrc

{
  "sourceMaps": true
}

インラインソースコンテンツ

v1.2.101+ が必要です。

デフォルトはtrueです。swcにファイルの内容をソースマップに保存させる場合は、inlineSourcesContentをtrueに設定します。

.swcrc

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

モジュールか

使用可能な値: true, false, "unknown"

入力をモジュールまたはスクリプトとして扱うために使用されます。これがunknownに設定されている場合、esmの場合はModule、そうでない場合はScriptになります。

最終更新日 2024年4月18日

.swcrc サポートされているブラウザ