在Magento2中加载已编译的Typescript AMD模块

时间:2017-02-27 09:49:30

标签: typescript magento2 amd

我正在尝试将Magento 2转变为未来并在那里添加Typescript支持。一切都正确编译,但我无法加载它:(

需要-config.js

var config = {
    deps: [
        "web/js/app"
    ],
    bundles: {
        "web/js/app": [ "main", "moduleone", "moduletwo" ]
    }
};

web / js / app.js

define("moduleone", ["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var ModuleOne = (function () {
        function ModuleOne() {
        }
        ModuleOne.prototype.sayHello = function () {
            console.log("Hello from ModuleTwo!");
        };
        ModuleOne.prototype.sayHelloTo = function (who) {
            console.log("Hello " + who.trim() + ". This is ModuleTwo");
        };
        return ModuleOne;
    }());
    exports.ModuleOne = ModuleOne;
});
define("moduletwo", ["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var ModuleTwo = (function () {
        function ModuleTwo() {
        }
        ModuleTwo.prototype.sayHello = function () {
            console.log("Hello from ModuleTwo!");
        };
        ModuleTwo.prototype.sayHelloTo = function (who) {
            console.log("Hello " + who.trim() + ". This is ModuleTwo");
        };
        return ModuleTwo;
    }());
    exports.ModuleTwo = ModuleTwo;
});
define("main", ["require", "exports", "moduleone", "moduletwo"], function (require, exports, Module1, Module2) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var Main = (function () {
        function Main() {
            console.log('Test');
        }
        Main.prototype.start = function () {
            var m1 = new Module1.ModuleOne();
            var m2 = new Module2.ModuleTwo();
            m1.sayHelloTo("David Wesst");
            m2.sayHelloTo("David Wesst");
        };
        return Main;
    }());
    exports.Main = Main;
});

加载模块:

<script type="text/javascript">
require(['main'], function(Main) {
    console.log(Main);
    var app = new Main();
    app.start();
});</script>

致电主要回报:

  

未捕获的TypeError:Main不是构造函数

Plz帮助!

1 个答案:

答案 0 :(得分:1)

由于您正在编写原始AMD JavaScript,只需使用return Main exports.Main = Main,这应该可以解决问题。

也许我误解了,这是编译输出,看起来确实如此。

在这种情况下使用,如果它是从TypeScript源编译的,你可以(非常,非常不愉快)使用

export = class Main {};

你现在拥有的是什么

export class Main {}

就个人而言,我会咬紧牙关并写下

export default class Main {};

并使用

引导程序
<script type="text/javascript">
require(['main'], function(module) {
    var Main = module.default;
    console.log(Main);
    var app = new Main();
    app.start();
});</script>

通过这种方式,我们可以共同前进并在浏览器中杀死TypeScript + NodeJS + CJS + AMD + Interop的错误遗留部门。