大前端进阶-05-babel

ES6的很多高级语法是无法直接在浏览器或者node.js中运行。
那balel的作用就是将ES6的代码直接转换成ES5的代码(降级处理)。

#一.安装
cmd输入命令:
npm install -g babel-cli 或者 cnpm install -g babel-cli

bable --version查看版本号

#二.babel的使用

1.创建babel文件夹
2.初始化项目
在babel文件夹下cmd输入

npm init -y

3.创建文件src/example.js,下面的一段ES6代码
src文件夹的创建是为了统一管理

运行

4.配置.babelrc
在项目的根目录下(babel文件夹下)存放一个.babelrc的文件

Babel的配置文件是.babelrc,存放在项目的根目录下,该文件用来设置转码规则和插件,基本格式如下

5.安装转换器,在项目中安装
转换器就相当于ES6和ES5之间的映射表(通过上面的babelrc配置文件查找),比如var是否转换成let和const,箭头函数的转换格式等

cmd输入命令安装转换器,

npm install --save-dev babel-preset-es2015
或者 cnpm install --save-dev babel-preset-es2015

6.转码
在项目的根目录下cmd输入

babel src -d dist

然后会得到一个dist文件夹,里面的。js文件就是转换后的文件了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LC超人在良家

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值