Javascript 多类型脚本文件配置_Javascript_Typescript_Webpack

Javascript 多类型脚本文件配置

javascript typescript webpack

Javascript 多类型脚本文件配置,javascript,typescript,webpack,Javascript,Typescript,Webpack,下面是一个愚蠢而简单的问题：我对整个网页工具都是新手我一直在尝试使用typescript和webpack构建一个简单的web应用程序。在过去，我创建了typescript并编译它们，而不捆绑它们使用webpack，我已经安装了必要的加载程序、typescript和jQuery。问题是，我有3个typescript文件： main.ts->导入所有资源（图像、css）和其他类型脚本 functions.ts->包含所有自定义函数/模块 ui-controller.ts 在functions

下面是一个愚蠢而简单的问题：我对整个网页工具都是新手

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

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

main.ts->导入所有资源（图像、css）和其他类型脚本

functions.ts->包含所有自定义函数/模块

ui-controller.ts

在functions.ts中，我始终创建名称空间，例如：

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

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

import '.src/functions'

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

这个答案的第一部分是，您的主

模块

（已替换为

名称空间

关键字）没有导出。。。因此，您的函数文件没有导出成员

export namespace Functions { //...

答案的第二部分是，如果您使用的是模块

您设计的文件的工作版本，我建议删除包装名称空间：

功能

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

答案的第一部分是您的主

模块

（已被

名称空间

关键字替换）未导出。。。因此，您的函数文件没有导出成员

export namespace Functions { //...

答案的第二部分是，如果您使用的是模块

您设计的文件的工作版本，我建议删除包装名称空间：

功能

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

Typescript

module

关键字令人困惑，在1.5版中，它确实被更改为

名称空间

，以更好地反映其含义。看

名称空间也称为内部模块。它们用于在全局范围内评估文件时使用。您可以使用typescript来查看名称空间是如何传输的。关键是，名称空间不是模块

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

那么，是什么使您的typescript文件成为一个模块呢？关键字

export

和

import

（但不在您的示例中所示的名称空间中）

Typescript将看到这些关键字，并根据您在tsconfig.json中的配置将它们转换为commonjs\AMD\es6

require

或

define

语句。现在你有了“真正的”模块。然后Webpack的工作就是对这些模块做一些事情（在线上有很多关于这些模块的信息），这样它们就可以在没有模块的浏览器中工作，但这部分与typescript无关

TL；博士那个么，你们将如何在Webpack中实现这一点呢

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

及

如果您想按照使用

模块StringTools

的建议更好地组织代码，只需将其拆分为不同的文件即可。您可以阅读有关语法的更多信息