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 的集合）