我正在尝试让 Leaflet 库与我的 Typescript 项目很好地配合。
我的项目遵循 commonJs 模式（在我的源文件中导入 xports），但是当我使用 webpack 构建时，编译器从我的文件中给出以下错误，我在其中尝试访问由 leaflet 模块公开的
L'L'指的是UMD全局，但当前文件是一个模块。考虑 相反，添加导入。
现在，如果我将传单导入到我的源文件中，我可以解决这个问题，如下所示：
import * as L from 'leaflet'
但我想知道是否可以在所有文件中全局访问 t ，而不必在每个文件中导入。
我进行了深入研究，发现了一些解决方法，您可以像这样声明自己的全局变量：
globals.d.ts
import * as L from "leaflet";
declare global {
const L: L
}
export {};
我不确定这是否是推荐的，感觉有点肮脏，webpack 配置是否有正确的方法来为 commonJs 项目提供 UMD 模块公开的全局变量，或者我是在胡说八道吗？我承认我在尝试理解模块类型之间的差异及其可互换性时感到困惑，所以对我放轻松！
在模块中，您可以导入其他模块或使用全局变量。无法一次将模块导入到所有模块。如果你懒得到处写 import，那么你应该使用全局变量。
UMD模块系统具有通用性。如果它被导入到某个模块（CommonJS、AMD...），那么它的行为就像模块一样，即它不会填充全局范围。如果您希望 UMD 成为全球性的，您只需将其添加为
<script>.d.ts.我在评论中遇到了与 Sam Claus 相同的问题。我在引用 Typescript 中的命名空间时遇到了严重的困难，这些命名空间是由 HTML 文件内的脚本标记中加载的脚本提供的。
我的任务是使用 Plotly 根据一些数据制作一个简单的静态 HTML 报告。我不想（想）使用捆绑器，因为我一开始觉得没有必要。目前，我使用模块作为从 TS 编译为 JS 的单独文件，并将入口模块加载到标签中。
Plotly 以经典方式导入，缩小的非模块版本是从 HTML 头中的脚本标记加载的，我下载并存储在本地。静态页面可以离线使用。仅对于类型定义，我使用 NPM。我通过仅使用我不会更改的本地存储的缩小版本来避免向锁定文件添加额外的依赖项。这可能是人们能想到的最轻量级、最快速的技术。我将“plotly.js”添加到 .tsconfig 中的
types我发现，有两种方法可以绕过 UMD 全局变量的错误。
使用 NPM 获取库的模块版本，并通过 HTML 文件中的导入映射引用模块。有关打字稿部分，请参阅有关使用 NPM 导入 Plotly 的问题。会浪费包管理器的内存。如果依赖项很少，这可能并不重要，因为新的空文件本身可能比 package-lock.json 的更改更大。
定义别名变量。
// @ts-ignore
const plotly = Plotly
别名的优点是它的使用不会产生错误。 “UMD全局”的使用只集中在一处，因此很容易被忽视。缺点是不必要的变量使用与公共命名空间名称略有不同的名称（可能违反命名约定）。
我只需要在一个模块中导入，因此将以上两行放在我的导入语句下。但一般来说，所有 UMD 全局变量也可以在文件开头使用
// @ts-nocheck然后可以在其他模块中按需导入：
import { plotly as Plotly } from "./dependencies.js"理论上，人们还可以从自己的文件中默认导出每个文件。在源目录中创建了一个新文件
plotly.js// @ts-ignore
export default const plotly = Plotly
导入为
import * as Plotly from "./plotly.js" // relative path to our own file
但是，文件数量的增加可能会导致比仅使用 NPM 添加这些依赖项更高的内存浪费。
这毕竟是一个 hack，如果 TypeScript 开发人员重新思考这个问题并将错误转变为某种警告，那就更好了，特别是因为它与错误行为无关，因此不应被视为错误。