在 Web 中使用 ES 2015

想要在浏览器端使用 ES 2015 最新语法，其实很简单，只需要一个转换器即可，Babel 是 ES 2015 最流行的转换器之一，Babel 加上各种插件和 polyfill 能基本上支持绝大部分新语法。

在你的构建中，插入一步使用 Babel 将 ES 2015 的代码转换成完全兼容 ES5 的代码的任务，你甚至都不必了解 Babel 的具体用法，就可以爽爽的开始写 ES 2015 代码了。

使用 gulp-babel 在需要的地方转换一下即可。

var gulp = require('gulp');

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

gulp.task('babel', function () {

return gulp.src('src/js/*.js')

.pipe(babel())

.pipe(gulp.dest('dist'));

});

笔者在实际生产中已使用到一些 ES 2015 新特性，通过 Babel 转换成完全兼容 ES5 的语法，然后发布到正式环境，大大提高了开发体验。下面将一部分使用的较多，能改善编码体验的点列出来，当然也有一些坑，希望读者能尽早熟悉尽早投入 ES 2015 的怀抱。

1 2	let a = 1; const A = 2;

转换成

1 2	var a = 1; var A = 2;

Babel 只是单纯将 let 和 const 转换成了 var，并没有真正实现块作用域和常量的功能，也没有消除变量提升的问题，这样避免了引入一些额外的代码，而且也已经完全与 ES5 兼容了。

1 2	const name = 'Jarvis'; const template = `My name is ${name}`;

转换成

1 2	var name = 'Jarvis'; var template = 'My name is ' + name;

模板字符串（两个反丿号）是 ES 2015 的一个重要的新功能，允许模板字符串里面通过 ${variable} 的方式直接嵌变量，可以替代老旧的字符串拼接方法，而且里面可以任意使用单双引号。

这个改进很实用，现在就可以用起来了，再也不用担心单双引号谁该写在谁的外面了。

模板字符串还直接支持多行文本，如：

const tmpl = `text line 1,

text line 2,

textline 3`;

在拼接 html 的时候特别有用。

箭头函数语法：

const fn = () => {

console.log('hello world');

};

转换成

AlloyTeam