Make bower work with npm using browserify

Question

We are both blessed and cursed by a plethora of package management solutions for JavaScript, all with their respective merits. For reasons that are irrelevant here, I have settled on npm for my primary solution. However, there is too much good code out there on other systems like bower and component to ignore these solutions. So, I am looking to set up an environment where I can use browserify to load packages from both npm and bower (we'll save component for another question).

The best I came up with so far was to setup my package.json with a postinstall script that runs bower install:

{
  ... configuration ...

  "scripts": {
    "postinstall": "bower install"
  }
}

This builds the correct directory structure when installing first-level dependencies (i.e. strait bower dependencies and strait npm dependencies):

- MyMixedComponent
  - main.js
  - package.json
  - node_modules
    - npmDependency
  - bower_components
    - bowerComponent

Which builds fine using the debowerify transform on browserify, browserify -t debowerify However, when I want to then install MyMixedComponent from npm in another project, npm install MyMixedComponent, the directory structure is built as you would expect from npm:

- MyNewProject
  - main.js
  - package.json
  - node_modules
    - MyMixedComponent
      - main.js
      - package.json
      - node_modules
        - npmDependency
      - bower_components
        - bowerComponent

Since bower is a flat dependency tree, this of course does not work when trying to build with browserify and debowerify. Whats actually needed is something like this:

- MyNewProject
  - main.js
  - package.json
  - node_modules
    - MyMixedComponent
      - main.js
      - package.json
      - node_modules
        - npmDependency
   - bower_components
     - bowerComponent

Alternatively debowerify could be modified to recognize multiple bower directories, but that would defeat the lovely characteristic of bower that it is a flat tree, which is much better for front end dependencies. Any thoughts about how this could work, or should I just pray that we all someday agree on dependency management?

Answer 1

The idea of having multiple bower_components in the same codebase, has the risk of introducing duplicates of some particular framework.

Try going down the road of :

1. When installing an mixed (npm and bower) package into my current package,
2. Install npm as usual (nested),
3. And for-each bower-component from mixed-package bower install into root of current package
4. An interactive npm postinstall script, could just alter the bower.json of the current package
5. And warn the user to do a bower install, since bower.json is now updated with the components from your other npm/bower mixed package