javascript - 多个 TypeScript 文件配置

Question

这里有一个愚蠢而简单的问题:我对整个 webpack 工具都很陌生。

我一直在尝试使用 typescript 和 webpack 构建一个简单的网络应用程序。过去，我创建了 typescript 并编译它们，而不捆绑它们。

通过 webpack，我已经安装了必要的加载器、typescript 和 jQuery。问题是，我有 3 个 typescript 文件:

1. main.ts -> 导入所有资源(图像、CSS)和其他 typescript
2. functions.ts -> 包含我的所有自定义函数/模块
3. ui-controller.ts

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

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

在浏览器中，我知道上面的代码片段会被调用，但即使我已经导入了它，它在 main.ts 中(在运行时)也无法被识别。这就是我将其导入 main.ts 的方式:

import '.src/functions'

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

Answer 1

Typescript module 关键字令人困惑，在 1.5 版本中它确实被更改为 namespace 以更好地反射(reflect)其含义。看here .

命名空间也称为内部模块。它们旨在在全局范围内评估您的文件时使用。您可以使用 Typescript Playground 来查看 namespace 是如何转译的。要点是 - 命名空间不是模块。

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

那么是什么让你的 typescript 文件成为一个模块呢？关键字 export 和 import (但不在像您的示例中那样的命名空间内)。

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

TL;博士 -那么你会如何在 Webpack 中做到这一点呢？

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

和

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

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