Загрузка скомпилированных модулей Typescript AMD в Magento2
Я пытаюсь превратить 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>
Вызов Main возвращает:
Uncaught TypeError: Main не является конструктором
Пожалуйста, помогите!
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 в браузерах.