Search code examples
node.jsbowerbrowserify

Browserify and bower. Canonical approach


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

  • 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.