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

Question

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

我正在使用 npm 和 Bower 来管理我的依赖项，Gulp 来自动化我的任务，我想使用 CommonJS' module.exports/require() 将所有内容捆绑在一起:我决定使用 Browserify 将所有内容捆绑在一起向上。

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

---

为了能够 require('angular')，我配置了 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 和全部。

以 ng-dialog 为例，它也需要('angular')。通过 bower install ng-dialog --save 检索后，我会做两件事:

1. 将他们的 dist 的 JS 文件链接到我的 package.json 中的关键字(比如 ng-dialog)
2. 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": {
  "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'

经过半小时的调整，结果证明只需从 bower_components/ng-dialog 中删除 package.json 文件让一切顺利进行。

这是怎么回事，我到底应该如何捆绑 ngDialog.min.js？

Answer 1

如 Browserify Handbook 中所述

The module system that browserify uses is the same as node, so packages published to npm that were originally intended for use in node but not browsers will work just fine in the browser too.

Increasingly, people are publishing modules to npm which are intentionally designed to work in both node and in the browser using browserify and many packages on npm are intended for use in just the browser. npm is for all javascript, front or backend alike.

因此使用 Angular 和 ngDialog 包的 npm 分发而不是 bower 包

npm install angular ng-dialog --save

这将消除在 package.json 中进行整个配置的需要，只需在项目中调用 require() 即可使 browserify 工作。

当我们需要项目中的任何节点模块时，browserify 会捆绑该节点模块的 package.json 的 main 字段中的文件。目前 ngDialog 的主要字段引用 ngDialog.js 文件，因此您需要将其更改为 ngDialog.min.js 以便 browserify 捆绑该文件。 (这不是主要问题，因为您使用 gulp-uglify 压缩了 browserify 包)

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