書接上文，接下來項目將引入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為前綴)。
@babel/cli 內置的 CLI 命令行工具，可通過命令行編譯文件。官方文檔
@babel/core babel的核心，包含各個核心的API，供babel插件和打包工具使用。官方文檔
@babel/preset-env 是一個常用的預設(Presets), 讓你能使用最新的JavaScript語法, 它會幫你轉換成代碼的目標運行環境支持的語法, 提升你的開發效率並讓打包后的代碼體積更小。相關參考
webpack loader 模塊安裝
JSX語法模塊安裝
JSX語法插件使用babel-plugin-syntax-jsx，沒有使用高版本的@babel/plugin-syntax-jsx,項目運行中后者會出現 Cannot find module babel-plugin-syntax-jsx 異常。
功能驗證
上述模塊安裝完畢后，在test目錄下，創建一個名為babel-es6-test.js的文件
在命令行窗口輸入以下指令，編譯整個test文件夾並輸出到lib(不存在則自動創建)文件夾中
成功運行后，項目lib目錄下也會創建一個babel-es6-test.js的文件，跟test目錄下的文件是相同的，代碼沒有進行轉換。
Babel 本身不具有任何轉化功能，不配置任何插件時，經過 babel 的代碼和輸入是相同的。
在根目錄下創建babel.config.json文件，配置如下：
再次運行指令，lib下輸出文件代碼已經轉換
項目配置
更新babel.config.json配置
webpack.config.js添加一條關於babel-loader的規則：
目錄examples新增文件JSX.vue用來測試JSX語法
更新examples\App.vue文件，引入JSX.vue組件
運行npm run dev，打開瀏覽器，成功解析結果如下
最新目錄結構
