What is the best way to load Bootstrap with an ES6 import?
<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>