Use RequireJS to include a class defined using ES6 syntax

Question

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:

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;

});

And then when I wanted to include it in some other class I'd use the standard RequireJS define/require syntax:

define(['classes/ThisClass'], function(ThisClass){
    var fooInstance = new ThisClass(fooData);
});

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:

define([
    'jquery',
], function($){

    class SomeClass {

        static someStaticFn(){
            //Do whatever
        }
    }

});

Where I'm stymied currently is how to reference SomeClass (with the new ES6 syntax) using RequireJS. Assuming that's even possible.

UPDATE

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.

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 requirejs-babel plugin, however only after I'd re-written my class to use ES6 export and import statements instead of RequireJS's define. After having done that, anywhere else I was including the class I had to do it like so:

define(['es6!ThisClass'], function(ThisClass){ ...

I ended up choosing to modify a class that was included in every other module, so adding all those "es6!" strings turned out to be quite a drag. Although this article on porting existing projects to ES6 mentions a way of automating the process via RequireJS config.

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" Babel or possibly TypeScript

Answer 1

ES6 Class is just a sugarcoat and still with same implementation underneath. You can use it the old way as creating class by function. Also be careful with browser compatibility https://kangax.github.io/compat-table/es6/.

define([
    'jquery',
], function($){

    return class SomeClass {

        static someStaticFn(){
            //Do whatever
        }
    }

});