title: What is the correct way to load polyfills and shims with Browserify
body: <p>I'm building a web app and I'm getting to know and love Browserify. One thing has bugged me though.</p>
  
  <p>I'm using some ES6 features that need to be shimmed/polyfilled in older browsers such as <code>es6-promise</code> and <code>object-assign</code> (packages on npm).</p>
  
  <p>Currently I'm just loading them into each module that needs them:</p>
  
  <pre><code>var assign  = require('object-assign');
  var Promise = require('es6-promise');
  </code></pre>
  
  <p>I know this is definitely not the way to go. It is hard to maintain and I would like to use the ES6 features transparently instead of having to "depend" on them via requires.</p>
  
  <p>What's the definitive way to load shims like these? I've seen several examples around the internet but they're all different. I could:</p>
  
  <ul>
  <li><p>load them externally:</p>
  
  <pre><code>var bundle = browserify(); 
  bundle.require('s6-promise');
  // or should I use it bundle.add to make sure the code is runned???
  </code></pre>
  
  <p>The problem I have here is that I don't know which order the modules
  will be loaded in in the browser. So the polyfilling might not have happened
  yet at call sites that need the polyfilled functionality.</p>
  
  <p>This has the additional downside that backend code cannot benefit from these
  polyfills (unless I'm missing something).</p></li>
  <li><p>use <code>browserify-shim</code> or something similar. I don't really see how this would work for ES6 features.</p></li>
  <li><p>manually set up the polyfilling:</p>
  
  <pre><code>Object.assign = require('object-assign');
  </code></pre></li>
  </ul>