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         


        

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

Answer 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");