使用 RequireJS 包含使用 ES6 语法定义的类答案

【问题标题】：Use RequireJS to include a class defined using ES6 syntax使用 RequireJS 包含使用 ES6 语法定义的类
【发布时间】：2016-06-10 21:26:19
【问题描述】：

我有一个使用 RequireJS 来管理依赖项的现有项目（完全在浏览器中运行，没有服务器端组件）。以前我定义“类”（包括继承）的方式是这样的：

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;

});

然后当我想将它包含在其他类中时，我会使用标准的 RequireJS 定义/要求语法：

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

我想尝试一下 ES6 中的“类”语法，所以我着手转换我现有的一个类（为了简单起见，我从一个“静态”类开始）。它目前看起来像这样：

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

    class SomeClass {

        static someStaticFn(){
            //Do whatever
        }
    }

});

目前我遇到的困难是如何使用 RequireJS 引用 SomeClass（使用新的 ES6 语法）。假设这是可能的。

更新

正如其他人在下面指出的那样，返回类是 RequireJS 所关心的。我可以发誓我已经尝试过了，但它确实奏效了。

如果其他人像我一样是傻瓜并在类似的情况下结束了这里，我还想指出我确实在使用 requirejs-babel 插件方面取得了一些成功，但是只有在之后我'会重写我的类以使用 ES6 export 和 import 语句而不是 RequireJS 的 define。完成此操作后，我在其他任何地方（包括班级）都必须这样做：

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

我最终选择修改包含在每个其他模块中的类，因此添加所有这些“es6！”事实证明，弦乐相当拖累。尽管this article 在将现有项目移植到 ES6 时提到了一种通过 RequireJS 配置自动化流程的方法。

但是，由于 requirejs-babel 在运行时会转译 ES6 代码，所以我现在可能不会将其合并到我的项目中。如果我决定要全力以赴地使用 ES6，我可能会使用“常规”Babel 或 TypeScript

【问题讨论】：

无论类是使用function 还是class 语法定义的，RequireJS 都没有任何区别。你只需要在你的模块定义中总是return它。

标签： javascript requirejs ecmascript-6

【解决方案1】：

ES6 类只是一个糖衣，并且在下面仍然具有相同的实现。您可以使用旧方式按函数创建类。还要注意浏览器兼容性https://kangax.github.io/compat-table/es6/。

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

    return class SomeClass {

        static someStaticFn(){
            //Do whatever
        }
    }

});

【讨论】：