[译]使用Babel和Browserify创建你的ES6项目

时间：2021-04-09 17:46:26

原文地址：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的文件结构。

[译]使用Babel和Browserify创建你的ES6项目

项目的根目录下，有两个文件：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任务：

  1. grunt default/grunt：当我们在项目根目录运行这个命令，这个任务会监听modules文件夹下所有JS文件的变化。当检测到任何变化时，Grunt都会执行Browserify任务。任务终断之前，watch任务会一直运行。Ctrl+C来终断任务。
  2. 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';

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)); 

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代码。

我希望你喜欢这篇文章，并且期待着你的评论。你也可以来这里把玩一下这个示例项目。

相关文章