title: Make bower work with npm using browserify
body: <p>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).  </p>
  
  <p>The best I came up with so far was to setup my <code>package.json</code> with a <code>postinstall</code> script that runs <code>bower install</code>:</p>
  
  <pre><code>{
    ... configuration ...
  
    "scripts": {
      "postinstall": "bower install"
    }
  }
  </code></pre>
  
  <p>This builds the correct directory structure when installing first-level dependencies (i.e. strait bower dependencies and strait npm dependencies):</p>
  
  <pre><code>- MyMixedComponent
    - main.js
    - package.json
    - node_modules
      - npmDependency
    - bower_components
      - bowerComponent
  </code></pre>
  
  <p>Which builds fine using the <a href="https://github.com/eugeneware/debowerify" rel="noreferrer">debowerify</a> transform on browserify, <code>browserify -t debowerify</code>   However, when I want to then install MyMixedComponent from npm in another project, <code>npm install MyMixedComponent</code>, the directory structure is built as you would expect from npm:</p>
  
  <pre><code>- MyNewProject
    - main.js
    - package.json
    - node_modules
      - MyMixedComponent
        - main.js
        - package.json
        - node_modules
          - npmDependency
        - bower_components
          - bowerComponent
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>- MyNewProject
    - main.js
    - package.json
    - node_modules
      - MyMixedComponent
        - main.js
        - package.json
        - node_modules
          - npmDependency
     - bower_components
       - bowerComponent
  </code></pre>
  
  <p>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?</p>