Skip to content
博客
SWC 1.0 介绍

Introducing SWC 1.0

February 8th, 2019 by DongYoon Kang

What is SWC?

swc (opens in a new tab) (speedy web compiler) is a super-fast JavaScript compiler.

What can SWC do?

It can transpile TypeScript / jsx / ECMAScript 2019 to browser-compatible JavaScript.

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

How fast is SWC?

It's 16x - 20x faster than babel even on single-core synchronous benchmark. Note that actual performance gap is larger because swc works on worker thread while babel works on event loop thread.

Installation

You can install swc with

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

See Getting Started for more details.

What's included in SWC 1.0?

Swc implements almost all babel plugins. As of 1.0.0, swc can understand various dialects of ecmascript and compiles them into es5.

ECMAScript 2019 support

.swcrc:

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

React (with jsx)

.swcrc:

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

TypeScript support

Swc can also compile typescript / tsx to ecmascript. Note that it does not type-check at the time of writing. Type checking is tracked at #126 (opens in a new tab).

.swcrc:

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

See docs for more details.

Various Transforms

  • 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
    • sticky regex (y flag)
    • template-literals
    • typeof-symbol
  • es2016

    • exponentiation-operator
  • es2017

    • async-to-generator
  • es2018

    • object-rest-spread
  • react

    • jsx

Migrating from Babel

@babel/core

Run npm i --save-dev @swc/core or yarn add --dev @swc/core.

Swc enables all passes by default. So if you are using only standard ecmascript, you can just delete .babelrc and change babel.transform() to swc.transform().

See usage docs and migration docs for more details. Also note that swc does not support custom plugin yet.

@babel/cli

Run npm i --save-dev @swc/core @swc/cli or yarn add --dev @swc/core @swc/cli to install. CLI apis of @swc/cli is almost equivalent to it of @babel/cli. So if you are using standard ecmascript, you can just replace npx babel to npx swc. If it results in an error, please report an error (opens in a new tab).

See usage docs and migration docs for more details. Also note that swc does not support custom plugins yet.