使用 System.js 导入 Typescript 编译的模块时出错答案

【问题标题】：Error importing Typescript-compiled modules with System.js使用 System.js 导入 Typescript 编译的模块时出错
【发布时间】：2017-02-05 07:21:53
【问题描述】：

我最近正在学习使用 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时，不会有错误信息，但是我不能在导入的模块中使用函数。任何调用都将返回未定义。那我是不是操作错了？

以下是源代码。

test.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;
}

Dependency1: 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
};

【问题讨论】：

标签： javascript typescript systemjs

【解决方案1】：

我有同样的问题。问题是我试图将 bundle 用作常规模块。根据文档 bundle 应该有几个 System.register 调用。然后，您必须通过脚本标记将此捆绑包添加为常规 js 文件。然后调用你的起点模块（我假设你的情况是createDeck）。

请关注https://github.com/systemjs/systemjs/blob/master/docs/production-workflows.md了解更多信息。

希望这会有所帮助！

【讨论】：

这个问题解决了吗？我有完全一样的问题。文档非常不清楚如何使用使用 Typescript 编译器捆绑的 js 文件。