HTML代码中script标签type等于importmap管理ES模块依赖路径-html教程-PHP中文网

importmap是w3c标准的模块路径映射机制，必须用type="importmap"（非application/importmap），写错大小写、短横线或漏引号均静默失效；须置于head内所有type="module"脚本之前，映射目标须为合法es模块且响应头为application/javascript。

html代码中script标签type等于importmap管理es模块依赖路径

importmap 是什么，为什么不能直接写 `type="importmap"`

HTML 的 <script></script> 标签不支持 type="importmap" —— 这个值根本不是合法的 MIME 类型，浏览器会忽略它，甚至在严格模式下报错 Failed to execute 'import' on 'WorkerGlobalScope': The script has unsupported type 'importmap'。真正用于声明 import map 的是 type="importmap" 的 错误认知，实际必须用 type="application/importmap"，且仅允许出现在 <script></script> 标签中（不能是外部文件），且必须在任何 import 语句执行前加载。

正确写法：用 `type="application/importmap"` 声明映射

import map 必须是内联 JSON，且 <script></script> 标签要放在所有依赖模块的 import 之前（通常紧贴底部）：

<script type="application/importmap">
{
  "imports": {
    "lodash": "https://cdn.jsdelivr.net/npm/lodash@4.17.21/+esm",
    "utils": "./src/utils.js"
  }
}</script><script type="module">
  import _ from 'lodash';
  import { helper } from 'utils';
</script>

type 必须严格为 "application/importmap"，大小写敏感，拼错或加空格都会失效
JSON 内容不能有注释、尾逗号，也不能是变量或动态生成（服务端渲染除外）
映射目标路径必须是完整 URL 或相对路径（从当前 HTML 所在位置解析），不能是 bare specifier 本身
如果用 import 加载了模块，但 import map 尚未解析完成，会直接报 Failed to resolve module specifier

常见错误：CDN 路径没带 `+esm` 或用了非 ES 模块

很多 CDN（如 jsDelivr、unpkg）默认返回 CommonJS 版本，而 type="module" 只能加载 ES 模块。例如：https://cdn.jsdelivr.net/npm/lodash@4.17.21 返回的是 CJS，浏览器会报 TypeError: Cannot assign to read only property 'exports' of object。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

jsDelivr：在 URL 后加 /+esm（如 https://cdn.jsdelivr.net/npm/lodash@4.17.21/+esm）
unpkg：加 ?module（如 https://unpkg.com/lodash@4.17.21?module）
Skypack：直接用 https://cdn.skypack.dev/lodash@4.17.21（自动转 ES 模块）
本地路径如 ./src/utils.js 必须确保文件导出是 export 语法，且服务器支持 .js 的 Content-Type: text/javascript