浏览包含package.json的文件夹时，Browserify会重写自己的配置？

Question

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

我使用npm和Bower来管理我的依赖项，使用Gulp来自动化我的任务，并且我想使用CommonJS‘module.exports/require()将所有东西连接在一起:我决定使用E 112BrowserifyE 213来捆绑所有这些。

这是吉特卜项目，如果你想看的话。

为了能够使用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', ['$scope', require('./view2/view2.js')]);

而且这很管用。

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

以require('angular'). ng-为例，其中也是一旦通过bower install ng-dialog --save检索，我会做两件事：

1. 将他们的dist的JS文件链接到我的package.json中的关键字(比如ng-dialog)
2. require('ng-dialog')在主JS文件中，为了使我的角度模块依赖于它们。

下面是我的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')]);

在进行Browserify-ing处理时，我会得到以下错误：

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

经过半个小时的调整后，事实证明，仅仅是从bower_components/ng-dialog中删除 package.json文件就可以使一切顺利进行。

怎么回事，我该怎么把那个ngDialog.min.js捆起来

Answer 1

如褐化手册所述

browserify使用的模块系统与节点相同，因此发布到npm的包最初用于节点，而不是浏览器，在浏览器中也会工作得很好。 人们越来越多地向npm发布模块，这些模块被有意设计为在节点和浏览器中使用browserify，而且npm上的许多包都打算仅在浏览器中使用。npm适用于所有javascript，前端或后端一样。

因此，使用Angular和ngDialog包的npm发行版，而不是使用首级包。

npm install angular ng-dialog --save

这将消除在package.json中完成整个配置的需要，并且在项目中简单地调用require()将使浏览器化工作。

当我们需要项目中的任何节点模块时，browserify将相应节点模块的main字段中的文件捆绑在一起。当前，由于ngDialog的主字段引用了ngDialog.js文件，因此您需要将其更改为ngDialog.min.js，以便对该文件进行浏览器化。(在使用gulp-uglify压缩浏览器包时，这不是一个主要问题)

我已经分叉了您的代码，并在其中做了必要的更改-在这里检查它们，https://github.com/pra85/angular-seed。