参照OpenLayers官方教程开发时HTML运行的模块导入报错问题咨询

核心认知误区 #

• 你本地ol文件夹里的4个文件，是OpenLayers提供的全量打包UMD版本，不存在Map、source/OSM这类拆分的独立JS文件，你写的import './ol/ol/Map'指向的路径本身就不存在，404是必然结果。
• 官方示例里import Map from 'ol/Map'的写法，本质是配合包管理器、构建工具的模块解析逻辑设计的，浏览器原生ES模块根本不认识ol/xxx这种没有协议、路径前缀的「裸模块标识符」，这是你之前遇到模块解析报错的根源。
• 你误以为ol模块会对应本地的ol.js单文件，实际上UMD打包的ol.js不会按子模块拆分暴露导入入口，只会在全局挂一个ol的命名空间对象。

两种不需要额外工具就能跑通的实现方式 #

方式一：适配你当前已有的本地文件（零改动下载的文件） #

1. 删掉main.js里所有的ES模块导入语句
2. 在index.html的head区域，直接引入本地的打包资源：

<!-- 引入OpenLayers核心脚本 -->
<script src="./ol/ol.js"></script>
<!-- 引入OpenLayers样式 -->
<link rel="stylesheet" href="./ol/ol.css">

3. 原示例里用到的所有OpenLayers类，直接从全局ol对象里取值即可，不需要import：

// 替代之前的所有导入语句
const Map = ol.Map;
const OSM = ol.source.OSM;
const TileLayer = ol.layer.Tile;
const TileWMS = ol.source.TileWMS;
const View = ol.View;

// 后续的地图初始化逻辑和官方示例完全一致

方式二：保留ES模块导入写法，用原生importmap实现 #

如果你不想用全局对象的写法，需要满足两个前提：

1. 替换当前的单文件打包版，换成OpenLayers提供的浏览器原生ES模块拆分版目录——也就是目录里包含独立的Map.js、source/OSM.js、layer/Tile.js这类拆分文件，不是现在的4个打包文件。
2. 在引入你的main.js之前，加一段importmap配置，告诉浏览器怎么解析ol/开头的模块路径：

<script type="importmap">
{
  "imports": {
    "ol/": "./ol/"
  }
}
</script>

配置完成后，你原来写的import Map from 'ol/Map'这类语句就可以被浏览器正确识别，不会报模块解析错误。

报错链路的对应逻辑 #

• 最初的Cannot use import statement outside a module报错：普通script标签默认不支持ES模块语法，加type="module"的解决方式是正确的。
• 中间的Failed to resolve module specifier报错：浏览器原生ES模块没有内置对裸模块名的解析能力，必须明确指定路径或者做路径映射。
• 最后的404报错：你手动拼接的导入路径指向不存在的拆分文件——你本地的单文件打包版根本没有这些子模块文件。

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