玖叶教程网

前端编程开发入门

Vue.js学习No.6(Babel)(@vue/cli-plugin-babel)

  • 学习的内容如下
  • 开始
  • 写在前面的话,最好使用cnpm 来安装包,要不然一堆错误

class是 ES6提供的新的语法,用来实现ES6中面向对象编程

//class是 ES6提供的新的语法,用来实现ES6中面向对象编程
class P{
 static info={name:"25",age:20}
}
//和 java 实现面向对象的方式完全一样 
var p=new P()

但是报错了



Module parse failed: Unexpected token (43:15)
You may need an appropriate loader to handle this file type.
| //class是 ES6提供的新的语法,用来实现ES6中面向对象编程
| class P{
> static info={name:"25",age:20}
| }
| //和 java 实现面向对象的方式完全一样 
  • 在webpack中,默认只能处理一部分ES6的新的语法。一些语法是处理不了的!需要借助第三放的loader把高级语法转为低级的语法

通过Babel,帮我们将高级的语法转化为低级的语法

1、在webpack中,可以运行如下两套的命令,安装两套包去安装 Babel ,必须注意的是,字母的拼写cnpm i babel-core babel-loader babel-plugin-transform-runtime -D




2、cnpm i babel-preset-env babel-preset-stage-0 -D




3、打开webpack 的配置文件,在module节点下的rules数组中,添加一个新的匹配规则

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

  • exclude:/node_modules/
  • 在配置babel的loader规则时候,必须把node_modules 目录,通过exclude 排除掉
  • 因为:1、不排除node_modules拍除外的话,会把node_modules中所有的第三方的JS文件都打包编译,这样,会非常的消耗Cpu,打包的速度会非常的慢 ! 2、如果Babel把node—moduls都打包完成了,项目也运行不起来




4、在项目的根目录中,新建一个叫做 .babelrc 的Babel的配置文件,这个配置文件属于JSON个数,所以在写 .babelrc 配置的时候,必须符合JSON语法规范,不能写注释,字符串必须用双引号








Babel 是一个 JavaScript 编译器




最后就可以使用ES6语法特性

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言