使用babel将es6代码转成es5(二)

上节写到环境的准备,先用es6语法写个js文件内容大概如下:只做个简单测试就不写复杂了

var a = (msg) => () => msg;

这里写图片描述

第一步 从上面图可以看出,在编译器中输入的代码有许多错误提醒,这是因为编译器默认是采用ES5的标准,如果想不报错,则需要将编译器的语法支持调到ES6

这里写图片描述

改变编译标准后,则不会出现错误提醒咯
这里写图片描述

第二步:在根目录下新建一个.babelrc文件,该文件是babel编译用的。文件内容为

{
  "presets": [],
  "plugins": []
}

这里写图片描述

第三步:输入下面的命令

#ES2015转码规则
npm install --save-dev babel-preset-es2015

这里写图片描述

# ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

我们在此选择第二条来执行:

这里写图片描述

第四步:修改.babelrc文件,在文件中添加”es2015”如下所示:
这里写图片描述

第五步:如果没有意外发生,应该大功告成,编译输出看看,输入如下代码:会直接将结果在命令窗口输出

babel es6.js

这里写图片描述

如果需要将结果输出到相应文件中可以输入如下命令,会在根目录下面生成es5.js,双击打开可以看到内容已经改变成我们熟悉的编写方式了:

babel es6.js -o es5.js

这里写图片描述

执行的前提 是要安装全局的babel cli ,如果报babel不是内部命令 则执行下面的命令:

npm install -g babel-cli
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值