title: How to use ES6 Modules in Browser as of September 2016?
body: <p>I have the following "website" (feel free to skim, the only important part here is the import statement):</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;  
      &lt;/head&gt;
      &lt;body&gt; 
          &lt;script&gt;
  
              import * as mathSolverModule from 'components/mathSolverModule';
  
              var result = mathSolverModule.add(2+2); 
  
              document.write(result); 
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The <code>mathSolverModule</code> file is this:</p>
  
  <pre><code>export function multiply(x, y) {
      return x * y; 
  }
  
  export function add(x, y) {
      return x + y; 
  }
  </code></pre>
  
  <p>Predictably, I get the following error when running this in latest Chrome:</p>
  
  <blockquote>
    <p>Uncaught SyntaxError: Unexpected token import</p>
  </blockquote>
  
  <p>What is the easiest way to fix this? Is there some script I can include to "just make it work" or do I need SystemJS/WebPack/etc and HAVE to compile into something else (ES5, as I understand it)? </p>
  
  <hr>
  
  <p>Edit, I tried:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;  
          &lt;script src = "https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.14.0/babel.min.js"&gt;&lt;/script&gt; 
      &lt;/head&gt;
      &lt;body&gt; 
          &lt;script type="text/babel"&gt;
  
              import * as mathSolverModule from 'components/mathSolverModule';
  
              var result = mathSolverModule.add(2+2); 
  
              document.write(result); 
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and I get the following: </p>
  
  <blockquote>
    <p>Uncaught ReferenceError: require is not defined</p>
  </blockquote>