高逼格Babel,快速入门

为什么要使用babel?
目前ECMAScript 2015(ES6)已经极为流行了,只不过目前浏览器还不兼容。所以babel出现了。

babel的特点
babel是一个js转换器(平台),它的出现使得我们可以立即使用ES6的语法,特点如下:
1.目前公认的对ES6规范兼容最高的工具
2.不断更新并且支持ES6的转化,我们用babel能做大量的新语法的实验
3.内置优化器,能够在一定程度上加快和提高我们的JS运行性能。

官网 http://babeljs.io/

安装(官方建议安装到项目目录下)

npm install babel-cli --save-dev

开始接触转化
ES2015中定义变量用var,同类的还有const(类似于常量)。我们尽可能的要用let、const来代替var。
而这样的代码在目前的浏览器是不能运行的,所以需要用babel来转化。

加入babel预设插件
刚才我们装的babel-cli只是一个“母体”。要想让它实现我们具体的需求还要各种“插件”。
比如babel-preset-es2015

npm install babel-preset-es2015 --save-dev

此外babel还需要一个配置文件.babelrc

{
    "presets":["es2015"]
}

babel作用演练
1.新建一个test.js

let name = "zhagnsan";
console.log(name);

2.使用babel转化

$ babel test.js -o test-babel.js

这样就利用babel把test.js 转化输出为 test-babel.js了,
转化成了我们es5的代码

"use strict";

var name = "zhagnsan";
console.log(name);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值