如何从CDN引入Leaflet到带TypeScript支持的模块中？

问题回顾 #

你尝试的两种引入方式存在矛盾：

• 直接引入UMD版本：浏览器运行正常，但TS报错'L' refers to a UMD global, but the current file is a module
• 用import * as L引入UMD版本：TS类型检查正常，但浏览器报错L.map is not a function（因UMD模块不支持该ES模块导入语法）

以下是无需打包器的可行解决方案：

方案1：允许TS访问UMD全局变量（最简单） #

保持原UMD引入方式，通过配置或声明让TS识别全局L：

方式A：修改tsconfig.json #

在compilerOptions中添加配置：

{
  "compilerOptions": {
    "allowUmdGlobalAccess": true
  }
}

之后直接使用全局L即可，TS会自动关联@types/leaflet的类型定义。

方式B：手动添加全局声明 #

在TS文件顶部添加声明语句：

declare const L: typeof import('leaflet');
import 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.8.0/leaflet.js';

// 正常调用Leaflet API
const map = L.map('map').setView([51.505, -0.09], 13);

方案2：封装全局L为模块导出（兼顾类型与运行时） #

创建中间模块文件（如leaflet-wrapper.js），加载UMD模块后导出全局L：

// leaflet-wrapper.js
import 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.8.0/leaflet.js';
export const L = window.L;

在TS文件中引入该封装模块：

import { L } from './leaflet-wrapper.js';

const map = L.map('map').setView([51.505, -0.09], 13);

TS会通过@types/leaflet自动识别L的类型，浏览器运行时也能正确获取Leaflet实例。

方案3：动态导入+类型断言（适合异步初始化场景） #

若地图初始化逻辑为异步执行，可采用动态导入结合类型断言：

(async () => {
  // 加载UMD模块
  await import('https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.8.0/leaflet.js');
  // 断言window.L的类型
  const L = window.L as typeof import('leaflet');
  const map = L.map('map').setView([51.505, -0.09], 13);
})();

长期最优解：升级到Leaflet 1.9+ #

Leaflet 1.9版本已原生支持ES模块，届时可直接使用标准ES模块导入语法：

import * as L from 'https://cdn.example.com/leaflet@1.9.0/dist/leaflet.esm.js';

无需额外配置即可同时满足TS类型检查和浏览器运行需求。

内容的提问来源于stack exchange，提问作者Aron Schöffer