debowerify

1.5.0 • Public • Published

debowerify

A browserify transform to enable the easy use of bower components in browserify client javascript projects.

This can be used in conjunction with deamdify to require AMD components from bower as well.

NB: For more information about how to use debowerify to create stand-alone library bundles check out bower-resolve and the examples in the README.

build status

Installation

Installation is via npm:

$ npm install debowerify

How to use.

Install some bower components:

# creates files in components/screenfull/
$ bower install screenfull

Require the bower file by it's bower identifier (ie. in this case "screenfull"):

// public/scripts/app.js
var _screenfull = require('screenfull'); // the bower component
var domready = require('domready'); // a regular browserify npm component
 
domready(function () {
  var button = document.getElementById('fullscreen');
  button.addEventListener('click', function (evt) {
    // screenfull adds itself to window.screenfull - but we can get to it
    if (screenfull.enabled) {
      screenfull.toggle(this);
    }
  });
});

Build out your browserify bundle using the debowerify transform:

$ browserify -t debowerify  public/scripts/app.js -o public/scripts/build/bundle.js

Then include your bundle.js in your HTML file and you're done!

Options

preferNPM

Set preferNPM option to true, or an array of module names, to have debowerify prefer NPM modules over bower components. This is useful for when you have a module that is installed both as a node module and as a bower component.

How to use with AMD components

If your bower components are amd and they don't support commonjs modules than simply use debowerify with the excellent deamdify browserify transform. For example, the following AMD bower import:

# creates files in components/myamdcomponent/
$ bower install myamdcomponent
// public/scripts/amdapp.js
var myamdcomponent = require('myamdcomponent'); // the AMD bower component
var domready = require('domready'); // a regular browserify npm component
 
domready(function () {
  // call the amd component
  myamdcomponent.doStuff();
});

To make this all magically work and use the short-form bower name of "amdcomponent" chain both debowerify and deamdify together like this:

$ browserify -t debowerify -t deamdify public/scripts/amdapp.js -o public/scripts/build/bundle.js

Too easy!

Notes

The transform depends on the "main" entry in bower.json to be correct.

Some bower components may not have this set, or have it set incorrectly. In this case, either manually update the bower.json file yourself, of just do a require to the relevant full path of the bower javascript file - and then complain to the bower component repo owner! :-)

Contributing

debowerify is an OPEN Open Source Project. This means that:

Individuals making significant and valuable contributions are given commit-access to the project to contribute as they see fit. This project is more like an open wiki than a standard guarded open source project.

See the CONTRIBUTING.md file for more details.

Contributors

debowerify is only possible due to the excellent work of the following contributors:

Eugene WareGitHub/eugeneware
Justin HilemanGitHub/bobthecow
Liam CurryGitHub/liamcurry
andöGitHub/dre1080
Riku RouvilaGitHub/rikukissa
Frank WallisGitHub/frankwallis
Frédéric Langlade-BelloneGitHub/fredericlb
pjebyGitHub/pjeby
Dave MacGitHub/DveMac
Rhys EvansGitHub/wheresrhys
Adam KrebsGitHub/akre54
Matt KunzeGitHub/MattKunze
Francesc RosasGitHub/frosas
Toby HoGitHub/airportyh
Devin WeaverGitHub/sukima
Stein Martin HustadGitHub/smh
00DavoGitHub/00Davo
Max NordlundGitHub/maxnordlund
Christian TellnesGitHub/tellnes
Jorrit PosthumaGitHub/JorritPosthuma
Andrew SmithGitHub/ashrewdmint
Adam DuncanGitHub/microadam
Robert OvensGitHub/rovens

Package Sidebar

Install

npm i debowerify

Weekly Downloads

408

Version

1.5.0

License

BSD

Last publish

Collaborators

  • aendrew
  • eugeneware
  • nharbour