title: Can I use an ES6/2015 module import to set a reference in 'global' scope?
body: <p>I have this situation where I am trying to import an existing library, which I'll call <code>troublesome</code> (using Webpack/Babel FWIW) and it has a global reference to <code>jQuery</code> in it which i am trying to resolve using module syntax.</p>
  
  <p>I have successfully imported jquery into the 'local' scope of a module, via:</p>
  
  <pre><code>import jQuery from 'jquery'
  </code></pre>
  
  <p>so I tried:</p>
  
  <pre><code>import jQuery from 'jquery'    
  import 'troublesome'
  </code></pre>
  
  <p>but perhaps not surprisingly, I get something like <code>jQuery is not a function</code> kicked back from <code>troublesome.js</code></p>
  
  <p>I have tried this as well:</p>
  
  <pre><code>System.import('jquery')
  .then(jQuery =&gt; {
      window.jQuery = jQuery
  })
  import 'troublesome'
  </code></pre>
  
  <p>but, it turns out that <code>System.import</code> is part of the, so-called, 'module-loader' spec, which was pulled from the es6/2015 spec, so it isn't provided by Babel. There is a <a href="https://github.com/ModuleLoader/es6-module-loader" rel="noreferrer">poly-fill</a>, but Webpack wouldn't be able to manage dynamic imports accomplished via calls to <code>System.import</code> anyway.</p>
  
  <p>but... if I call out the script files in index.html like so:</p>
  
  <pre><code>&lt;script src="https://code.jquery.com/jquery-2.1.4.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/troublesome/troublesome.js"&gt;&lt;/script&gt;
  &lt;script src="the-rest-of-my-js.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>the reference to <code>jQuery</code> is resolved in <code>troublesome.js</code> and things are good,
  but I would prefer to avoid the script tag route as webpack doesn't manage those.</p>
  
  <p>Can anyone recommend a decent strategy for dealing with scenarios like this?</p>
  
  <p><strong>update</strong></p>
  
  <p>with some guidance from @TN1ck, I was eventually able to identify one Webpack-centric solution, using the <a href="http://webpack.github.io/docs/shimming-modules.html#imports-loader" rel="noreferrer">imports-loader</a></p>
  
  <p>The configuration for this solution looks something like this:</p>
  
  <pre><code>  //...
    module: {
      loaders: [
        //...
        {
          test: require.resolve('troublesome'),
          loader: "imports?jQuery=jquery,$=jquery"
        }
      ]
    }
  </code></pre>