61

swc –like Babel, but 16- 20 times faster (because Rust)

 5 years ago
source link: https://www.tuicool.com/articles/hit/aAvIrey
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Introduction

What is swc?

swc (speedy web compiler) is a super-fast javascript to 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

npm install --save-dev swc

or

yarn add --dev swc

Seeinstallation guide for more details.

What is included in swc 1.0.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 .

.swcrc :

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

Seedocs for more details.

Various transforms

  • es3

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

    y
    
  • es2016

    • exponentiation-operator
  • es2017

    • async-to-generator
  • es2018

    • object-rest-spread
  • react

    • jsx

Migrating from babel

@babel/core

Run npm i --save-dev swc or yarn add --dev swc .

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

Seeusage docs andmigration docs for more details. Also note that swc does not support custom plugin yet.

@babel/cli

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

Seeusage docs andmigration docs for more details. Also note that swc does not support custom plugin yet.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK