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 到可用模块，使用 browserify-shim。非常简单，这是我的 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 检索后，我会做两件事：

Link 他们 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": {
  "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 包）

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

Browserify 在浏览包含 package.json?

Browserify overrides its own configuration when browsing a folder that contains a package.json?

javascript

angularjs

browserify