title: How to use ECMAScript6 modules within webpages
body: <p>I'm pretty excited about using ECMAScript 6 features now via Babeljs - in particular, I'd love to start making my JavaScript code more modular using the new modules feature.</p>
  
  <p>Here's what I've written so far:</p>
  
  <pre><code>// ECMAScript 6 code - lib.js
  export const sqrt = Math.sqrt;
  export function square (x) {
    return x * x;
  }
  
  export function diag (x, y) {
    return sqrt(square(x) + square(y));
  }
  
  // ECMAScript 6 code - main.js
  import { square, diag } from 'lib';
  console.log(square(11));
  console.log(diag(4, 3));
  </code></pre>
  
  <p>I understand that I can transpile this code from ES6 to ES5 via babel on the command line:</p>
  
  <pre><code>babel lib.js &gt; lib6to5.js
  babel main.js &gt; main6to5.js
  </code></pre>
  
  <p><strong>But what do I need to do to use this code within my HTML?</strong></p>
  
  <p>For example, what would this index.html file look like:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!-- index.html --&gt;
  &lt;!doctype html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;ECMAScript 6&lt;/title&gt;
  
      &lt;!-- What goes here? 
       How do I include main6to5.js and lib6to5.js to make this work in the browser? --&gt;
      &lt;script src="?????"&gt;&lt;/script&gt;
  
    &lt;/head&gt;
    &lt;body&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thank you</p>