ECMAScript 6 是 JavaScript 的最新版本，它带来了很多新特性——一些是社区乞求已久的，一些是颇具争议的。但不管你如何看待 ES6，都应该学习并使用它——因为就是这么酷。由于能在服务器端控制 JavaScript 版本，所以 ES6 在 node.js 或其它服务端框架运行良好，但在客户端中则不尽人意了。从一个复杂的 angular 或 ember 应用到一个简单的静态页面基本都含有几行 jQuery 代码。
难道这就让我们向命运低头吗？难道注定要因为浏览器不得不接受旧版本的 JavaScript 吗？不，我们不必接受这种限制！我们还有别的选择——现在最佳的选择是编写 ES6 代码，并将其转译（transpile）或编译为 ES5 代码（兼容所有现代浏览器，如IE9+）。Babel 是主流的转译工具，它让转译过程变得简单，我们打算让这过程自动化，所以我们甚至可以不用考虑上述的限制！
长话短说
如果你只想要简洁的描述和本文所用到的纯代码，下面就是：
我们将会创建一个 gulpfile 去监听文件的更改，并用 Babel 将 ES6 代码自动转换到 CommonJS，然后用 Browserify 将 CommonJS 转为 合法的 ES5。当然，我们也会添加额外的插件，如 UglifyJS （为了最小化），source maps 和 livereload —— 因为这些工具都超级有用。
简单粗暴，下面是完整的 gulpfile 文件：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
var gulp = require('gulp'); var browserify = require('browserify'); var babelify = require('babelify'); var source = require('vinyl-source-stream'); var buffer = require('vinyl-buffer'); var uglify = require('gulp-uglify'); var sourcemaps = require('gulp-sourcemaps'); var livereload = require('gulp-livereload'); gulp.task('build', function () { // app.js is your main JS file with all your module inclusions return browserify({entries: './src/js/app.js', debug: true}) .transform("babelify", { presets: ["es2015"] }) .bundle() .pipe(source('app.js')) .pipe(buffer()) .pipe(sourcemaps.init()) .pipe(uglify()) .pipe(sourcemaps.write('./maps')) .pipe(gulp.dest('./dist/js')) .pipe(livereload()); }); gulp.task('watch', ['build'], function () { livereload.listen(); gulp.watch('./src/js/*.js', ['build']); }); gulp.task('default', ['watch']); |
这没你想象中糟糕吧！我们在上面尝试了很多不同的东西。如果你有兴趣学习它们，我会鼓励你继续往下阅读，去了解它们是如何运行和为什么会这样运行的，这无疑会为浏览器构建出更可靠的 ES6 代码。
开始我们的 Gulpfile
我们将选择 gulp 作为自动化构建工具。gulp 是基于 JavaScript 编写的工具，它能运行特定任务，并监听文件是否被更改。当然，这取决于你在本地项目的目录下的 gulpfile.js 配置文件。除了 gulp，还有其它自动化构建工具（grunt 也是流行的构建工具），但由于 gulp 基于 node 的流（streams）实现，因此速度更快。
首先，我们初始化 package.json，并本地安装 gulp（如果你未曾安装，也可全局安装）：
|
1 2 |
npm init # Answer all the questions npm install --save-dev gulp |
然后，创建一个空白的 gulpfile.js，并填充如下骨架：
|
1 2 3 4 5 6 7 8 9 10 11 |
var gulp = require('gulp'); gulp.task('build', function () { }); gulp.task('watch', ['build'], function () { gulp.watch('./src/js/*.js', ['build']); }); gulp.task('default', ['build', 'watch']); |
上面没什么特别的地方。我们创建了空的 build、watch 和 default 任务。build 任务应包含所有构建 JavaScript 代码的逻辑。watch 任务监控 src/js 文件夹下的文件是否被更改（构建后的文件会放在 dist/js 下）。
执行以上这些任务：
|
1 2 3 |
gulp build # Build gulp watch # Watch lass="crayon-o"># Build gulp watch # Watch /feedback/trans-team/">翻译组。 ECMAScript 6 是 JavaScript 的最新版本，它带来了很多新特性——一些是社区乞求已久的，一些是颇具争议的。但不管你如何看待 ES6，都应该学习并使用它——因为就是这么酷。由于能在服务器端控制 JavaScript 版本，所以 ES6 在 node.js 或其它服务端框架运行良好，但在客户端中则不尽人意了。从一个复杂的 angular 或 ember 应用到一个简单的静态页面基本都含有几行 jQuery 代码。 难道这就让我们向命运低头吗？难道注定要因为浏览器不得不接受旧版本的 JavaScript 吗？不，我们不必接受这种限制！我们还有别的选择——现在最佳的选择是编写 ES6 代码，并将其转译（transpile）或编译为 ES5 代码（兼容所有现代浏览器，如IE9+）。Babel 是主流的转译工具，它让转译过程变得简单，我们打算让这过程自动化，所以我们甚至可以不用考虑上述的限制！ 长话短说如果你只想要简洁的描述和本文所用到的纯代码，下面就是： 我们将会创建一个 gulpfile 去监听文件的更改，并用 Babel 将 ES6 代码自动转换到 CommonJS，然后用 Browserify 将 CommonJS 转为 合法的 ES5。当然，我们也会添加额外的插件，如 UglifyJS （为了最小化），source maps 和 livereload —— 因为这些工具都超级有用。 简单粗暴，下面是完整的 gulpfile 文件：
这没你想象中糟糕吧！我们在上面尝试了很多不同的东西。如果你有兴趣学习它们，我会鼓励你继续往下阅读，去了解它们是如何运行和为什么会这样运行的，这无疑会为浏览器构建出更可靠的 ES6 代码。 开始我们的 Gulpfile我们将选择 gulp 作为自动化构建工具。gulp 是基于 JavaScript 编写的工具，它能运行特定任务，并监听文件是否被更改。当然，这取决于你在本地项目的目录下的 gulpfile.js 配置文件。除了 gulp，还有其它自动化构建工具（grunt 也是流行的构建工具），但由于 gulp 基于 node 的流（streams）实现，因此速度更快。 首先，我们初始化 package.json，并本地安装 gulp（如果你未曾安装，也可全局安装）：
然后，创建一个空白的 gulpfile.js，并填充如下骨架：
上面没什么特别的地方。我们创建了空的 build、watch 和 default 任务。build 任务应包含所有构建 JavaScript 代码的逻辑。watch 任务监控 src/js 文件夹下的文件是否被更改（构建后的文件会放在 dist/js 下）。 执行以上这些任务：
|
