在 Magento2 中加载已编译的 Typescript AMD 模块
Loading compiled Typescript AMD modules in 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>
正在调用主程序 returns:
Uncaught TypeError: Main is not a constructor
请帮忙!
由于您正在编写原始 AMD JavaScript,只需使用 return Main
而 而不是 exports.Main = Main
,应该可以解决问题。
可能是我理解错了,那是编译后的输出,确实像。
在那种情况下使用,如果它是从 TypeScript 源代码编译的,你可以(非常非常不愉快地)使用
export = class Main {};
你现在拥有的是
export class Main {}
就我个人而言,我会硬着头皮写
export default class Main {};
和bootstrap与
<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 的不良遗留部门。
我正在尝试将 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>
正在调用主程序 returns:
Uncaught TypeError: Main is not a constructor
请帮忙!
由于您正在编写原始 AMD JavaScript,只需使用 return Main
而 而不是 exports.Main = Main
,应该可以解决问题。
可能是我理解错了,那是编译后的输出,确实像。
在那种情况下使用,如果它是从 TypeScript 源代码编译的,你可以(非常非常不愉快地)使用
export = class Main {};
你现在拥有的是
export class Main {}
就我个人而言,我会硬着头皮写
export default class Main {};
和bootstrap与
<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 的不良遗留部门。