高逼格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);

你可能感兴趣的:(高逼格Babel,快速入门)