Browserify and bower. Canonical approach

Question

The way I'm using packages that not available out of the box in npm, right now is like that:

package.json has:

 "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"

and that installs files into node_modules directory, and I use them natively like this

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

That works, but I was thinking if it's possible to use packages installed with bower (into bower specific folder) and use them natively as node modules? Is it possible to tweak node's module resolution and force it to look for modules not just inside node_modules directory, but also in bower directory as well? Or maybe using npm link or whatever?

Is there some sort of convention to use browserify with bower?

Solution 1

You can use browserify-shim and configure the bower-installed modules in your package.json like this:

"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"]
  }
},

Then your code can require them by their short name as if there were regular npm modules.

Here is the spec for the "browser" package.json property.

Solution 2

You can try to install via debowerify

The package.json may then look as follows:

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

Given angular is installed with

bower install angular

Then within the js file will be as follows:

require("angular");