多个 TypeScript 文件配置

Question

这是一个愚蠢而简单的问题： 我是整个 webpack 工具的新手。

我一直在尝试使用 typescript 和 webpack 构建一个简单的 web-app。在过去，我创建了 typescript 并在不捆绑它们的情况下编译它们。

使用 webpack，我已经安装了必要的加载器、打字稿和 jQuery。 问题是，我有 3 个打字稿文件：

1. main.ts -> 导入所有资产（图像、css）和其他打字稿
2. functions.ts -> 包含我所有的自定义函数/模块
3. ui-controller.ts

在functions.ts中我总是创建命名空间，例如：

module Functions{
    export module StringTools{
       export function IsEmpty(): boolean{
           //some code
       }
    }
}

在浏览器中，我知道上面的 sn-p 代码会被调用，但在 main.ts（在运行时）中无法识别，即使我已经导入它。 这就是我在 main.ts 中导入它的方式：

import '.src/functions'

有什么建议可以解决这个问题吗？

Answer 1

Typescript module 关键字令人困惑，在 1.5 版本中确实将其更改为 namespace 以更好地反映其含义。看here。

命名空间也称为内部模块。当您的文件在全局范围内进行评估时，它们将被使用。您可以使用 typescript playground 来查看命名空间是如何被转译的。关键是 - 命名空间不是模块。

然而，Webpack 不会在全局范围内评估文件，它会在函数内部评估它们以提供真正的模块行为。

那么是什么让你的打字稿文件变成了一个模块呢？关键字 export 和 import （但不在您的示例中的命名空间内）。

Typescript 将看到这些关键字，并根据您在 tsconfig.json 中的配置将它们转换为 commonjs\AMD\es6 require 或 define 语句。现在你有了“真正的”模块。然后，Webpack 的工作就是用这些模块做一些事情（关于在线的大量信息），以便它们可以在没有模块的浏览器中工作，但那部分与 typescript 无关。

TL;DR - 那么你将如何在 Webpack 中做到这一点？

/* functions.ts */
export function IsEmpty(): boolean{
    //some code
}

和

/* main.ts */
import {isEmpty} from './functions';

如果您希望使用module StringTools 所建议的更好的代码组织，只需拆分为不同的文件。您可以阅读有关 es6 import 语法的更多信息以获取更多信息。

Answer 2

此答案的第一部分是您的主要 module（已替换为 namespace 关键字）未导出...因此您的函数文件没有导出的成员。

export namespace Functions { //...

答案的第二部分是，如果您使用模块，you don't need to use namespaces as the module is enclosed within its own scope。

您设计的文件的工作版本，我会说删除包装命名空间：

functions.ts

export namespace StringTools{
   export function IsEmpty(): boolean{
       //some code
   }
}