浏览包含package.json的文件夹时，Browserify会覆盖自己的配置

我使用AngularJS创建了一个简单的JavaScript应用程序。

我使用npm和Bower来管理我的依赖项，使用Gulp自动化我的任务，我想使用<strong]CommonJS>的module.exports/require()将所有内容捆绑在一起：我决定使用2Browserify将所有内容打包。

如果你想看看的话，Github上有我的非常空和干净项目。

为了能够使用require('angular')，我将Browserify配置为将AngularJS填充到可用模块中，使用Browserify填充程序。非常简单，以下是我的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', ['$scope', require('./view2/view2.js')]);

这是有效的。

现在，我正在尝试使用通过Bower提供的外部库来了解一些更高级的内容。它们安装在bower_components下，看起来很好，就像我的项目一样，它们有一个package.json、bower.json等等。

以ng对话框为例，该对话框也是require('angular')。一旦通过bower install ng-dialog --save检索到，我会做两件事：

1. 将他们dist的JS文件链接到我的package.json中的关键字（比如ng-dialog）
2. require('ng-dialog')在主JS文件中，以便让我的Angular模块依赖他们

以下是我的package.json的更新相关部分（注意ng对话框是否不需要填充）：

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

和我更新的app.js文件：

'use strict';
var angular = require('angular');
require('ng-dialog');
angular.module('MyApp', ['ngDialog'])
  .controller('View1Ctrl', ['$scope', require('./view1/view1.js')])
  .controller('View2Ctrl', ['$scope', 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？