前端自动化系列之Babel、ES6、JavaScript转码

连css这种标记型语言都开始进化了；

那么在前端飞速发展的今天；

那门用一周时间设计出来的JavaScript；

也必须得不断的升级；以适应新的时代；

js最新的版本是ECMAScript 2015；

或者大家更普遍的称其为ES6；

ES6有大量的新特性非常值得我们学习；

举一筐栗子；

首先是可以设置参数默认值了；

function test(a = 1) {

console.log(a);

}

test();

这要搁以前；想实现同样的功能；是要写成这个样子的；

function test(a) {

var a = arguments[0] ? arguments[0] : 1;

// 或者是下面这种稍微简短点的

// var a = a || 1;

console.log(a);

}

test();

还有个超实用的功能；模板字符串；

君还记得当年用jquery的ajax一起拼接过的字符串么？

$.post('xxx.com', function(data) {

var str = '<div>'+

'<p class="name">'+data.name+'</p>'+

'<p class="age">'+data.age+'</p>'+

'</div>';

$('#user').append(str);

});

当有一大段html需要拼接的时候；

上面这还好歹还是整齐缩进了；

要是遇到连缩进都懒得对齐的；

比如这样：

// 模板字符串

$.post('xxx.com', function (data) {

var str = '<div><p class="name">' + data.name + '</p><p class="age">' + data.age + '</p></div>';

$('#user').append(str);

});

那一堆的引号和加号；尤其是维护起来；

那种痛苦；痛彻心扉啊；

为此；我还专门安利过vue.js；对照着jquery来学vue.js系列之ajax获取遍历数据

放在本文章中；使用ES6的模板字符串也能大大的缓解这种痛；

上面的这段代码；用ES6的写法的话；是这个样子；

$.post('xxx.com', function(data) {

var str = `<div>

<p class="name">${data.name}</p>

<p class="age">${data.age}</p>

</div>`;

$('#user').append(str);

});

就是用反引号 ` 来包裹代码块；用 ${} 包裹变量；

以及最受关注的箭头函数；

先来两段常见的js代码；

// 定义函数

function test(a) {

return alert(a);

};

// 绑定click事件 弹出鼠标距离浏览器左侧的距离

$('#test').click(function (event) {

alert(event.offsetX);

});

下面用ES6的箭头函数来实现；简化的非常残忍；

// 定义函数

test=a=>alert(a);

// 绑定click事件 弹出鼠标距离浏览器左侧的距离

$('#test').click((event)=>alert(event.offsetX));

好了；上面这些是简单介绍下ES6；

本文的目的是介绍有这样一个好东西值得学习使用；

为后续的gulp文章做铺垫；

更详细的可以参考 阮一峰的 ECMAScript 6入门

但是问题来了；很多浏览器暂时还不支持ES6；

主要就是指的IE家族系列；

以及国内各种穿了个漂亮外衣的IE嫡系浏览器；

为了兼容他们；那么本文的主角来了；babel；

babel的作用就是把潮流的ES6代码转成更具兼容性的ES5代码；

先来安装；这次稍微麻烦点；

// ES2015转码规则

cnpm install --save-dev babel-preset-es2015

// react转码规则

cnpm install --save-dev babel-preset-react

ES7不同阶段语法提案的转码规则

cnpm install --save-dev babel-preset-stage-2

// babel命令行

cnpm install --global babel-cli

然后在项目根目录创建 .babelrc 文件；写如下内容;

{

"presets": [

"es2015",

"react",

"stage-2"

],

"plugins": []

}

然后新建 example.js 文件；把上面哪些ES6的代码扔进去；

// 默认值

function example(a = 1) {

console.log(a);

}

// 模板字符串

$.post('xxx.com', function(data) {

var str = `<div>

<p class="name">${data.name}</p>

<p class="age">${data.age}</p>

</div>`;

$('#user').append(str);

});

// 箭头函数

test=a=>alert(a);

$('#test').click((event)=>alert(event.offsetX));

命令行执行 ：

babel example.js -o compiled.js

即可生成 compiled.js ；

'use strict';

// 默认值

function example() {

var a = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;

console.log(a);

}

// 模板字符串

$.post('xxx.com', function (data) {

var str = '<div>\n <p class="name">' + data.name + '</p>\n <p class="age">' + data.age + '</p>\n </div>';

$('#user').append(str);

});

// 箭头函数

test = function test(a) {

return alert(a);

};

$('#test').click(function (event) {

return alert(event.offsetX);

});

------------------------------------------------------------------------------------------------------------------------------------

程序员交流QQ群：374604838

云服务器提供商：http://www.zunse.net

小编微信：woshiyixun