Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 747
iLemming Avatar asked May 16 '14 02:05

iLemming


2 Answers

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");
like image 173
Ian Lim Avatar answered Oct 24 '22 22:10

Ian Lim


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.

like image 31
Peter Lyons Avatar answered Oct 24 '22 20:10

Peter Lyons