Gulp 在将 angular 和 angular-hammer 与 browserify 捆绑时抛出错误

Question

当我尝试将 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 错误吗？我的 browserify 经验有限，所以情况很可能如此。还是不能将 angular-hammer 与 browserify 捆绑在一起？

谢谢！

Answer 1

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

感谢 angular-hammer-propagating 分支的文档，我发现 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.');
        }    
    }]);

}());

我创建了一个带有正方形 div 的基本 index.html，它在被点击时调用 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.

中找到

Gulp 在将 angular 和 angular-hammer 与 browserify 捆绑时抛出错误

Gulp throws an error when bundling angular and angular-hammer with browserify

angularjs

browserify

hammer.js

gulp