Javascript 通过Requirejs，TypeScript输出文件未按预期运行_Javascript_Typescript_Requirejs

Javascript 通过Requirejs，TypeScript输出文件未按预期运行

javascript typescript requirejs

Javascript 通过Requirejs，TypeScript输出文件未按预期运行,javascript,typescript,requirejs,Javascript,Typescript,Requirejs,我目前正在尝试设置和学习TypeScript，我在让模块正常运行方面遇到了困难上下文我有两个ts文件，main.ts和types.tsmain.ts是我的单一入口点，而types.ts只是一个带有几个接口的测试文件。我还有一个tsconfig.json文件，其中定义了目标（ES6）、模块（AMD）和输出文件我的目标是能够将整个项目转储到单个JavaScript文件中，而不需要向html添加一大堆脚本标记 // types.ts export interface Time { uni

我目前正在尝试设置和学习TypeScript，我在让模块正常运行方面遇到了困难

上下文我有两个ts文件，

main.ts

和

types.ts

main.ts

是我的单一入口点，而

types.ts

只是一个带有几个接口的测试文件。我还有一个

tsconfig.json

文件，其中定义了目标（ES6）、模块（AMD）和输出文件

我的目标是能够将整个项目转储到单个JavaScript文件中，而不需要向html添加一大堆脚本标记

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

我发现顶级导入将文件分类为模块是非常不合理的。出口是肯定的，但光是进口对我来说毫无意义。也许有人能详细解释一下吗？

好吧，我终于明白了，我有点脸色发青。在requirejs的网站上，或者我在博客上读到的任何东西上，都没有人清楚地解释这是如何工作的

首先，推荐的方法是完全无用的，因为异步化使得不可能对加载的文件有任何保证，并且

DOMContentLoaded

事件只触发一次，因此如果您的一个文件加载稍晚，并且您依赖于该保证，那么您的代码将永远不会执行。下面是你如何使用这个东西：

将ts代码编译到充满定义的单个js文件中

创建一个小js文件，作为您的。。。入口点

在html中同步加载js文件，尽管你读到的所有东西都告诉你这是错误的方法

如果有人能给我一个更好的答案，我洗耳恭听

// 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>

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

// 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>