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

白俊遥
2016-11-13 10:28:17
前端
JavaScript node.js

连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);
});

白俊遥博客