如何在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