babel是一個轉譯器,用於把同種語言的高版本規則翻譯成低版本規則。
過程
babel的轉譯過程分爲三個階段：parsing、transforming、generating;
以ES6轉ES5爲例，具體過程：
- 編寫ES6代碼
- babylon進行解析
- 解析得到AST
- plugin用babel-traverse對AST樹進行遍歷轉譯
- 得到新的AST樹
- 用babel-generator通過AST樹生成ES5代碼
需注意的一點就是，babel默認只是轉譯新標準引入的語法，比如ES6的箭頭函數，不轉換新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局對象，以及一些定義在全局對象上的方法（比如Object.assign）都不會轉碼。
舉例來說，ES6在Array對象上新增了Array.from方法。Babel就不會轉碼這個方法。如果想讓這個方法運行，必須使用babel-polyfill，爲當前環境提供一個墊片。
plugins
插件應用於babel的轉譯，尤其是第二個階段transforming，如果這個階段不使用任何插件，那麼babel會原樣輸出代碼。
注意: 轉譯 plugin 會自動繼承/使用語法插件，因此如果已經使用了相應的轉譯 plugin ，則不需要指定語法 plugin 。
Presets
env 是官方組裝的一些公用的插件
地址： https://www.babeljs.cn/docs/plugins/preset-env/
每年每個 preset 只編譯當年批准的內容。 而 babel-preset-env 相當於 es2015 ，es2016 ，es2017 及最新版本。
polyfill
它會仿效一個完整的 ES2015+ 環境,前面說了babel只能滿足新標準引入的語法，polyfill相當於是對新增API支持的擴增。
意味着你可以使用新的內置對象比如 Promise 或者 WeakMap, 靜態方法比如 Array.from 或者 Object.assign, 實例方法比如 Array.prototype.includes 和生成器函數（提供給你使用 regenerator 插件）。polyfill 添加到了全局範圍，就像原生類型比如 String 一樣。
安裝:
npm install --save babel-polyfill --save
需要在你的應用入口頂部通過 require 將 polyfill 引入進來
import "babel-polyfill"最後在 webpack.config.js 中，將 babel-polyfill 加到你的 entry 數組中
module.exports = {
entry: ["babel-polyfill", "./app/js"]
};