title: Use RequireJS to include a class defined using ES6 syntax
body: <p>I have an existing project (which is run fully in the browser, no server-side component) which uses RequireJS to manage dependencies. Previously the way I'd been defining "classes" (including inheritance) was like this:</p>
  
  <pre><code>define([
      'jquery',
      'classes/SomeParentClass',
  ], function($, SomeParentClass){
  
      function ThisClass(data){
  
          SomeParentClass.call(this, data);
  
          this.init = function(data){
              //Do stuff
          }
  
          this.init(data);
      }
  
      ThisClass.prototype = Object.create(SomeParentClass.prototype);
      ThisClass.prototype.constructor = ThisClass;
  
      return ThisClass;
  
  });
  </code></pre>
  
  <p>And then when I wanted to include it in some other class I'd use the standard RequireJS define/require syntax:</p>
  
  <pre><code>define(['classes/ThisClass'], function(ThisClass){
      var fooInstance = new ThisClass(fooData);
  });
  </code></pre>
  
  <p>I wanted to try my hand at the "class" syntax in ES6, so I set about converting one of my existing classes (I started with a "static" class for simplicity). It currently looks something like this:</p>
  
  <pre><code>define([
      'jquery',
  ], function($){
  
      class SomeClass {
  
          static someStaticFn(){
              //Do whatever
          }
      }
  
  });
  </code></pre>
  
  <p>Where I'm stymied currently is <strong>how to reference SomeClass (with the new ES6 syntax) using RequireJS</strong>. Assuming that's even possible.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>As others have pointed out below, returning the class is all RequireJS cares about. I could have sworn that I already tried that, but sure enough it worked.</p>
  
  <p>In case anyone else is a dummy like me and ends up here under similar circumstances, I want to also point out that I did have some success with the <a href="https://github.com/mikach/requirejs-babel" rel="nofollow">requirejs-babel</a> plugin, however only <strong>after</strong> I'd re-written my class to use ES6 <em>export</em> and <em>import</em> statements instead of RequireJS's <em>define</em>. After having done that, anywhere else I was including the class I had to do it like so:</p>
  
  <pre><code>define(['es6!ThisClass'], function(ThisClass){ ...
  </code></pre>
  
  <p>I ended up choosing to modify a class that was included in <strong>every</strong> other module, so adding all those "es6!" strings turned out to be quite a drag. Although <a href="https://medium.com/lexical-labs-engineering/porting-your-javsascript-to-es6-d820520e900d" rel="nofollow">this article</a> on porting existing projects to ES6 mentions a way of automating the process via RequireJS config.</p>
  
  <p>However, as requirejs-babel transpiles the ES6 code at runtime, I will probably not incorporate that into my project at this time. If I do decide I want to go whole hog with ES6 I'd probably use "regular" <a href="https://babeljs.io/" rel="nofollow">Babel</a> or possibly <a href="https://www.typescriptlang.org/" rel="nofollow">TypeScript</a></p>