Babel外掛原理與配置

萬奎發表於2019-03-24
Babel

對於現如今的web前端開發，Babel已經成為前端開發必不可少的外掛了。它可以讓開發者使用高階版本的ES，從而讓開發更快速，程式碼更簡潔，而不必過多考慮各種瀏覽器的相容性。因為Bable可以解決這個問題，讓高版本的JS編譯為低版本的JS。那它的原理是什麼呢？

Babel做了什麼

image
Babel編譯分三個階段：

  • 解析 Parse
    babel通過babylon將程式碼解析生成抽象語法樹( 即AST )，簡單來說就是進行了詞法分析與語法分析的過程編譯過程。(擴充套件：一般來說每個 js 引擎都有自己的 AST，比如熟知的 v8，chrome 瀏覽器會把 js 原始碼轉換為抽象語法樹，再進一步轉換為位元組碼或機器程式碼)
  • 轉換 Transform
    babel 接受得到 AST 並通過 babel-traverse 對其進行遍歷，在此過程中進行新增、更新及移除等操作再生成新的AST。
  • 生成 Generate
    使用babel-generator轉換成JS。

babel-core模組則是將三者結合使得對外提供的API做了一個簡化。
babel只是轉譯新標準引入的語法，比如ES6箭頭函式：而新標準引入的新的原生物件，部分原生物件新增的原型方法，新增的 API 等（Proxy、Set 等）, 這些事不會轉譯的，需要引入對應的 polyfill 來解決。

常用配置

常見做法是設定一個根目錄下的 .babelrc 檔案，統一將 babel 的設定都放在這裡。

常用 options 欄位說明

  • env：env 的核心目的是通過配置得知目標環境的特點，然後只做必要的轉換。例如目標瀏覽器支援 es2015，那麼 es2015 這個 preset 其實是不需要的，於是程式碼就可以小一點(一般轉化後的程式碼總是更長)，構建時間也可以縮短一些。如果不寫任何配置項，env 等價於 latest，也等價於 es2015 + es2016 + es2017 三個相加(不包含 stage-x 中的外掛)。
  • plugins：要載入和使用的外掛，外掛名前的babel-plugin-可省略；plugin列表按從頭到尾的順序執行
  • presets：要載入和使用的preset ，每個 preset 表示一個預設外掛列表，preset名前的babel-preset-可省略；presets列表的preset按從尾到頭的逆序執行（為了相容使用者使用習慣） 同時設定了presets和plugins，那麼plugins的先執行；每個preset和plugin都可以再配置自己的option。
    常見的配置方法：
{
    "plugins": [
        "transform-remove-strict-mode",
        ["transform-nej-module", {"mode": "web"}]
    ],
    "presets": [
        "env"
    ]
}
複製程式碼

相關文章