我最近正在学习使用 system.js 导入由 Typescript 编译的模块。这些模块之前是为 require.js 编译的，并且工作正常。
但是，当合并到 system.js 时，在应用 system-production.js 时无法导入模块。控制台显示
Uncaught (in promise) Error: Module instantiation did not call an anonymous or correctly named System.register.
Instantiating https://www.star.com/libs/js/klondike.js
Loading ./libs/js/klondike.js
at register-loader.js:203
t @ common.js:83
(anonymous) @ loader-polyfill.js:70
我不太明白导致错误消息的原因。当我应用system.src.js 时，不会有错误信息，但我无法使用导入模块中的函数。任何调用都将返回未定义的。那我是不是操作错了？
下面是源代码。
测试.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<!-- sys import -->
<script src="libs/js/system-production.js"></script>
<!--<script src="libs/js/system.src.js"></script>-->
<script>
System.import("./libs/js/klondike.js");
</script>
</html>
tsconfig.json
{
"compilerOptions": {
"module": "System",
"outFile": "../../js/klondike.js",
"target": "es5",
"sourceMap": true,
"removeComments": true
},
"include": [
"./*"
]
}
主模块:CardMoves.ts
//sys import
import * as DBJSN from "./debugJson";
import PokerCard from "./Cards";
let suits: string[] = ["spade", "heart", "club", "diamond"];
let cards: string[] = [, "A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"];
//sys export
export function createDeck() {
let playCards: PokerCard[] = new Array(DBJSN.settings.decks*52);
console.log(playCards);
for (let i=0; i<playCards.length; i++) {
playCards[i] = new PokerCard();
playCards[i].suit = suits[Math.floor(i % 52 / 13)];
playCards[i].card = i % 52 % 13 + 1;
}
return playCards;
}
依赖1:Cards.ts
//sys export
export default class PokerCard {
private _suit: string;
private _card: number;
constructor() {}
//Suit getter and setter
get suit(): string {
return this._suit;
}
set suit(newSuit: string) {
try {
if (this._suit === undefined)
this._suit = newSuit;
else
throw "Suit value has been set.";
}
catch(e) {
console.log(e);
}
}
//Card getter and setter
get card(): number {
return this._card;
}
set card(newCard: number) {
try {
if (this._card === undefined)
this._card = newCard;
else
throw "Card value has been set.";
}
catch(e) {
console.log(e);
}
}
}
依赖2:debugJson.ts
//sys export
export let settings = {
decks: 1,
cardsPerClick: 1,
timer: true
};
最佳答案
我遇到了同样的问题。问题是我试图将 bundle 用作常规模块。根据文档 bundle 应该有几个 System.register 调用。然后你必须通过脚本标签将这个包添加为常规 js 文件。之后调用您的起点模块(我假设在您的情况下为 createDeck)。
请关注https://github.com/systemjs/systemjs/blob/master/docs/production-workflows.md了解更多信息。
希望这对您有所帮助!
关于javascript - 使用 System.js 导入 Typescript 编译的模块时出错，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42049525/