TypeScript 阻止文件成为模块？

Question

我正在使用导入和导出，因为据说引用已过时。但是，我想编译成一个文件，并且我正在使用“系统”模块，但即使没有导出任何内容，它也会将所有内容都变成一个模块。如果导入了任何内容，则不执行代码，但如果没有导入或导出任何内容，则执行代码。我需要导入文件才能使用它们，但我不能，因为代码变成了模块函数。

这是我的 tsconfig.json：

{
    "compilerOptions": {
        "module": "system",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": false,
        "outFile": "{PATH}"
    }
}

我的 TypeScript 代码：

import { Button } from "UI/Button";

new Button("Hello World!");
console.log("HELLO!");

编译后的代码变成这样：

System.register("Main/main", ["UI/Button"], function (exports_4, context_4) {
    "use strict";
    var Button_1;
    var __moduleName = context_4 && context_4.id;
    return {
        setters: [
            function (Button_1_1) {
                Button_1 = Button_1_1;
            }
        ],
        execute: function () {
            new Button_1.Button("Hello World!");
            console.log("HELLO!");
        }
    };
});

如果我删除导入并只保留 console.log：

console.log("HELLO!");

它会在没有导入的情况下删除所有内容，甚至是以前的模块，因为我猜它没有检测到它们正在被使用。

我假设我误解了导入/导出系统的工作原理？我希望能够运行函数和导入/导出文件，但到目前为止，我似乎只能导入/导出文件，而不能运行它们。我也希望将所有这些都编译到一个文件中。任何帮助将不胜感激！

Answer 1

您需要从您的 HTML 文件中运行这些脚本，并使用 SystemJS（如在您的 tsconfig.json 中）调用它们。

import 或 export 的存在是 TypeScript 可以推断您是否正在编写 a script versus a module 的方式之一。编译输出的巨大变化来自 TypeScript 将您的文件解释为模块当且仅当它具有 import 或 export 语句。

模块背后的想法，来自 Mozilla 的cartoon introduction：

模块为您提供了一种更好的方式来组织这些变量和函数。使用模块，您可以将有意义的变量和函数组合在一起。

这会将这些函数和变量放入模块范围内。模块作用域可用于在模块中的函数之间共享变量。

但与函数作用域不同，模块作用域有一种方法可以使它们的变量也可用于其他模块。他们可以明确说明模块中的哪些变量、类或函数应该可用。

Modules 背后的整个想法是，您可以将作为UI/Button 模块（或您编写的任何其他模块）的一部分发生的加载推迟到您需要它时。 UI/Button 初始化只发生一次，并且只允许您访问 export 的变量、函数和类。 （也就是说，模块也可能具有“副作用”，例如您的console.log：这些不是导出值，它们只是执行模块时发生的可见事物。）此外，每个模块都在其自己的命名空间中执行（这里是它自己的execute 函数），所以如果一个模块定义了一个counter 变量，它不会干扰另一个模块的counter 变量。

您选择了system TypeScript 模块格式，也称为SystemJS。在这样做时，您注册让 SystemJS 管理您的模块加载，这将允许您调用 System.import 以从您发布的已编译 Javascript 加载您的 Main/main 模块。那时您会看到您期望的输出，因为您已经特别要求了它。当您指定 outFile 时，您还可以选择 AMD（这也需要指定您的“入口点”）或“无”（这将是 prohibit import and export）。

一旦你对模块有了更好的理解，你就可以研究像 Webpack 这样的“捆绑器”。这些系统遍历您的所有模块（可能是一个文件，也可能是多个文件），并将它们捆绑到一个文件中，如您所描述的。你甚至可以告诉 Webpack 你打算将哪个模块作为入口点，它会在脚本加载后立即自动运行——就像老式的 JS 脚本一样。