使用 ES6 去编程

随着今年 Node.js 4.0.0 版本的发布，ECMAScript 6（ECMAScript 2015）再次进入了我们的视野。这篇文章不讲解 ES6 的新特征，只讲解如何在我们的项目中使用 ES6，是到了直接使用 ES6 写代码的时候了。

虽然最新的 Node.js 已经支持了 ES6 语法，但对于我们 Web 前端来说似乎在使用方面还有一些障碍摆在面前。从各大浏览器对 ES6 的支持情况看，目前还难全线使用 ES6 进行开发。

下图是 ES6 中展开运算符的支持情况（截图来自 MDN）：

展开运算符

那么我们就该放弃简洁的 ES6 语法和新功能吗？我们的答案是——不。接下来我们边讲解边慢慢构建一个 ES6 编程的 DEMO，并且让这个 DEMO 可以在人们的常用浏览器上运行。

Babel

Babel 音译作 “巴别”，圣经上记载上帝打扰人类语言的地方。而现在，Babel 为我们做的事情却是将不同的语法互相转换。

我们先在一个 JS 文件中写上一些使用 ES6 语法编写的代码。

var a = [1,2,3]

//定义函数 fn，使用了 ES6 的箭头函数 
var fn = (a, b, c) => {console.log('fn is run'); return a} 

var b = {
  x: fn
}

//在函数执行中使用了 ES6 的展开运算符 ...
b.x(...a)

如果你直接在浏览器中执行这些语句，很可能你会得到一堆错误信息，如图：

浏览器报错信息

这里我们要使用 Babel 的在线转化工具来对我们的 ES6 语法进行转化。

ES6 的语法变成了 ES5 的语法：

'use strict';

var a = [1, 2, 3];

var fn = function fn(a, b, c) {
  console.log('fn is run');return a;
};

var b = {
  x: fn
};

b.x.apply(b, a);

转化后的图片

这确实让我们的代码可以顺利的在一般的浏览器下运行。

同样，我们也可以将 Babel 融入我们的构建工具中，以 Gulp 为例。

先安装 Gulp 下的插件 gulp-babel。

npm install --save-dev gulp-babel

gulp

使用 gulp-babel 转化我们的 JS 文件：

var gulp = require("gulp");
var babel = require("gulp-babel");

gulp.task("default", function () {
  return gulp.src("src/app.js")
    .pipe(babel())
    .pipe(gulp.dest("dist"));
});

在工程中引入了 Babel 转换后，我们就可以放心的在 JS 文件中使用 ES6 语法了。

引入功能垫片

虽然 Babel 可以为我们将 ES6 语法和部分新功能转换到 ES5 上，但是为了能够平滑的在浏览器中运行，我们还需要加上一些功能垫片，以弥补 Babel 在功能处理上的不足，比如 Array 下新增的方法。这里我们使用 core-js 来做一个例子。

Array.from('123', function(it){
  return it * it;
}); // Uncaught TypeError: Array.from is not a function

在已经 Babel 转化后，代码并没有什么变化，仍旧使用 Array.from。在浏览器中由于缺少 from 方法就会报错。

在引用了 core-js 后：

Array.from('123', function(it){
  return it * it;
}); // [1, 4, 9]

使用了功能垫片后，我们的程序顺利得到了执行。

总结

在使用 ES6 编程的过程中，我们可以使用 Babel 进行语法转化，再使用功能垫片确保 ES6 的新功能可以正常运行在浏览器上。ES6 编程已经进入一个无痛时代，大家可以亲身体验一下新语法的特性。

YIXUNFE / blog