原文地址：Setting up an ES6 Project Using Babel and Browserify
JavaScript的发展日新月异，ES6很快就要接管JS了。很多著名的框架像AngularJS 2、React Native已经开始支持ES6了。我们是时候准备拥抱变化了，所以我们应该开始在几乎所有的浏览器支持之前使用ES6码代码了。
本文将要介绍如何使用Babel和Browerify来创建项目并且编写能够运行在老版本浏览器上的现代代码。Babel将ES6代码编译为大多数浏览器（包括IE9）支持的ES5代码。Browserify可以让我们遵循CommonJS规范书写代码，然后经过包装在浏览器中使用。
创建package.json文件
首先，我们看一下我们将要创建的Demo的文件结构。
项目的根目录下，有两个文件：Gruntfile.js和package.json，两个文件夹dist和modules。modules文件夹下包括用ES6编写的所有模块，dist文件夹下包含编译和打包后的ES5文件。我没有在文件夹里包含.gitignore文件是因为它只是一个工具文件没什么乱用。
现在我们来创建package.json文件，一个标准的package.json包含许多字段，比如description、version、author还有其他神马的，但在这个项目我们只写一些比较重要的。
package.json内容如下：
{
"name": "browserify-babel-demo",
"main": "dist/module.js",
"devDependencies": {
"grunt": "^0.4.5",
"babelify": "^6.1.0",
"grunt-browserify": "^3.8.0",
"grunt-contrib-watch": "^0.6.1"
}
}
从上述文件可以看到，项目中使用到的有：
- Grunt JavaScript任务构建工具
- grunt-browserify Grunt browserify任务
- babelify Browserify的babel转换器
- grunt-contrib-watch 监听JavaScript的每次改变然后选择性的执行任务，在我们的例子中，文件每次改变都要执行Browserify任务。
devDependencies中的模块只在开发环境中使用，而不是在代码运行过程中。模块的版本号可以根据使用设置。
现在在项目根目录下运行 npm install来安装package.json中声明的依赖模块，如果你还不熟悉npm，建议你读一下这篇文章。
（译者注：要想使用最新版本的依赖模块，可以不事先在package.json文件写好，执行如下命令安装：npm install grunt --save-dev，安装完成后依赖模块会自动出现在package.json中）。
创建Gruntfile.js
本文假设你已经了解Grunt，并且知道Gruntfile.js是如何和Grunt工作的。如果不熟悉，我建议在阅读下面的内容前，看一下这篇文章。
使用ES6书写的JavaScript文件可以使用js或者es6作为扩展名，这里为了简洁，统一使用js作为扩展名，Gruntfile.js代码如下：
module.exports = function (grunt) {
grunt.initConfig({
browserify: {
dist: {
options: {
transform: [
["babelify", {
loose: "all"
}]
]
},
files: {
// if the source file has an extension of es6 then
// we change the name of the source file accordingly.
// The result file‘s extension is always .js
"./dist/module.js": ["./modules/index.js"]
}
}
},
watch: {
scripts: {
files: ["./modules/*.js"],
tasks: ["browserify"]
}
}
});
grunt.loadNpmTasks("grunt-browserify");
grunt.loadNpmTasks("grunt-contrib-watch");
grunt.registerTask("default", ["watch"]);
grunt.registerTask("build", ["browserify"]);
};
我们定义了两个Grunt任务：
- grunt default/grunt：当我们在项目根目录运行这个命令，这个任务会监听modules文件夹下所有JS文件的变化。当检测到任何变化时，Grunt都会执行Browserify任务。任务终断之前，watch任务会一直运行。Ctrl+C来终断任务。
- grunt build：Browserify任务运行一次后停止。
Browserify任务每一次执行都会将modules文件下的所有ES6代码打包成一个JavaScript文件，然后通过Babelify将ES6代码转换成ES5代码。
从上面的代码看到，我们给babelify的设置是loose:"all"，是因为我们希望转换出的ES5代码和我们写的ES6代码能够足够的接近，而不是严格的按照规范，这样，对ES6初学者来说更容易调试。Babel提供的所有选项见这里。
写点ES6代码
这个demo只使用一点ES6的特性，比如import和export。如果你想深入学习ES6，可以看看SitePoint上的这些文章。你将会学习到ES6提供的那些新奇而且令人激动的特性。
在我们的demo里我们将在modules文件夹下创建两个文件，index.js和import.js，前面一个文件是项目的主文件，后一个文件作为一个模块提供了所有的函数和变量。也就是说，index.js会从import.js中导入（import）所有的函数和变量。
import.js文件如下：
var sum = (a, b = 6) => (a + b);
var square = (b) => {
return b * b;
};
var variable = 8;
class MyClass {
constructor(credentials) {
this.name = credentials.name;
this.enrollmentNo = credentials.enrollmentNo
}
getName() {
return this.name;
}
}
export { sum, square, variable, MyClass };
import.js作为一个模块，对外提供了一个变量、一个类和函数表达式（箭头函数书写）。模块中定义的函数和变量对外是不可见的，除非显式的导出（export）他们。你可以使用export关键字。在import.js的最后一行，我们到处了sum、square、variable、MyClass。
在index.js文件中，我们使用import关键字导入import.js中的所有函数和变量，index.js成为了项目的主文件。从下面的index.js文件内容可以看到，我们是怎么使用导入的square函数和MyClass的。我们可以从任意多的文件中导入任何变量和方法。
import {sum, square, variable, MyClass} from ‘./import‘;
// 25
console.log(square(5));
var cred = {
name: ‘Ritesh Kumar‘,
enrollmentNo: 11115078
}
var x = new MyClass(cred);
//Ritesh Kumar
console.log(x.getName());
如果我们想导入一个es6扩展名的模块，那么我们必须在import中写完整的文件名。看下面的例子：
// if file extension of the importing file is .js
// both below mentioned methods work
import { sum, square, variable, MyClass } from ‘./import‘;
import { sum, square, variable, MyClass } from ‘./import.js‘
//if file extension of the importing file is .es6
// its mandatory to add the extension
import { sum, square, variable, MyClass } from ‘./import.es6‘;
假如我们正在使用Browserify，我们依然可以使用require()方法导入符合CommonJS规范的模块。例如：我们想使用导入jQuery作为一个模块，可以这样：
var $ = require(‘path/to/jquery‘);
$(window).click(function(){
//do something
});
Babel可以转换ES6到ES5，但不能打包模块。Browserify登场！
ES6的import、export结合require方法使得我们可以自由的用模块来组织我们的客户端代码，同时又可以使用新版本的JavaScript书写我们的代码。
只要我们在终端运行grunt命令就会：
- Browserify把所有的文件打包成一个JavaScript文件
- 打包后的文件通过Babelify转换成为ES5代码
- 生成一个名为module.js的文件，可以运行在所有的现在浏览器上，包括IE9
那么module.js长啥样呢，看：
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module ‘"+o+"‘");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
"use strict";
exports.__esModule = true;
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var sum = function sum(a) {
var b = arguments[1] === undefined ? 6 : arguments[1];
return a + b;
};
var square = function square(b) {
"use strict";
return b * b;
};
var variable = 8;
var MyClass = (function () {
function MyClass(credentials) {
_classCallCheck(this, MyClass);
this.name = credentials.name;
this.enrollmentNo = credentials.enrollmentNo;
}
MyClass.prototype.getName = function getName() {
return this.name;
};
return MyClass;
})();
exports.sum = sum;
exports.square = square;
exports.variable = variable;
exports.MyClass = MyClass;
},{}],2:[function(require,module,exports){
‘use strict‘;
var _import = require(‘./import‘);
console.log((0, _import.square)(5)); //25
var cred = {
name: ‘Ritesh Kumar‘,
enrollmentNo: 11115078
};
var x = new _import.MyClass(cred);
console.log(x.getName());
},{"./import":1}]},{},[2]);
这个文件可以和其他普通的文件一样用在你的Web页面里，如果你愿意，你也可以使用其他的Grunt任务，比如grunt-uglify、grunt-rev或者其他的任务，对module.js进行操作，操作完成后，你就可以在html页面中使用了。
<!-- Usage of the final bundled file in html --> <script src="path/to/module.js"></script>
结论
本文介绍了如何使用JavaScript的新特性来创建项目，此外，我还介绍了如何使用grunt-browserify和babelify来配置Grunt任务，我们创建了一个示例项目来展示他们如何工作，ES6代码如何转换为ES5代码。
我希望你喜欢这篇文章，并且期待着你的评论。你也可以来这里把玩一下这个示例项目。