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

Question

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

我使用 npm 和 Bower 管理我的依赖项， Gulp 自动执行我的任务，我想使用 CommonJS的＆＃39; module.exports / require()将所有内容组合在一起：我决定选择 Browserify 将这一切捆绑在一起。

有my very empty and clean project on Github，如果你想看看。

为了能够require('angular')，我使用 browserify-shim将 Browserify 配置为将 AngularJS 整理到可用模块中STRONG>。非常简单，这是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-dialog 为例，其中也require('angular') 。通过bower install ng-dialog --save检索后，我会做两件事：

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

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

"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 删除来自package.json的{​​{1}}文件使得一切顺利。

发生了什么以及我该如何捆绑bower_components/ng-dialog？

Answer 1

如Browserify Handbook

中所述

  

browserify使用的模块系统与节点相同，因此发布到npm的软件包原本打算在节点中使用但不能在浏览器中使用，也可以在浏览器中正常工作。

     

人们越来越多地将模块发布到npm，这些模块有意设计为使用browserify在节点和浏览器中工作，而npm上的许多软件包仅用于浏览器。 npm is for all javascript，前端或后端等。

因此，使用Angular和ngDialog包的npm分布而不是凉亭

npm install angular ng-dialog --save

这将取消在package.json中完成整个配置的需要，只需在项目中调用require()即可使浏览器工作。

当我们需要项目中的任何节点模块时，browserify会捆绑该相应节点模块的package.json的main字段中的文件。目前，当ngDialog的主要字段引用ngDialog.js文件时，您需要将其更改为ngDialog.min.js，以便browserify捆绑该文件。 （当您使用gulp-uglify）

压缩浏览器包时，这不是主要问题

我已经分叉了您的代码并对其进行了必要的更改 - 请在此处查看https://github.com/pra85/angular-seed