@vis-resm/importmap

@vis-resm/importmap

resm 运行时 importmap 管理工具。

使用

$3

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

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

install(pkg);
`

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

`html

`

$3

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

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

`html

`

$3

目前支持unpkg与node_modules中获取。

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

install(pkg, "unpkg");

install(pkg, "node_modules");
`

$3

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

install(pkg, "custom", {
"vue@2.6.14": "./plugins/vue/browser.es.min.js",
});
`

$3

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

$3

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

#### 添加格式

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

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

$3

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

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