Babel 及其工作原理

一、什么是 Babel

Babel 是一個工具鏈，主要用於將 ECMAScript 2015+ 版本的代碼轉換為向后兼容的 JavaScript 語法，以便能夠運行在當前和舊版本的瀏覽器或其它環境中。

// Babel 輸入：ES2015 箭頭函數
[1,2,3].map((n)=>n+1)

// Babel 輸出：ES5 語法實現的同等功能
[1,2,3].map(function(n){
  return n+1
})

 

二、Babel 的工作原理

首先把原始代碼轉成抽象語法樹（Abstract Syntax Tree，AST），然后基於這個 AST 做轉換，每個轉換被處理成插件的形式，最后把 AST 還原成代碼。

 

三、安裝

這里使用 Webpack

npm install --save-dev babel-loader @babel/core @babel/preset-env

安裝成功后，要在 webpack.config.js 中進行簡單的開啟 Babel：

module: {
  rules: [
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}
  ]
}

上面的安裝只是開啟了 Babel，還沒選擇使用 plugin，接下來是進行 plugin 的配置：

在項目根目錄創建 .babelrc 文件，文件內容如下：

{
"presets": ["@babel/preset-env"]
}

（這里使用 presets 而非 plugin 的原因：presets 是 plugin 的集合）