TypeScript outFile无法通过Requirejs表现出预期的行为

问题描述 投票：0回答：1

我目前正在尝试设置和学习TypeScript，但我无法使模块以理智的方式运行。我已经花了几个小时研究这个问题，但我的机智已经到了尽头。

上下文

我有两个ts文件，main.ts和types.ts。 main.ts是我的单个入口点，types.ts只是具有几个接口的测试文件。我还有一个tsconfig.json文件，其中定义了目标（ES6），模块（AMD）和outFile。我的目标是能够将我的整个项目转储到一个JavaScript文件中，而不需要向我的html中添加一堆脚本标签。

// types.ts
export interface Time {
    unix: number;
}

// main.ts
import {Time} from "types";
document.addEventListener("DOMContentLoaded", () => {
    let x: Time = { unix: 12345 };
    alert(x.unix);
});

<!-- index.html -->
<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="static/styles/styles.css" />
    <script data-main="static/scripts/timeapp" src="static/scripts/require.js" async></script>
</head>
<body>
    <header></header>
    <main></main>
    <footer></footer>
</body>

问题

[tsc将我的项目编译成一个文件时，因为我的main.ts文件具有导入（因为确实有），所以它也被归类为模块。显然这导致require.js不执行任何操作。我的代码均未执行。没有错误，没有输出，什么都没有。我的两个文件最终都被包裹在define块中，我真的不知道该怎么办。

define("types", ["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
});
define("main", ["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    document.addEventListener("DOMContentLoaded", () => {
        let x = {
            unix: 12345
        };
        alert(x.unix);
    });
});
//# sourceMappingURL=time.js.map

我发现顶级导入将文件分类为模块是非常不合理的。当然可以出口，但是仅进口对我来说毫无意义。也许有人也可以对此进行详细说明？

javascript typescript requirejs
1个回答
0
投票

[好吧，我终于弄明白了，我有点生气。在requirejs网站上的任何地方，或者我在SO，博客等上阅读过的任何内容，任何人都没有清楚地解释它是如何工作的。

首先，推荐的方法是完全没有用的，因为异步使得无法保证有关加载了哪些文件，并且DOMContentLoaded事件仅触发一次，因此如果您的文件中的一个加载稍晚并且您依赖于此保证，您的代码将永远不会执行。这就是您使用事物的方式：

  1. 将您的ts代码编译为充满定义的单个js文件。
  2. 创建一个小的js文件，用作您...入口点的入口点。
  3. 尽管您已阅读的所有内容都告诉您这是错误的方法，但是在html中同步加载js文件。
// app.js
define("types", ["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
});
define("app", ["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    let x = {
        unix: 12345
    };
    alert(x.unix);
});
//# sourceMappingURL=app.js.map

// main.js
document.addEventListener("DOMContentLoaded", () => {
    require(["app"], () => {});
});

<!-- index.html -->
<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="static/styles/styles.css" />
    <script src="static/scripts/require.js"></script>
    <script src="static/scripts/app.js"></script>
    <script src="static/scripts/main.js"></script>
</head>
<body></body>

[如果有人可以为我提供更好的答案，那我真是不知所措。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.