title: Exporting a class with ES6 (Babel)
body: <p>I'm writing some frontend code with ECMAScript 6 (transpiled with BabelJS, and then browserified with Browserify) so that I can have a class in one file, export it and import it in another file.</p>
  
  <p>The way I'm doing this is:</p>
  
  <pre><code>export class Game {
      constructor(settings) {
  
      ...
  
      }
  }
  </code></pre>
  
  <p>And then on the file that imports the class I do:</p>
  
  <pre><code>import {Game} from "../../lib/pentagine_browserified.js";
  var myGame = new Game(settings);
  </code></pre>
  
  <p>I then compile it with <code>grunt</code>, this is my <code>Gruntfile</code>:</p>
  
  <pre><code>module.exports = function(grunt) {
    "use strict";
  
    grunt.loadNpmTasks('grunt-babel');
    grunt.loadNpmTasks('grunt-browserify');
  
    grunt.initConfig({
      "babel": {
        options: {
  
          sourceMap: false
        },
        dist: {
          files: {
            "lib/pentagine_babel.js": "lib/pentagine.js",
            "demos/helicopter_game/PlayState_babel.js": "demos/helicopter_game/PlayState.js"
          }
        }
      },
  
      "browserify": {
        dist: {
          files: {
            "lib/pentagine_browserified.js": "lib/pentagine_babel.js",
            "demos/helicopter_game/PlayState_browserified.js": "demos/helicopter_game/PlayState_babel.js"
          }
        }
      }
    });
  
    grunt.registerTask("default", ["babel", "browserify"]);
  };
  </code></pre>
  
  <p>However, on the <code>new Game(</code> call, I get the following error:</p>
  
  <pre><code>Uncaught TypeError: undefined is not a function
  </code></pre>
  
  <p>As so, what I did was analyse the generated code by Babel and Browserify and I found this line on <code>PlayState_browserified.js</code>:</p>
  
  <pre><code>var Game = require("../../lib/pentagine_browserified.js").Game;
  </code></pre>
  
  <p>I decided to print the <code>require</code> output:</p>
  
  <pre><code>console.log(require("../../lib/pentagine_browserified.js"));
  </code></pre>
  
  <p>And it is nothing but an empty object. I decided to check out the <code>pentagine_browserified.js</code> file:</p>
  
  <pre><code>var Game = exports.Game = (function () {
  </code></pre>
  
  <p>It seems like it is correctly exporting the class, but for some other reason it is not being required on the other file.</p>
  
  <p>Also, I'm sure the file is being required properly because changing the string <code>"../../lib/pentagine_browserified.js"</code> spits out a <code>Not Found</code> error, so it is going for the right file, that I'm sure about.</p>