如何在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"]
}
上一篇:Dynamics CRM CRM Explorer missing from Visual Studio 2012


下一篇:Java FX中TreeView节点选中和双击事件监听