ES6开发环境搭建指南：从Babel到Gulp构建流程

ES6开发环境搭建概述

前言

ECMAScript 6.0（简称 ES6）作为 JavaScript 的下一代标准，已于 2015 年 6 月正式发布。其核心目标是支持复杂的大型应用程序开发，使 JavaScript 能够胜任企业级应用的需求。

在 ES5 尚未完全普及之际，ES6 便已推出。发布后近一年内，众多开发者积极学习这一新语言。相较于 ES5，ES6 在语法层面发生了显著变化，给人以焕然一新的感觉。尽管博主曾尝试学习相关语法，但由于浏览器对 ES6 规范的支持尚不完善，导致“只看不练”的实践困境。许多读者可能也有同感：如何顺畅地编写 ES6 代码并将其转化为实际项目？本文将介绍 ES6 构建知识，并协助搭建一个简易的学习环境。

使用Babel进行代码编译

首先介绍 ES6 开发的关键工具：Babel。

Babel 是一个编译器，负责将源代码转换为目标语法代码，从而确保代码能在各种运行环境中顺利执行。下文将详细介绍如何利用 Babel 编译 ES6 代码。

Babel 提供了便捷的命令行工具 babel-cli，允许用户在命令行中执行编译操作。只需通过 npm 安装即可使用：

npm install -g babel-cli

此外，还需安装转码规则包。Babel 支持多种语法的转码，例如将 ES6 转换为 ES5 需安装 babel-preset-es2015 包；若需编译 React 源码，则需安装 babel-preset-react。本例中，我们将安装 babel-preset-es2015。为此，创建名为 babel-test 的目录，并在其中建立 es6 和 js 两个子目录，分别用于存放 ES6 源代码和编译后的 ES5 目标代码。随后使用“npm init –yes”命令生成默认的 package.json 文件，babel-test 目录结构如下图所示：

接着在当前目录下执行以下命令以安装 ES6 转码规则包：

npm install babel-preset-es2015 --save-dev

在 es6 目录中创建 test.es6 文件以写入 ES6 源代码。Babel 编译源文件时限制较少，因此也可选择使用 js 或 es 作为文件后缀。现将以下 ES6 代码写入 test.es6：

let name = 'Scott';
let greeting = `hello ${name}`;
console.log(greeting);

接下来，运行 babel 命令以编译 ES6 源代码：

babel es6/test.es6 --out-file js/test.js --presets es2015

该命令的含义是：编译 es6 目录下的 test.es6 文件，输出文件为 js 目录下的 test.js，并指定编译规则包为 es2015。命令执行完毕后，可在 js 目录中找到 test.js 文件，如图所示：

可见，上述 ES6 语法已被编译为 ES5 语法，该文件即可加载到现有运行环境中执行。此外，若需编译整个目录的源文件，只需指定“–out-dir”参数即可：

babel es6 --out-dir js --presets es2015

该命令的作用是对 es6 目录中的所有文件进行编译，并将结果输出至 js 目录，如下图所示：

本地化Babel配置

目前，我们仍手动执行 babel 命令编译源代码，且使用了全局的 babel-cli 库，这并非最佳方案。若检出新项目，必须预先在全局安装 babel-cli 库才能运行，这种依赖关系并不理想。此外，不同项目对依赖库版本的要求可能不同，全局安装的 babel-cli 无法保证与各项目其他依赖库版本的兼容性。同时，每次手动运行编译命令也过于繁琐。我们希望将 babel-cli 库安装至本地，并通过简单的命令执行编译任务。

首先，需在本地安装 babel-cli 库：

npm install babel-cli --save-dev

随后，可卸载全局的 babel-cli 库：

npm uninstall -g babel-cli

最后，需在 package.json 中修改 scripts 配置：

"scripts": {
 "compile": "babel es6 --out-dir js --presets es2015"
}

修改完成后，即可使用 npm 运行该编译任务，只需执行以下简单指令：

npm run compile

基于Gulp的自动化构建流程

上述步骤仅利用 babel 将 ES6 源代码编译为 JS。在实际开发中，还需考虑模块化开发、自动编译与构建等更多因素。接下来，我们将搭建一个简单的 ES6 开发环境，以支持 ES6 学习阶段的开发工作。

