SWC 1.0のご紹介

SWCとは？

swc（新しいタブで開きます）（Speedy Web Compiler）は、超高速なJavaScriptコンパイラです。

SWCの機能

TypeScript / jsx / ECMAScript 2019をブラウザと互換性のあるJavaScriptに変換できます。

// input.js
 
class Foo {
  set foo(v) {}
}
class Bar extends Foo {
  get bar1() {}
  async bar2() {}
}

SWCの速度

シングルコア同期ベンチマークでは、Babelよりも16〜20倍高速です。SWCはワーカースレッドで動作するのに対し、Babelはイベントループスレッドで動作するため、実際のパフォーマンス差はさらに大きくなります。

インストール

swc は以下を使用してインストールできます。

# if you use npm
npm i -D @swc/core
 
# if you use yarn
yarn add -D @swc/core

詳細は、はじめにをご覧ください。

SWC 1.0に含まれるもの

SwcはほとんどすべてのBabelプラグインを実装しています。1.0.0現在、swcは様々なECMAScript方言を理解し、それらをES5にコンパイルできます。

ECMAScript 2019サポート

.swcrc:

{
  "jsc": {
    "parser": {
      "syntax": "ecmascript"
    }
  }
}

React（jsx付き）

.swcrc:

{
  "jsc": {
    "parser": {
      "syntax": "ecmascript",
      "jsx": true
    }
  }
}

TypeScriptサポート

SwcはTypeScript / tsxもECMAScriptにコンパイルできます。執筆時点では型チェックを行いません。型チェックは#126（新しいタブで開きます）で追跡されています。

.swcrc:

{
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": false
    }
  }
}

詳細は、ドキュメントをご覧ください。

様々な変換

• es3

  • member-expression-literals
  • property-literals
  • reserved-words

• es2015

  • arrow-functions
  • block-scoped-functions
  • block-scoping
  • classes
  • computed-properties
  • destructuring
  • duplicate-keys
  • for-of
  • function-name
  • instanceof
  • literals
  • new-target
  • parameters
  • shorthand-properties
  • spread
  • スティッキー正規表現（yフラグ）
  • template-literals
  • typeof-symbol

• es2016

  • exponentiation-operator

• es2017

  • async-to-generator

• es2018

  • object-rest-spread

• react

  • jsx

Babelからの移行

@babel/core

npm i --save-dev @swc/core または yarn add --dev @swc/core を実行します。

Swcはデフォルトですべてのパスを有効にします。標準のECMAScriptのみを使用している場合は、.babelrc を削除し、babel.transform() を swc.transform() に変更するだけです。

詳細は、使用方法に関するドキュメントと移行に関するドキュメントをご覧ください。また、swcは現在カスタムプラグインをサポートしていません。

@babel/cli

npm i --save-dev @swc/core @swc/cli または yarn add --dev @swc/core @swc/cli を実行してインストールします。@swc/cli のCLI APIは@babel/cli とほぼ同等です。そのため、標準のECMAScriptを使用している場合は、npx babel を npx swc に置き換えるだけです。エラーが発生した場合は、エラーを報告してください（新しいタブで開きます）。

詳細は、使用方法に関するドキュメントと移行に関するドキュメントをご覧ください。また、swcは現在カスタムプラグインをサポートしていません。