介紹 SWC 1.0

SWC 是什麼？

swc（在新分頁中開啟）（快速的網路編譯器）是一個超級快速的 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

  • 成員表達式文字
  • 屬性文字
  • 保留字

• es2015

  • 箭頭函式
  • 區塊作用函式
  • 區塊作用範圍
  • 類別
  • 計算屬性
  • 解構
  • 重複鍵
  • for-of
  • 函式名稱
  • instanceof
  • 文字
  • new-target
  • 參數
  • 速記屬性
  • 擴散
  • 黏著正規表示式 (y 旗標)
  • 樣板文字
  • typeof-symbol

• es2016

  • 指數運算子

• es2017

  • 非同步轉產生器

• es2018

  • 物件 rest 擴散

• 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 尚未支援自訂外掛。