javascript - 对象不支持 babel 变换后的 new x() 操作

Question

我目前正在将一堆 JavaScript 模块转换为 ECMAScript 6 类。我们使用 require.js 作为 AMD 加载器，并手动编写 Define([], ...) 逻辑。

我们使用 Babel 将 ES 6 类转译回 ES 5 定义的模块。我的 bablerc 文件如下所示:

{
"presets": ["es2015"],
"plugins": ["transform-es2015-modules-amd"]
}

一个简单的类看起来像这样

import x from "dev/x"
import ko from "knockout"
import z from "dev/z"

export class y extends x {
...
}

输出看起来基本正确:

define(["exports","dev/x", "knockout", "dev/z"], function(x, knockout, z){

Object.defineProperty(exports,"__esModule",{value: true});

// Bunch of generated crap
var y = exports.y = function(_x)...(_x2.default);
}

所以当我尝试这样做时:

var foo = new y();

我收到“对象不支持此操作”JavaScript 异常。

我尝试将生成的代码(我不想这样做)更改为:

var y = exports = function(_x)...(_x2.default);

但这并没有起到任何作用。但是，当我将该行更改为:

return function(_x)...(_x2.default);

或添加此行:

var y = exports = function(_x)...(_x2.default);
return y;

一切都按其应有的方式进行。我不想每次进行更改时都必须修改生成的文件，我只想让 babel 做它的事情并且是正确的!我在这里缺少什么？

更新:我正在使用 Druandal 库 (durandaljs.com) 的 system.js 部分，它通过传递一个名为“获取模块 ID”的函数来包装对 require 的调用，然后加载它。所以我做了这样的调用:

system.acquire(moduleNameAndPath).then(function acquiredModuleFunc(acquiredModule) {
    if (acquiredModule !== null || acquiredModule !== undefined){
        var item = new acquiredModule(); // Object doesn't support here...
    }
}

在构造 View 绑定(bind)到的 View 模型时，我们使用它来引入伪多态行为。

Answer 1

您正在以名称 y 导出构造函数。在导入(acquire)中，您似乎尝试在模块对象本身上使用new。相反，尝试

system.acquire(moduleNameAndPath).then(function(acquiredModule) {
    var Y = acquiredModule.y;
    var item = new Y();
});