TypeScript项目中UMD全局变量与模块兼容问题：Leaflet编译报错

我来给你梳理几个除了直接import之外的可行方案，都是针对你这个TypeScript+Webpack+Leaflet的场景的：

方案1：通过TypeScript配置声明全局L #

这个方案不用改业务代码，只需要调整TypeScript的配置就能让编译器认可L是全局变量：

• 先确保已经装了Leaflet的类型声明包：npm install @types/leaflet --save-dev
• 打开tsconfig.json，在compilerOptions里添加"types": ["leaflet"]，这样TypeScript会自动加载Leaflet的全局类型声明，你在代码里直接用L就不会报错了
• 要是你不想全局加载所有Leaflet类型，也可以在需要用L的文件顶部加一行类型声明：declare const L: typeof import('leaflet');，这样单个文件就能识别L的类型了

方案2：用Webpack的ProvidePlugin自动注入L #

借助Webpack的插件，可以把Leaflet自动注入到每个模块的作用域里，不用手动写import：

1. 在你的Webpack配置文件里先引入webpack：

const webpack = require('webpack');

2. 在plugins数组里添加这个插件配置：

plugins: [
  new webpack.ProvidePlugin({
    L: 'leaflet'
  })
]

配置完之后，Webpack会自动在每个模块里隐式添加import L from 'leaflet';，你在代码里直接用L就行，TypeScript也不会再报全局变量的错误。

方案3：手动把L挂载到全局对象 #

如果你更习惯传统的全局变量用法，可以在项目入口文件里手动把Leaflet挂到window上：

import * as L from 'leaflet';
// 因为TypeScript严格模式下不允许直接给window加属性，所以需要断言类型
(window as any).L = L;

然后在tsconfig.json的compilerOptions里设置"allowUmdGlobalAccess": true，这样TypeScript就允许你在模块文件里访问这个UMD全局变量L了。记得配合@types/leaflet使用，保证类型提示正常。

不过要提一句，其实直接import是最符合ES模块规范的做法，也是TypeScript官方推荐的方式，但如果有特殊场景需要全局使用L，上面这几个方案都能解决你的问题。

内容的提问来源于stack exchange，提问作者mindparse