如何在webpack開發中利用vue框架使用ES6中提供的新語法

在webpack中開發，會遇到一大推問題，特別是babel6升級到babel7，要跟新一大推插件，而對於安裝babel的功能就是在webpack開發中，vue中可以是用ES6的新特性：

例如ES6中的面向對象編程方式：

class Person{
    static info = { name: "zs", age: 20}
}
console.log(Person.info)

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

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

1.先安裝一下插件

"devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/plugin-proposal-object-rest-spread": "^7.4.4",
    "@babel/plugin-transform-runtime": "^7.4.4",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "@babel/runtime": "^7.4.5",
    "babel-loader": "^8.0.6"
}

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

2.1 

{test"/\.js$/, use :"babel-loader", exclude:/node_modules/}

2.2 注意：在配置babel的loader規則的時候，必須把node_modules目錄，經過exclude選項

排除掉；緣由有倆：

2.2.1 若是不排除node_modules， 則babel會把node_modules中全部的第三方JS文件，

都打包編譯，這樣會很是消耗CPU，同時打包速度很是慢；

2.2.2 哪怕，最終babel把全部的node_modules中的JS轉換完畢了，可是，項目也沒法正常

運行！

3.在項目的根目錄中，新建一個叫作 .babelrc 的Babel配置文件，這個配置文件，屬於JSON格式

因此在寫 .babelrc配置的時候，必須的時候，必須符合JSON語法規範：不能寫註釋，字符串

必須用雙引號

3.1 在 。babelrc 寫入下的配置

{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": ["@babel/plugin-transform-runtime", "@babel/plugin-proposal-object-rest-spread", "@babel/plugin-proposal-class-properties"]
}

 

 文檔： https://github.com/babel/babel-upgrade