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

Question

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

我正在使用npm和Bower管理我的依赖项,Gulp自动执行我的任务,我想使用CommonJS ' module.exports/ require()将所有内容组合在一起:我决定让Browserify将这一切捆绑起来.

如果你想看看,我在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文件链接到我的关键字(让我们说ng-dialog)package.json
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')]);

我收到以下错误,而Browserify-ING这件事:

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

调整围绕的一个很好的半小时后,事实证明,简单地删除了package.json从文件bower_components/ng-dialog让这一切顺利.

发生了什么,我该ngDialog.min.js怎么捆绑呢？

Answer 1

如Browserify手册中所述

浏览器使用的模块系统与节点相同,因此发布到npm的包最初打算用于节点而不是浏览器,在浏览器中也可以正常工作.

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

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

npm install angular ng-dialog --save

这将取消完成整个配置的需要package.json,只需调用require()项目就可以使浏览器工作.

当我们需要项目中的任何节点模块时,browserify捆绑存在于该main相应节点模块的package.json字段中的文件.目前,当ngDialog的主要字段引用该ngDialog.js文件时,您需要将其更改为ngDialog.min.js以便browserify捆绑该文件.(当您使用压缩浏览器捆绑包时,这不是主要问题gulp-uglify)

我已经分叉你的代码并完成了必要的修改 - 在这里查看它们https://github.com/pra85/angular-seed