Question

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

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

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

main.ts - ＆gt;导入所有资产（图像，css）和其他类型脚本
functions.ts - ＆gt;包括我的所有自定义功能/模块
UI-controller.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以更好地反映其含义。看here。

命名空间也称为内部模块。它们适用于在全局范围内评估文件的情况。您可以使用typescript playground来查看如何编译命名空间。关键是 - 名称空间不是模块。

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

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

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

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关键字替换）未导出...因此您的函数文件没有导出成员。< / p>

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
   }
}

多个TypeScripts文件配置

2 个答案: