書接上文，接下來專案將引入babel支持ES6+語法兼容，

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

0x00.babel概念

Babel 是一個編譯器（輸入原始碼 => 輸出編譯后的代碼），編譯程序分為三個階段：決議、轉換和列印輸出，

Babel 本身不具有任何轉化功能，它把轉化的功能都分解到一個個plugin 里面，因此當我們不配置任何插件時，經過 babel 的代碼和輸入是相同的，

插件(Plugins)

插件總共分為兩種：語法插件(Syntax Plugins)和轉譯插件(Transform Plugins)，

轉換插件用于轉換你的代碼，
語法插件只允許Babel決議(parse)特定型別的語法(而不是轉換)，

轉換插件會自動啟用語法插件，因此，如果你已經使用了相應的轉換插件，則不需要指定語法插件，
具體插件串列，詳見官方檔案， Plugins

預設(Presets)

presets可以看作一組預先設定的插件串列集合，我們可以不必再當獨地一個一個地去添加我們需要的插件，

組態檔

babel提供了config的方式，類似于webpack的cli方式以及config方式，官方檔案

babel 7.X 之后，引入了babel.config.json (支持.js, .cjs, .mjs等檔案格式);在7.X之前，專案都是基于.babelrc(支持.json,.js, .cjs, .mjs等檔案格式)來進行配置，

一般babel.config.json會放置在根目錄下，在執行編譯時，babel會首先去尋找babel.config.json檔案，以此來作為整個專案的根配置，

babel.config.json 配置示例

{
  "presets": ["@babel/env"],
  "plugins": ["transform-vue-jsx"]
}

插件的短名稱

如果插件名稱的前綴為 babel-plugin-，你還可以使用它的短名稱：

{
  "plugins": [
    "myPlugin",
    "babel-plugin-myPlugin" // 兩個插件實際是同一個
  ]
}

適用于帶有冠名（scope）的插件：

{
  "plugins": [
    "@org/babel-plugin-name",
    "@org/name" // 兩個插件實際是同一個
  ]
}

預設的短名稱

如果 preset 名稱的前綴為 babel-preset-，你還可以使用它的短名稱：

{
  "presets": [
    "myPreset",
    "babel-preset-myPreset" // equivalent
  ]
}

適用于帶有冠名（scope）的 preset：

{
  "presets": [
    "@org/babel-preset-name",
    "@org/name" // equivalent
  ]
}

執行順序

插件執行順序在presets之前
插件會按照宣告的插件串列順序順序執行(first to last)
preset會按照宣告的串列順序逆序執行(last to first)

參考
https://www.cnblogs.com/rynxiao/p/13665506.html
https://babeljs.io/docs/en/config-files

0x01.babel安裝與配置

安裝所需包（package）

專案中引入bable(babel 7.0 以后的插件與預設以@babel為前綴)，

carbon (22).png

@babel/cli 內置的 CLI 命令列工具，可通過命令列編譯檔案，官方檔案
@babel/core babel的核心，包含各個核心的API，供babel插件和打包工具使用，官方檔案
@babel/preset-env 是一個常用的預設(Presets), 讓你能使用最新的JavaScript語法, 它會幫你轉換成代碼的目標運行環境支持的語法, 提升你的開發效率并讓打包后的代碼體積更小，相關參考

webpack loader 模塊安裝

carbon (25).png