一：bable

1、Babel 是一個 JavaScript 編譯器；
2、Babel 是一個工具鏈，主要用于將 ECMAScript 2015+ 版本的代碼轉換為向后兼容的 JavaScript 語法，以便能夠運行在當前和舊版本的瀏覽器或其他環(huán)境中。
3、 Babel的作用：
　?、?、語法轉換
　　②、通過 Polyfill 方式在目標環(huán)境中添加缺失的特性 (通過 @babel/polyfill 模塊)
　　③、源碼轉換 (codemods)

Babel配置思路：

在webpack中，默認只能處理 一部分ES6的新語法，一些更高級的ES6或者ES7 語法，webpack是處理不了的；這時候，就需要借助于第三方的 loader ，來幫助webpack 處理這些高級的語法；當第三方loader 把高級語法轉為低級語法之后，會把結果交給 webpack 去打包到bundle.js中；
在webpack 中，可以運行如下兩套命令，安裝兩套包，去安裝babel 相關的loader功能：
npm包：

cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
cnpm i babel-preset-env babel-preset-stage-0 -D
// 或者
1. 安裝 npm install --save-dev babel-preset-es2015
2. 安裝 npm install --save-dev babel-preset-stage-3
3. 在項目根目錄創(chuàng)建一個.babelrc文件  里面內容 最基本配置是：

2、打開 webpack 的配置文件，在module節(jié)點下的rules 數組中，添加一個新的匹配規(guī)則：
①、{ test :/\.js$/, use :'babel-loader', exclude:/node_modules/ }
②、注意：在配置babel 的loader 規(guī)則的時候，必須把node_modules目錄，通過 exclude選項排除掉：原因有倆：
I、如果不排除 node_modules ，則babel 會把 node_modules 中所有的第三方JS文件，都打包編譯，這樣，會非常消耗CPU，同時，打包速度非常慢；
II、哪怕，最終，babel 把所有的node_modules 中的JS 轉換完畢了，但是，項目也無法正常運行。
3、在項目的 根目錄中，新建一個叫做：.babelrc的Babel 配置文件，這個配置文件，屬于JSON 格式，所以，在寫.babelrc 配置的時候，必須符合JSON語法規(guī)范：不能寫注釋，字符串必須用雙引號；
①、在.babelrc 寫下的配置：大家可以把 preset 翻譯成 【語法】 的意思：

{
    "presets": [" env","stage-0"],
    "plugins": ["transform-runtime"]
}

4、目前，我們安裝的 babel-preset-env 是比較新的es語法，之前，我們安裝的是babel-preset-es2015，現在，出了一個更新的語法插件，叫做 babel-preset-env ,它包含了所有的 和es **相關的語法。

舊版配置

1. 安裝 npm install --save-dev babel-preset-es2015
2. 安裝 npm install --save-dev babel-preset-stage-3
3. 在項目根目錄創(chuàng)建一個.babelrc文件 里面內容 最基本配置是：

{
// 此項指明，轉碼的規(guī)則
"presets": [
// env項是借助插件babel-preset-env，下面這個配置說的是babel對es6,es7,es8進行轉碼，并且設置amd,commonjs這樣的模塊化文件，不進行轉碼
["env", { "modules": false }],
// 下面這個是不同階段出現的es語法，包含不同的轉碼插件
"stage-2"
],
// 下面這個選項是引用插件來處理代碼的轉換，transform-runtime用來處理全局函數和優(yōu)化babel編譯
"plugins": ["transform-runtime"],
// 下面指的是在生成的文件中，不產生注釋
"comments": false,
// 下面這段是在特定的環(huán)境中所執(zhí)行的轉碼規(guī)則，當環(huán)境變量是下面的test就會覆蓋上面的設置
"env": {
// test 是提前設置的環(huán)境變量，如果沒有設置BABEL_ENV則使用NODE_ENV，如果都沒有設置默認就是development
"test": {
"presets": ["env", "stage-2"],
// instanbul是一個用來測試轉碼后代碼的工具
"plugins": ["istanbul"]
  }
 }
}

摘自：
https://www.cnblogs.com/zhangshaoliang/p/8529582.html
https://www.cnblogs.com/21-forever/p/11128435.html