使用 browserify 捆绑 angular 和 angular-hammer 时 Gulp 抛出错误答案

【问题标题】：Gulp throws an error when bundling angular and angular-hammer with browserify使用 browserify 捆绑 angular 和 angular-hammer 时 Gulp 抛出错误
【发布时间】：2015-05-25 16:14:16
【问题描述】：

当我尝试将 angular 和 angular-hammer（Ryan Mullins 版本）与 browserify 捆绑时，Gulp 会抛出一个不清楚的错误。

对于应用程序的精简版本，package.json 文件是：

{
  "name": "hammer-test",
  "version": "0.0.0",
  "description": "",
  "main": "app/main.js",
  "devDependencies": {
    "browserify": "^10.2.1",
    "browserify-shim": "^3.8.7",
    "gulp": "^3.8.11",
    "vinyl-source-stream": "^1.1.0"
  },
  "dependencies": {
    "angular": "^1.3.15",
    "angular-hammer": "^2.1.10",
    "hammerjs": "^2.0.4"
  }
}

（我包含了 browserify-shim，因为抛出了一个错误，要求 angular-hammer 缺少这个依赖项。）

gulpfile.js 包含一个运行 browserify 的捆绑任务：

'use strict';

var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');

// Bundle (browserify).
gulp.task('bundle', function() {

    return browserify('./app/js/main.js')
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('./dist/js'));
});

gulp.task('default', ['bundle']);

最后，主 javascript 文件 app/js/main.js 包含：

(function() {
    'use strict';

    // Require stuff.
    var angular = require('angular');
    var Hammer = require('hammerjs');
    require('angular-hammer');

    // Initialize angular application.
    var app = angular.module('myApp', ['hmTouchEvents']);

}());

应用程序的目录结构现在如下所示：

- app
  - js
    -main.js
- node_modules
  - angular
  - angular-hammer
  - browserify
  - browserify-shim
  - gulp
  - hammerjs
  - vinyl-source-stream
- gulpfile.js
- package.json

当我现在尝试使用命令运行捆绑任务时：

gulp

然后抛出如下错误：

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: ENOENT, open '/home/brennerd/Develop/hammer-test/node_modules/angular-hammer/node_modules/angular/angular.js'

该错误描述性不是很强，但某些路径似乎连接不正确。我在某处犯了浏览器错误吗？我的 browserify 经验是有限的，所以很可能就是这种情况。还是不能将 angular-hammer 与 browserify 捆绑在一起？

谢谢！

【问题讨论】：

标签： angularjs gulp browserify hammer.js

【解决方案1】：

经过一番搜索、学习和玩耍后，我发现了问题所在。这确实是一个browserify错误。

感谢angular-hammer-propagating fork 的文档，我发现package.json 需要一些扩展。据我了解 1）让 browserify 知道它应该运行 browserify-shim 和 2）让 browserify-shim 知道在哪里可以找到 angular-hammer 依赖项。 package.json 现在看起来像这样：

{
  "name": "hammer-test",
  "version": "0.0.0",
  "description": "",
  "main": "app/main.js",
  "devDependencies": {
    "browserify": "^10.2.1",
    "browserify-shim": "^3.8.7",
    "gulp": "^3.8.11",
    "vinyl-source-stream": "^1.1.0"
  },
  "dependencies": {
    "angular": "^1.3.15",
    "angular-hammer": "^2.1.10",
    "hammerjs": "^2.0.4"
  },
  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  },
  "browser": {
    "angular-hammer": "./node_modules/angular-hammer/angular.hammer.js"
  },
  "browserify-shim": {
    "angular-hammer": {
      "exports": "angular.module('hmTouchEvents').name",
      "depends": [
        "./node_modules/hammerjs/hammer.js:Hammer"
      ]
    }
  }
}

为了测试，我在main.js 文件中添加了带有handleTap 函数的HammerTestCtrl：

(function() {
    'use strict';

    // Require both angular and angular-hammer.
    var angular = require('angular');
    require('angular-hammer');

    // Initialize angular application.
    var app = angular.module('myApp', ['hmTouchEvents']);

    // Add controller to test hammer.
    app.controller('HammerTestCtrl', ['$scope', function($scope) {

        $scope.handleTap = function() {

            console.log('Tap detected.');
        }    
    }]);

}());

我创建了一个基本的index.html，它带有一个方形 div，当它被点击时会调用handleTap 函数：

<!DOCTYPE html>
<html lang="en" ng-app="myApp">

  <head>
    <meta charset="utf-8">
    <title>Test hammer-angular</title>
    <script src="js/bundle.js"></script>

  </head>

  <body ng-controller="HammerTestCtrl">
    <div hm-tap="handleTap" style="width: 300px; height: 300px; background-color: #eeeeec;"></div>
  </body>

</html>

在gulpfile.js 中，我添加了一个任务，将这个index.html 从app 移动到dist 目录：

'use strict';

var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');

// Bundle (browserify).
gulp.task('bundle', function() {

    return browserify('./app/js/main.js')
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('./dist/js'));
});

// HTML.
gulp.task('html', function() {

    gulp.src('app/index.html')
        .pipe(gulp.dest('dist/'));
});

gulp.task('default', ['bundle', 'html']);

在npm install 和这次成功的gulp 之后，目录结构如下所示：

- app
  - index.html
  - js
    -main.js
- dist
  - index.html
  - js
    - bundle.js
- node_modules
  - angular
  - angular-hammer
  - browserify
  - browserify-shim
  - gulp
  - hammerjs
  - vinyl-source-stream
- gulpfile.js
- package.json

浏览到dist/index.html 文件后，每次轻按浅灰色方块时，它都会正确地将Tap detected. 输出到控制台。这个 angular-hammer 样板 Web 应用程序的代码可以在 here 找到。

【讨论】：