0717-7821348
爱彩人官网

爱彩人官网

您现在的位置: 首页 > 爱彩人官网
Vue.js学习No.6(Babel)
2019-05-31 22:53:53
  • 学习的内容如下
  • 开端
  • 写在前面的话,最好运用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 loaVue.js学习No.6(Babel)der 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中Vue.js学习No.6(Babel)所有的第三方的JS文件都打包编译,这样,会十分的耗费Cpu,打包的速度会十分的慢 ! 2、假如Babel把node—moduls都打包完成了,项目也运转不起来




4、在项目的根目录中,新建一个叫做 .babelrc 的Vue.js学习No.6(Babel)Babel的装备文件,这个装备文件归于JS雪莉直播虐猫ON个数,所以在写 .babelrc 装备的时分,有必要契合JSON语法标准,不能写注释,字符串有必要用双引号








Babel 是一个 JavaScript 编译器




最终就能够运用ES6Vue.js学习No.6(Babel)语法特性