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

时间:2016-06-10 21:26:19

标签: javascript requirejs ecmascript-6

我有一个现有项目(在浏览器中完全运行,没有服务器端组件),它使用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 / require语法:

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!"字符串结果是拖累。尽管将现有项目移植到ES6的this article提到了一种通过RequireJS配置自动化该过程的方法。

但是,由于requirejs-babel在运行时转换了ES6代码,我可能暂时不会将其合并到我的项目中。如果我确定我想用ES6全力以赴,我可能会使用"常规" Babel或可能TypeScript

1 个答案:

答案 0 :(得分:7)

ES6 Class只是一个糖衣,下面仍然有相同的实现。您可以使用旧方法按功能创建类。另外请注意浏览器兼容性https://kangax.github.io/compat-table/es6/

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

    return class SomeClass {

        static someStaticFn(){
            //Do whatever
        }
    }

});