我正在使用npm和Bower来管理我的依赖项,Gulp自动执行我的任务,我想使用CommonJS的module.exports / require()将所有内容组合在一起：我决定让Browserify将这一切捆绑在一起.

如果你想看一下,那就是my very empty and clean project on Github.

为了能够要求(‘angular’),我使用browserify-shim将Browserify配置为将AngularJS填充到可用模块中.非常简单,这是我的package.json的相关部分：

"browser": {
  "angular": "./bower_components/angular/angular.min.js"
},"browserify": {
  "transform": [
    "browserify-shim"
  ]
},"browserify-shim": {
  "angular": {
    "exports": "angular"
  }
}

它非常整洁,我的主要JS文件现在看起来像这样：

'use strict';

var angular = require('angular');

angular.module('MyApp',[])
  .controller('View1Ctrl',['$scope',require('./view1/view1.js')])
  .controller('View2Ctrl',require('./view2/view2.js')]);

这很有效.

现在,我正在尝试使用Bower提供的外部库来获得更高级的东西.它们安装在bower_components下并且看起来像我的项目一样,它们有一个package.json,一个bower.json等等.

以ng-dialog为例,它也需要(‘angular’).一旦通过bower install ng-dialog -save检索,我做了两件事：

>将他们的dist的JS文件链接到我的package.json中的关键字(比如说ng-dialog)
> require(‘ng-dialog’)在主JS文件中,以使我的Angular模块依赖于他们的.

这是我的package.json的更新相关部分(请注意,ng-dialog不需要填充)：

"browser": {
  "angular": "./bower_components/angular/angular.min.js","ng-dialog": "./bower_components/ng-dialog/js/ngDialog.min.js"
},"browserify-shim": {
  "angular": {
    "exports": "angular"
  }
}

…和我更新的app.js文件：

'use strict';

var angular = require('angular');
require('ng-dialog');

angular.module('MyApp',['ngDialog'])
  .controller('View1Ctrl',require('./view2/view2.js')]);

在浏览器化时出现以下错误：

Error: Cannot find module 'angular' from 'C:\...\bower_components\ng-dialog\js'

经过半个小时的调整后,结果发现SIMPLY从bower_components / ng-dialog中删除了package.json文件,这一切都很顺利.

发生了什么以及我该如何捆绑ngDialog.min.js？