@vis-resm/importmap

resm 运行时 importmap 管理工具。

使用

一般使用

// package.json
{
  "name": "@examples/demo1",
  "version": "1.0.0",
  "dependencies": {
    "vue": "^2.6.14",
    "style-inject": "0.3.0"
  },
  "external": []
}

import { install } from "@vis-resm/importmap";
import pkg from "xxx/package.json";

install(pkg);

最后会自动在浏览器插入以下importmap

<script type="importmap-shim">
  {
    "imports": {
      "@examples/[email protected]/vue": "https://unpkg.com/[email protected]/dist/vue.esm.browser.min.js",
      "@examples/[email protected]/style-inject": "https://unpkg.com/[email protected]/dist/style-inject.es.js",
    }
  }
</script>

使用 external

有些情况下我们不想将dependencies的依赖全部生成 map，我们可以通过external字段指定。

// package.json
{
  "name": "@examples/demo1",
  "version": "1.0.0",
  "dependencies": {
    "vue": "^2.6.14",
    "style-inject": "0.3.0"
  },
  "external": ["vue"]
}

<script type="importmap-shim">
  {
    "imports": {
      "@examples/[email protected]/vue": "https://unpkg.com/[email protected]/dist/vue.esm.browser.min.js"
    }
  }
</script>

指定 url 库

目前支持unpkg与node_modules中获取。

import { install } from "@vis-resm/importmap";
import pkg from "xxx/package.json";

install(pkg, "unpkg");

install(pkg, "node_modules");

自定义源映射

import { install } from "@vis-resm/importmap";
import pkg from "xxx/package.json";

install(pkg, "custom", {
  "[email protected]": "./plugins/vue/browser.es.min.js",
});

容错处理

如果仓库中json文件中没有配置相关的 map 地址，有没有自定义提供 map 地址，会直接从https://unpkg.com/<name>@<version>?module地址获取相关的资源。

添加共用源

由于 npm 库模块众多，如果需要，请自行添加相关包映射在相关json配置中。

添加格式

• 依赖名称：<name>@<version> : <url>
• unpkg 匹配规则请查看官网：https://unpkg.com/
• node_modules 匹配命名注意：<url> ---> node_modules/<name>-<version>/xxx/xxx

尽量精确到文件名，防止浏览器多次重定向影响包下载速度。

支持

本库是配合es-module-shims库使用的：https://github.com/guybedford/es-module-shims

由于目前 WICG 的 importmap 有部分功能还不完善，es-module-shims 过渡 importmap 比较方便：https://github.com/WICG/import-maps