TypeScript停止文件成为一个模块？

Question

我使用进口和出口，因为引用据说是过时的。但是，我想编译到一个文件中，我使用的是"system“模块，但它正在将所有内容转换为一个模块，即使没有导出任何内容。如果导入任何内容，则不会执行代码，但如果没有导入或导出任何代码，则执行代码。我需要导入文件才能使用它们，但我不能这样做，因为代码变成了模块函数。

这是我的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判断您是否正在编写脚本与模块的方法之一。编译后的输出中的剧烈变化来自于TypeScript将您的文件解释为模块当且仅当它有import或export语句。

模块背后的想法，来自Mozilla的卡通游戏攻略

模块为您组织这些变量和函数提供了更好的方法。有了模块，就可以将变量和函数组合在一起，这样才有意义。 这会将这些函数和变量放入模块作用域中。模块作用域可用于在模块中的函数之间共享变量。 但与函数作用域不同的是，模块作用域也有一种使其变量对其他模块可用的方法。他们可以显式地说出模块中哪些变量、类或函数是可用的。

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

您已经选择了system TypeScript模块格式，也称为SystemJS。在这样做的过程中，您将注册让SystemJS管理您的模块加载，这将允许您调用System.import从您发布的编译后的Javascript加载Main/main模块。此时，您将看到所期望的输出，因为您已经明确地请求了它。在指定outFile时，您还可以选择AMD (这还需要指定“入口点”)或“无”( export)。

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