如何在Rails 7 Stimulus控制器中通过Importmaps使用MapLibre？

在Rails 7的config/importmap.rb中配置了：

pin "maplibre-gl", to: "https://ga.jspm.io/npm:maplibre-gl@3.3.1/dist/maplibre-gl.js"

尝试在Stimulus控制器中通过import * as maplibregl from "maplibre-gl"（及多种变体）导入时，出现错误：Could not resolve "maplibre-gl"。

经测试，该库可在页面或局部视图中正常引用，但在Stimulus控制器中无法使用，重启bin/dev服务器也无效。虽可通过HTML头部引入脚本的方式使用，但希望通过Importmaps实现最优方案，需解决两个问题：

• 如何通过Importmaps在Stimulus控制器中引用并使用MapLibre？
• 为何页面/视图引用正常，但Stimulus控制器中不行？

1. 修正Importmap的Pin配置 #

MapLibre的UMD模块需要明确指定导出规则，修改config/importmap.rb的配置：

pin "maplibre-gl", to: "https://ga.jspm.io/npm:maplibre-gl@3.3.1/dist/maplibre-gl.js", export: "default"

如果上述配置仍不生效，可尝试添加预加载标记：

pin "maplibre-gl", to: "https://ga.jspm.io/npm:maplibre-gl@3.3.1/dist/maplibre-gl.js", preload: true, export: "default"

2. 调整Stimulus控制器中的导入语句 #

使用默认导入方式：

import maplibregl from "maplibre-gl"

若需要完整命名空间，可保留命名导入：

import * as maplibregl from "maplibre-gl"

3. 验证并重启服务 #

修改配置后，重启bin/dev，确保Importmaps重新生成映射关系。

页面/视图中直接引用脚本时，浏览器加载的是UMD格式的MapLibre包，该包会自动将maplibregl挂载到全局window对象，因此无需模块解析即可直接调用。

但Stimulus控制器运行在ES模块环境中，Importmaps需要严格按照ES模块规范识别导出项。MapLibre的UMD包默认没有明确声明ES模块导出，导致Importmaps无法正确解析模块结构，从而在Stimulus的模块上下文里抛出解析错误。

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