Vue學習之Babel配置(十六）

1、Babel：  （官網：https://www.babeljs.cn/docs/）

 一、Babel 是一個 JavaScript 編譯器；

二、Babel 是一個工具鏈，主要用於將 ECMAScript 2015+ 版本的代碼轉換爲向後兼容的 JavaScript 語法，以便可以運行在當前和舊版本的瀏覽器或其餘環境中。

三、 Babel的做用：

　　①、語法轉換

　　②、經過 Polyfill 方式在目標環境中添加缺失的特性 (經過 @babel/polyfill 模塊)

　　③、源碼轉換 (codemods)

2、Babel配置思路：

　　在webpack中，默認只能處理 一部分ES6的新語法，一些更高級的ES6或者ES7 語法，webpack是處理不了的；這時候，就須要藉助於第三方的 loader ，來幫助webpack 處理這些高級的語法；當第三方loader 把高級語法轉爲低級語法以後，會把結果交給 webpack 去打包到bundle.js中；

　經過Babel ，能夠幫咱們將高級的語法轉換爲 低級的語法：

一、在webpack 中，能夠運行以下兩套命令，安裝兩套包，去安裝babel 相關的loader功能：

①、第一套包：

　　

cnpm i babel-core babel-loader babel-plugin-transform-runtime -D

②、第二套包：

cnpm i babel-preset-env babel-preset-stage-0 -D

二、打開 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 轉換完畢了，可是，項目也沒法正常運行。

三、在項目的 根目錄中，新建一個叫作：.babelrc的Babel 配置文件，這個配置文件，屬於JSON 格式，因此，在寫.babelrc 配置的時候，必須符合JSON語法規範：不能寫註釋，字符串必須用雙引號；

①、在.babelrc 寫下的配置：你們能夠把 preset 翻譯成 【語法】 的意思：

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

四、目前，咱們安裝的  babel-preset-env 是比較新的es語法，以前，咱們安裝的是babel-preset-es2015，如今，出了一個更新的語法插件，叫作 babel-preset-env ,它包含了全部的 和es **相關的語法。