如何配置Import Maps配合Skypack实现依赖版本锁定

问题背景 #

目标是无打包步骤直接运行原生JavaScript，从Skypack CDN导入CodeMirror，同时保留裸导入语句写法，保证后续切换到Babel等打包工具时不需要修改业务代码。
业务代码中使用的导入语句如下：

import {EditorView, basicSetup} from 'codemirror'
import {keymap} from '@codemirror/view'
import {indentWithTab} from '@codemirror/commands'
import {javascript} from '@codemirror/lang-javascript'
import {EditorState} from '@codemirror/state'

不锁定版本时，以下Import Map配置可正常运行：

<script type="importmap">
  {
    "imports": {
      "codemirror" : "https://cdn.skypack.dev/codemirror/", 
      "@codemirror/" : "https://cdn.skypack.dev/@codemirror/"
    }
  }
</script>

直接在scope路径后追加版本号的配置会失效：

<script type="importmap">
  {
    "imports": {
      "codemirror" : "https://cdn.skypack.dev/codemirror@6.0.0/", 
      "@codemirror/" : "https://cdn.skypack.dev/@codemirror@6.0.0/"
    }
  }
</script>

失效原因：该配置生成的资源地址为https://cdn.skypack.dev/@codemirror@6.0.0/commands，不符合Skypack的URL规则。Skypack下scoped包的版本号必须追加在具体子包名后，对应资源的正确地址格式为https://cdn.skypack.dev/@codemirror/commands@6.0.0。

解决方案 #

方案1：逐包显式映射（推荐） #

不需要使用scope通配规则，直接将所有用到的依赖逐个配置版本映射，业务代码的导入语句不需要做任何修改，完全兼容未来打包工具的解析逻辑：

<script type="importmap">
{
  "imports": {
    "codemirror": "https://cdn.skypack.dev/codemirror@6.0.0",
    "@codemirror/view": "https://cdn.skypack.dev/@codemirror/view@6.0.0",
    "@codemirror/commands": "https://cdn.skypack.dev/@codemirror/commands@6.0.0",
    "@codemirror/lang-javascript": "https://cdn.skypack.dev/@codemirror/lang-javascript@6.0.0",
    "@codemirror/state": "https://cdn.skypack.dev/@codemirror/state@6.0.0"
  }
}
</script>

• 配置逻辑完全符合Skypack的URL规则，不会出现路径解析错误
• 每个子包版本可独立控制，后续升级或新增@codemirror/*下的依赖时，只需要在importmap中追加对应条目即可

方案2：使用Skypack固定构建地址 #

Skypack为每个版本的包提供了带唯一构建ID的pinned固定地址，这类地址会自动锁死所有依赖的版本，可以直接作为scope通配的映射目标。该方式不需要逐个配置子包，但生成的映射地址为Skypack平台专属，后续如果迁移到其他CDN需要重新生成配置。

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