一、Babel： （官網：https://www.babeljs.cn/docs/） 1、Babel 是一個 JavaScript 編譯器； 2、Babel 是一個工具鏈，主要用於將 ECMAScript 2015+ 版本的代碼轉換為向後相容的 JavaScript 語法，以便能夠運行在當前和舊版本 ...
一、Babel： （官網：https://www.babeljs.cn/docs/）
1、Babel 是一個 JavaScript 編譯器；
2、Babel 是一個工具鏈，主要用於將 ECMAScript 2015+ 版本的代碼轉換為向後相容的 JavaScript 語法，以便能夠運行在當前和舊版本的瀏覽器或其他環境中。
3、 Babel的作用：
①、語法轉換
②、通過 Polyfill 方式在目標環境中添加缺失的特性 (通過 @babel/polyfill 模塊)
③、源碼轉換 (codemods)
二、Babel配置思路：
在webpack中，預設只能處理 一部分ES6的新語法，一些更高級的ES6或者ES7 語法，webpack是處理不了的；這時候，就需要藉助於第三方的 loader ，來幫助webpack 處理這些高級的語法；當第三方loader 把高級語法轉為低級語法之後，會把結果交給 webpack 去打包到bundle.js中；
通過Babel ，可以幫我們將高級的語法轉換為 低級的語法：
1、在webpack 中，可以運行如下兩套命令，安裝兩套包，去安裝babel 相關的loader功能：
①、第一套包：
cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
②、第二套包：
cnpm i babel-preset-env babel-preset-stage-0 -D
2、打開 webpack 的配置文件，在module節點下的rules 數組中，添加一個新的匹配規則：
①、
{ test :/\.js$/, use :'babel-loader', exclude:/node_modules/ }
②、註意：在配置babel 的loader 規則的時候，必須把node_modules目錄，通過 exclude選項排除掉：原因有倆：
I、如果不排除 node_modules ，則babel 會把 node_modules 中所有的第三方JS文件，都打包編譯，這樣，會非常消耗CPU，同時，打包速度非常慢；
II、哪怕，最終，babel 把所有的node_modules 中的JS 轉換完畢了，但是，項目也無法正常運行。
3、在項目的 根目錄中，新建一個叫做：.babelrc的Babel 配置文件，這個配置文件，屬於JSON 格式，所以，在寫.babelrc 配置的時候，必須符合JSON語法規範：不能寫註釋，字元串必須用雙引號；
①、在.babelrc 寫下的配置：大家可以把 preset 翻譯成 【語法】 的意思：
{
"presets": [" env","stage-0"],
"plugins": ["transform-runtime"]
}
4、目前，我們安裝的 babel-preset-env 是比較新的es語法，之前，我們安裝的是babel-preset-es2015，現在，出了一個更新的語法插件，叫做 babel-preset-env ,它包含了所有的 和es **相關的語法。
