Browserify 和 Bower. 规范化方法

Question

我现在使用的不在npm默认包中的软件包的方法是这样的：

package.json文件中有：

 "napa": {
     "angular": "angular/bower-angular",
     "angular-animate": "angular/bower-angular-animate",
     "d3": "mbostock/d3",
     "ui-router":"angular-ui/ui-router",
     "bootstrap":"twbs/bootstrap"
  },
  "scripts": {
     "install": "node node_modules/napa/bin/napa"

它会将文件安装到node_modules目录中，我可以像这样本地使用它们

require('angular/angular')
require('ui-router') 
... etc

那个方法可行，但我在想是否可以使用通过bower安装的包（安装在特定的bower文件夹中），并将它们作为node模块本地使用？是否可以调整node的模块解析方式，并强制它不仅在node_modules目录中查找模块，还在bower目录中查找模块？或者可以使用npm link或其他方法吗？

是否有某种约定来使用browserify和bower？

- iLemming

---

为什么要在服务器上使用Angular？还是这些要求只出现在浏览器中？ - Ian Warburton

Answer 1

你可以尝试通过debowerify进行安装。

此时package.json可能如下所示：

{
  "name": "browserify-begin",
  "version": "0.0.0",
  "dependencies": {
  },
  "browserify": {
    "transform": [
      "debowerify"
    ]
  },
  "devDependencies": {
    "browserify": "^4.1.5",
    "debowerify": "^0.7.1",
    "grunt": "^0.4.5"
  }
}

假设已经安装了Angular

bower install angular

然后在js文件中将如下：

require("angular");

- Ian Lim

Answer 2

你可以使用browserify-shim，并像这样在package.json中配置bower安装的模块：

"browser": {
  "angular": "./bower_components/angular/angular.js",
  "angular-resource": "./bower_components/angular-resource/angular-resource.js"
},
"browserify-shim": {
  "angular": {
    "exports": "angular"
  },
  "angular-resource": {
    "depends": ["./bower_components/angular/angular.js:angular"]
  }
},

然后你的代码可以像普通的npm模块一样，根据它们的短名称require它们。

这里是“browser”包.json属性的规范说明。

- Peter Lyons

---

似乎只需在“browser”部分设置所有内容即可（甚至无需安装browserify-shim）...现在的问题是：browserify是否支持浏览器部分中的通配符？我们可以这样做：“browser”：{“*”：“./bower_components/”}。还是每个单独的包都必须明确列出？ - iLemming

通配符支持对我来说似乎不太可能，但你可以试一下。 - Peter Lyons