title: How to compile a project properly with Babel and Grunt
body: <p>I'm trying to play with Babel, but it doesn't work well for me.</p>
  
  <p>My project is simple</p>
  
  <pre><code>|-project/
  |---src/
  |-----index.html
  |-----main.js
  |-----module.js
  |---Gruntfile.js
  |---package.json
  </code></pre>
  
  <p>index.html
  </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head lang="en"&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Test&lt;/title&gt;
      &lt;script src="main.js" type="application/javascript"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;p&gt;Simple html file.&lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>main.js
  </p>
  
  <pre><code>import * as math from "./module";
  
  async function anwser() {
      return 42;
  }
  
  (function main() {
      anwser().then((v) =&gt; {
          console.info(v);
      });
  
      console.log(math.sum(5, 5));
  })();
  </code></pre>
  
  <p>module.js
  </p>
  
  <pre><code>export function sum(x, y) {
      return x + y;
  }
  </code></pre>
  
  <p>Gruntfile.js
  </p>
  
  <pre><code>module.exports = function(grunt) {
  
      grunt.initConfig({
          "babel": {
              "options": {
                  "sourceMap": true,
                  "experimental": true
              },
              dist: {
                  files: [{
                      "expand": true,
                      "cwd": "src/",
                      "src": ["**/*.js"],
                      "dest": "build/",
                      "ext": ".js"
                  }]
              }
          },
          htmlmin: {
              dist: {
                  options: {
                      removeComments: true,
                      collapseWhitespace: true
                  },
                  files: [{
                      "expand": true,
                      "cwd": "src/",
                      "src": ["**/*.html"],
                      "dest": "build/",
                      "ext": ".html"
                  }]
              }
          },
          watch: {
              scripts: {
                  files: 'src/*.js',
                  tasks: ["babel"]
              },
              html: {
                  files: 'src/*.html',
                  tasks: ["htmlmin"]
              }
          }
      });
  
      grunt.loadNpmTasks('grunt-babel');
      grunt.loadNpmTasks('grunt-contrib-watch');
      grunt.loadNpmTasks('grunt-contrib-htmlmin');
  
      grunt.registerTask("default", ["babel", "htmlmin"]);
  };
  </code></pre>
  
  <p>I run grunt, everything compile. But I can't use have the expected result.</p>
  
  <p>First, the browser say <code>require is not defined</code>, so I add require.js to my HTML.</p>
  
  <p>Then, I get <code>Error: Module name "module" has not been loaded yet for context: _. Use require([]) http://requirejs.org/docs/errors.html#notloaded</code></p>
  
  <p>I'm a bit confused about all of these. How I can make my code work?</p>