Browserify 在浏览包含 package.json?
Browserify overrides its own configuration when browsing a folder that contains a package.json?
我使用 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
?
中所述
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
我使用 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
中的关键字(比方说 require('ng-dialog')
在主 JS 文件中,以便让我的 Angular 模块依赖于他们的。
ng-dialog
)
这是我的 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
?
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