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