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

2024-06-06

我最近正在学习使用 system.js 导入由 Typescript 编译的模块。这些模块之前是为 require.js 编译的,并且工作正常。

但是合并到system.js时,应用时无法导入模块系统生产.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

我不太明白是什么原因导致了错误消息。当我申请时系统.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
};

我遇到过同样的问题。问题是我尝试使用捆绑包作为常规模块。根据文档,捆绑包应该有多个 System.register 调用。然后你必须通过 script 标签添加这个包作为常规 js 文件。之后调用您的起点模块(我假设在您的情况下为 createDeck )。

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

希望这可以帮助!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 System.js 导入 Typescript 编译的模块时出错 的相关文章

随机推荐

  • http HEAD 与 GET 性能对比

    我正在设置一个 REST Web 服务 只需要尽快回答 是 或 否 设计 HEAD 服务似乎是最好的方法 但我想知道与执行 GET 请求相比是否真的能节省一些时间 我想我的主体流不会在我的服务器上打开 关闭 大约1毫秒 由于返回的字节量非常
  • 第一次在更新面板中自动将文件上传到服务器不起作用

    要求 我正在尝试在用户选择文件后立即上传该文件 我必须满足以下要求 该按钮看起来与应用程序中的其他按钮类似 用户选择文件后就会上传该文件 我需要它位于 UpdatePanel 中 因为我必须对页面进行有条件的更新 我CAN对所选文件进行完整
  • 当日期改变时 NSNotification?

    WebKit 的 WebHistory API 按日期分隔其项目 因此 当日期发生变化时 我需要重新分配任何 昨天 和 或 早些时候 今天 或 明天 标签 有 NSNotification 吗 或者我必须依赖 NSTimer 还是 perf
  • 是否有更好(更简单)的方法来获取特定域 SID?

    我被指派修改 WinForms 应用程序 主要检查登录用户是否属于特定域 这是我到目前为止所想出的 byte domainSid var directoryContext new DirectoryContext DirectoryCont
  • 在 Bluemix 中激活 PHP 扩展

    这纯粹是 Bluemix 问题 我的代码在本地主机上顺利运行 但是当我将其迁移到 Bluemix 时 我的数据库连接失败了 检查日志 我发现问题 调用未定义的函数 mysqli init HTTP 响应 500 我发现扩展已被禁用以使其更小
  • 输入缓冲区刷新

    考虑下面的代码 include
  • iPhone 应用程序中的 Vimeo 视频

    我想知道是否有办法将 Vimeo 视频 嵌入 iPhone 应用程序中 对于 YouTube 视频 我使用包含 YouTube 视频正确嵌入代码的 Web 视图 然后 iPhone 的本机 YouTube 支持会将 Flash 播放器转换为
  • 我需要一个树转储选项,该选项在当前的 gcc 版本中不再存在

    旧版本的 GCC 例如 4 0 2 或 4 1 2 有该选项 df see 用于调试程序或 GCC 的选项对于4 1 2 http gcc gnu org onlinedocs gcc 4 1 2 gcc Debugging Options
  • 如何使用 ASP.NET MVC 4.0 DonutOutputCache VaryByCustom 使缓存失效

    我正在为我的 ASP NET 应用程序使用 DevTrends MvcDonutCaching 包 它工作得很好 我目前遇到的一个问题是使我为子操作设置的 VaryByCustom 缓存无效 这是我用于 VaryByCustom 设置的一些
  • RTSP H.264 IP 摄像机作为 Windows 中的视频源/输入

    我目前被这个问题困扰 我希望有人可以帮助我 我正在尝试创建某种解码器来转换视频流 该视频流将充当视频输入设备 以便我可以在 Wirecast 视频流程序 中使用它 在这个阶段 我使用 mjpeg IP 摄像机作为视频源 使用这个简洁的小程序
  • 在文档流中提取一个元素

    这是示例代码 top background lightGreen content outline 1px solid red bottom background lightBlue div Top div div Lorem ipsum d
  • 如何向现有表添加列?

    如何更改 SQL Server Compact Edition SQL CE 中的表 我有一个现有的表 我需要添加一个IDENTITY column 添加列的方式与在其他版本的 SQL Server 中添加列的方式相同 这会添加一个名为的主
  • 将 ASCII 字符转换为“”unicode 表示法的脚本

    我正在对 Linux 区域设置文件进行一些更改 usr share i18n locales like pt BR 并且需要格式化字符串 例如 d m Y H M 必须以 Unicode 指定 其中每个 在本例中为 ASCII 字符表示为
  • 如何在 Spyder IDE 中安装 Selenium 包

    我刚刚在工作中安装了 Spyder IDE 仅 Spyder 不是整个 Anaconda 并且希望使用 FireFox 自动化我的工作 我的问题是 如何安装 Selenium 软件包 I figured it out Here is ins
  • Xamarin、Autofac、NavigationService 和 BeginLifetimeScope

    关于带有 autofac 的生命周期范围以及何时在 xamarin 应用程序中使用它们的初学者问题 正如这篇文章中提到的 https nblumhardt com 2011 01 an autofac lifetime primer htt
  • 使用 microsoft word.interop 删除 Word 文档中的空白页

    我创建了一个Word文档 它使用以下命令生成动态内容词互操作 它有一些分页符之间使用 我面临的问题是 此分页符会创建我不想向用户显示的空白页面 在某些情况下 我需要在那里添加这些分页符以维护页面布局 因此我无法考虑删除这些分页符 但我想要的
  • 什么是海湾合作委员会 4.1.3?

    根据 gcc 发布页面 http www gnu org software gcc releases html http www gnu org software gcc releases html 版本4 1 3不存在 不过 我在很多地方
  • 在大文件中查找重复字符串

    一个文件包含大量 例如100亿 字符串 您需要查找重复的字符串 您有 N 个可用系统 您将如何找到重复项 埃里克森的答案可能是提出这个问题的人所期望的 您可以将 N 台机器中的每台机器用作哈希表中的一个存储桶 对于每个字符串 按顺序说出字符
  • MySQL 错误 1264:列的值超出范围

    As I SETMySQL 中的 cust fax 表如下所示 cust fax integer 10 NOT NULL 然后我插入这样的值 INSERT INTO database values 3172978990 但随后它说 错误 1
  • 使用 System.js 导入 Typescript 编译的模块时出错

    我最近正在学习使用 system js 导入由 Typescript 编译的模块 这些模块之前是为 require js 编译的 并且工作正常 但是合并到system js时 应用时无法导入模块系统生产 js 控制台说 Uncaught i