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

Question

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

这是我的tsconfig.json:

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

我打印稿代码:

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变量。

你选择了systemTypeScript模块格式，也就是SystemJS。在这样做的时候，你正在注册让SystemJS管理你的模块加载，这将允许你调用System.import来加载你的Main/main模块从编译的Javascript你已经发布。此时，您将看到期望的输出，因为您已经明确请求了它。当指定outFile时，您还可以选择AMD(这也需要指定您的"入口点")或"none";(这将禁止import和export)。

一旦你对模块有了更好的理解，你就可以查看"bundle "像Webpack。这些系统遍历所有模块(可能是一个文件，也可能是多个)，并将它们捆绑到一个文件中。你甚至可以告诉Webpack你打算把哪个模块作为入口点，它会在脚本加载后自动运行——就像一个老式的JS脚本一样。