runtime importmap management tool
npm install @vis-resm/importmap
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/地址获取相关的资源。
$3
由于 npm 库模块众多,如果需要,请自行添加相关包映射在相关json配置中。
#### 添加格式
- 依赖名称:
- unpkg 匹配规则请查看官网:https://unpkg.com/
- node_modules 匹配命名注意:
> 尽量精确到文件名,防止浏览器多次重定向影响包下载速度。
$3
本库是配合es-module-shims`库使用的:https://github.com/guybedford/es-module-shims