前端自动化系列(三)之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);
});

白俊遥博客

白俊遥博客
请先登录后发表评论
  • latest comments
  • 总共11条评论
白俊遥博客

XXX-施凱樂科技 :博主好厉害,我该怎么关注你呢

2019-05-27 15:00:57 回复

白俊遥博客

清风 :发现新大陆了,学到了

2017-11-02 11:29:07 回复

白俊遥博客

爱便流通于世 :厉害

2017-06-21 13:10:52 回复

白俊遥博客

大灰狼 白俊遥博客为什么我会报错啊

2017-05-06 13:45:51 回复

白俊遥博客

陌路、蠡殇 :java里面的js用反引号就会报错是怎么回事

2017-04-14 16:23:04 回复

白俊遥博客

Hx :好

2016-12-09 09:27:19 回复

白俊遥博客

半夏微凉。 :撒旦法

2017-01-09 15:10:07 回复

白俊遥博客

攻城湿 白俊遥博客

2017-05-04 10:31:25 回复

白俊遥博客

攻城湿 白俊遥博客

2017-05-04 10:31:35 回复

白俊遥博客

攻城湿 白俊遥博客

2017-05-04 10:31:47 回复

白俊遥博客

文艺春秋 :(`・ω・)

2016-11-26 13:18:31 回复