（6）webpack使用babel插件的使用

為什么要使用babel插件？

首先要了解babel插件是干嘛的，隨着js的語法規范發展，出現了越來越多的高級語法，但是使用webpack打包的時候，webpack並不能全部理解這些高級語法，需要我們使用一些插件來把高級語法，轉為低級語法后打包。babel就是將高級語法轉為低級語法的工具。

不使用babel會遇到的問題

我們是用class語法來創建一個簡單的類：

使用webpack打包，會報錯如下：

解決webpack無法正確解析es6問題：

1. 安裝babel和相關的loader

   • 在webpack中需要安裝兩套包：
     • 第一套包：cnpm install babel-core babel-loader babel-plugin-transform-runtime -D
     • 第二套包：cnpm install bebel-preset-env babel-preset-stage-0 -D

2. 打開webpack的配置文件，在module節點下的rules數組中，添加一個新的匹配規則：

   • {test:/\.js$/, use:'babel-loader', exclude:/node_modules/}
   • 注意：在配置babel的loader規則的時候，必須把node_modules目錄，通過exclude選項排除掉，原因有兩：
     • 如果不排除node_modules，則babel會把node_modules中所有的第三方js文件，都打包編譯，這樣非常消耗cpu且打包速度慢
     • 哪怕最終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相關的語法
5. npm run dev之后，就可以看到已經正確運行
   

打包過程中遇到的問題：

babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.
錯誤原因：是當前的babel-loader和babel不匹配，安裝babel-loader@7即可。
解決辦法：cnpm install babel-loader@7