首先，创建一个简单应用，包含 index.html 和 es6 目录。es6 目录中包含 hello.es6 和 main.es6 两个文件。构建完成后，将新增 js 和 bundle 两个目录，分别用于存放编译后的 JS 代码和打包后的 bundle 文件：

其中，hello.es6 定义了 greet 函数，而 main.es6 为入口文件。相关代码如下：

//hello.es6

function greet(name) {
 return new Promise((resolve, reject) => {
 setTimeout(() => {
 resolve('hello ' + name);
 }, 1000);
 });
}

exports.greet = greet;

//main.es6

import "babel-polyfill";

import {greet} from './hello';

greet('Scott').then((greeting) => {
 document.getElementById('container').innerHTML += greeting;
});

document.getElementById('container').innerHTML = 'I am greeting: ';

可见，hello.es6 中使用 ES6 的箭头函数和 Promise 定义了一个 greet 函数，模拟 1 秒后返回以 hello 开头的字符串。main.es6 中引入了 hello.es6 并调用 greet 函数，最后将结果刷新至 DOM 元素中。

要使这两个源代码文件生效，需先将其编译为 JS，再将 JS 文件打包。现采用 gulp 方式构建此过程。

完成此任务，需先安装相关依赖包：

"devDependencies": {
 "babel-polyfill": "^6.9.1",
 "babel-preset-es2015": "^6.6.0",
 "gulp": "^3.9.1",
 "gulp-babel": "^6.1.2",
 "gulp-browserify": "^0.5.1",
 "gulp-connect": "^3.2.2",
 "gulp-rename": "^1.2.2",
 "gulp-sync": "^0.1.4",
 "gulp-uglify": "^1.5.3"
}

其中，babel-polyfill 是 ES6 的补丁。由于 babel 仅支持 ES6 语法部分的编译，对于新增类还需安装额外的 polyfill。尽管 Chrome 和 Firefox 已添加 Promise 等新增类，但为了兼容旧版本浏览器，此处安装仍为必要之举。

随后，创建几个简单的 tasks，以下是 gulpfile.js 的代码：

var gulp = require('gulp');
var babel = require('gulp-babel');
var connect = require('gulp-connect');
var browserify = require('gulp-browserify');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var gulpsync = require('gulp-sync')(gulp);

gulp.task('compile-es6', function() {
 return gulp.src('app/es6/*')
 .pipe(babel({
 presets: ['es2015']
 }))
 .pipe(gulp.dest('app/js'));
});

gulp.task('pack-js', function() {
 return gulp.src('app/js/main.js')
 .pipe(browserify())
 .pipe(rename('bundle.js'))
 .pipe(gulp.dest('app/bundle'));
});

gulp.task('compress-bundle', function() {
 return gulp.src('app/bundle/bundle.js')
 .pipe(uglify())
 .pipe(rename('bundle.min.js'))
 .pipe(gulp.dest('app/bundle'));
});

//build source files to released bundle file
gulp.task('build', gulpsync.sync(['compile-es6', 'pack-js', 'compress-bundle']), function() {
 if (process.argv.pop() == '--dev') {
 //watch any change and then re-run the tasks
 gulp.watch('app/es6/*', gulpsync.sync(['compile-es6', 'pack-js', 'compress-bundle']));
 }
});

//run a server listening at port 8000
gulp.task('server', function() {
 connect.server({
 root: 'app',
 port: 8000,
 livereload: true
 });
});

最后，只需在命令行中执行两个命令即可：

gulp build --dev

gulp server

第一个命令指定了开发模式，该模式会监听 es6 目录中的文件改动并重新构建；第二个命令用于启动服务，在 8000 端口进行监听。

上述项目已托管至 Github，感兴趣的同学可查看或克隆至本地亲自尝试。

github 地址：https://github.com/scottliu2011/es6-dev

本地下载地址：http://xiazai.jb51.net/201707/yuanma/es6-dev(jb51.net).rar

总结

以上为本文全部内容，希望本文内容对大家的学习或工作有所助益。如有疑问，欢迎留言交流，感谢支持。