babel初体验,无法将“babel”识别为....错误

Babel

最近在看ES6,看到了babel这个东西,感觉还挺好玩,但是一直尝试都没成功,尝试了好几次,终于成功了。记录一下:

1.首先需要安装node的环境。【这个去官网下载一个,直接next安装就行】

在这里插入图片描述

2.创建package.json文件。【使用npm inint -y命令进行创建】
在这里插入图片描述

3.安装babel 【npm install i -D babel-preset-env babel-cli】

在这里插入图片描述

4.在将有es6语法的src/index.js进行转化的时候出错了,原因是因为我们安装的时候是布局进行的安装,并不是全局安装,所以不能直接使用Babel。【当然如果你使用的就是全局的安装,还是出现了这个错误,就要注意是否配置了环境变量】

在这里插入图片描述

6.因此,在package.json文件中的 srcipts中添加:

【babel src/index.js --out-fie dist/index.js:将制定的文件转化到指定的文件位置】

【babel src -d dist:将指定的文件夹中的文件全部转化到指定的文件夹下】

【babel src -w -d dist:动态的将指定的文件夹中的文件全部转化到指定的文件夹下,也就是一直进行监听,只要src下面的有变化,就会自动的对其进行相应的转化】

在这里插入图片描述

7.使用npm run build进行转化

在这里插入图片描述

8.结果:

结果还是很明显的。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1zg7OEs7-1611109922294)(./babel/1611109481727.png)]

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值