使用TypeScript时如何正确import导入maplibre-gl模块的疑问

核心问题根源 #

你当前在importmap中指向的是Maplibre-gl的UMD格式文件（dist/maplibre-gl.js），而非原生ES模块版本，这导致ES模块导入语法无法正常解析其导出结构。同时出现的诡异现象（导入M却能使用全局maplibregl）是因为UMD模块会自动挂载全局变量。

正确解决方案 #

1. 修改importmap指向ES模块版本 #

将importmap中的文件路径替换为ES模块专属的maplibre-gl.esm.js：

<script type="importmap" asp-append-version="true">
    {
      "imports": {
        "maplibre-gl": "https://unpkg.com/maplibre-gl/dist/maplibre-gl.esm.js"
      }
    }
</script>

2. TypeScript导入写法（二选一） #

方式一：导入完整命名空间

import * as maplibregl from 'maplibre-gl';

new maplibregl.Map({
    container: 'map',
    style: 'https://demotiles.maplibre.org/style.json',
    center: [-74.5, 40],
    zoom: 9
});

方式二：命名导入具体API

import { Map } from 'maplibre-gl';

new Map({
    container: 'map',
    style: 'https://demotiles.maplibre.org/style.json',
    center: [-74.5, 40],
    zoom: 9
});

为什么之前的导入方式失败？ #

• import maplibregl from 'maplibre-gl'：Maplibre-gl的ES模块没有默认导出，只有命名导出和命名空间导出。
• import { maplibregl } from 'maplibre-gl'：模块内不存在名为maplibregl的命名导出项，maplibregl是整个命名空间的别名，而非单独导出的变量。
• import * as maplibregl from 'maplibre-gl'（使用UMD文件时）：UMD文件的导出结构不符合ES模块规范，导致导入的maplibregl对象不包含预期的Map构造函数。

关于import * as M from 'maplibre-gl'能运行的诡异现象 #

这并非导入的M在起作用，而是UMD模块加载时会自动将maplibregl挂载到全局window对象上。你代码中调用的maplibregl.Map实际是全局变量，而非导入的M。即使删除导入语句，直接使用maplibregl.Map也能运行，这就是问题的本质。

是否需要提交GitHub Issue？ #

不需要。Maplibre-gl已经提供了标准的ES模块版本，只需使用正确的文件路径即可解决问题，这并非框架的导出Bug。

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