Question

当我尝试使用browserify捆绑角度和angular-hammer（Ryan Mullins版本）时，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，因为抛出了一个错误，要求这个角锤的缺失依赖。）

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

'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捆绑角锤？

谢谢！

Answer 1

经过一番搜索，学习和游戏，我发现了这个问题。这确实是一个浏览器错误。

感谢angular-hammer-propagating分叉的文档，我发现package.json需要一些扩展。据我所知1）让browserify知道它应该运行browserify-shim和2）让browserify-shim知道在哪里找到角锤依赖关系。 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"
      ]
    }
  }
}

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

(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.输出到控制台。可以在here找到此角锤式样板Web应用程序的代码。

使用browserify

1 个答案: