typescript - 在 Typescript 项目中将 umd 全局变量与模块一起使用

Question

我正在尝试让 Leaflet 库与我的 Typescript 项目配合良好。

我的项目遵循 commonJs 模式(在我的源文件中导入\导出)，但是当我使用 webpack 构建时，编译器在我尝试访问 L 的文件中给出了以下错误传单模块公开的全局

'L' refers to a UMD global, but the current file is a module. Consider adding an import instead.

现在，如果我将 leaflet 导入到我的源文件中，就可以解决这个问题，如下所示:

import * as L from 'leaflet'

但我想知道我是否可以在我的所有文件中全局访问 t 而不必在我的每个文件中导入。

我仔细研究了一下，发现了一些变通方法，您可以像这样声明自己的全局变量:

globals.d.ts

import * as L from "leaflet";

declare global {
  const L: L
}
export {};

我不确定这是否被推荐，感觉有点肮脏，webpack 配置是否有正确的方法来为 commonJs 项目提供 UMD 模块公开的全局变量，或者我在胡说八道？我承认我在尝试理解模块类型及其互换性之间的差异时感到困惑，所以请放轻松!

Answer 1

在模块中，您可以导入其他模块或使用全局变量。无法一次将模块导入所有模块。如果你懒得到处写 import，那么你应该使用全局变量。

UMD模块系统是通用的。如果它被导入到某个模块(CommonJS，AMD ...)，那么它的行为就像模块一样，即它不会填充全局范围。如果你想让 UMD 成为全局性的，你应该把它添加为 <script>到页面。然后你可以使用.d.ts.文件来通知 TypeScript，该传单在全局范围内可用。那里没有任何黑客攻击(此外，如今使用全局范围而不是模块本身就是一种黑客攻击)。