title: How to access variables across Javascript files with babel?
body: <p>I'm trying to migrate my code from <code>ES5</code> to <code>ES6</code> and use <code>babel</code>. I use the module pattern quite a bit in my code, such that if I have a module like <code>apple</code> I'll do something like this:</p>
  
  <pre><code>var appleModule = (function() {
      var yummy = true;
      var eat = function() { }
  
      return { "eat": eat }
  })();
  </code></pre>
  
  <p>and then access <code>appleModule</code> in a different file. However, when moving everything from this:</p>
  
  <pre><code>&lt;script type="text/javascript" src="/scripts/apple.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/scripts/banana.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>to this:</p>
  
  <pre><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.25/browser.js"&gt;&lt;/script&gt;
  &lt;script type="text/babel" src="/scripts/apple.js"&gt;&lt;/script&gt;
  &lt;script type="text/babel" src="/scripts/banana.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I can no longer access <code>appleModule</code> in different files. I get a <code>ReferenceError</code> saying it doesn't exist. How do access variables across files with babel and ES6?</p>