title: What is the best way to load Bootstrap with an ES6 import?
body: <p>I recently switched from using Require.js to using WebPack with Babel. In the past I would use the CommonJS standard in my JS modules, like this</p>
  
  <pre><code>var $ = require('jquery');
  require('bootstrap');
  </code></pre>
  
  <p>Since Bootstrap is a jQuery plugin, jQuery would load first and bootstrap would load second.</p>
  
  <p>Babel allows me to use ES6 <code>import</code> statements. But when I write</p>
  
  <pre><code>import $ from 'jquery';
  import Bootstrap from 'bootstrap';
  </code></pre>
  
  <p>I get the error that <code>$ is undefined</code>. Bootstrap assumes that <code>window.$</code> is present, but <code>import</code> does not pollute the window object, which is a good thing, but leaves my code like this:</p>
  
  <pre><code>// legacy loading for bootstrap
  var $ = require('jquery');
  window.$ = $;
  require('bootstrap');
  // the rest of the imports
  import _ from 'underscore';
  </code></pre>
  
  <p>There must be a better solution. Any help appreciated.</p>