# @vis-resm/importmap

> runtime importmap management tool

Latest version **0.0.11** (published 2023-09-08) · AGPL-3.0 license · 0 weekly downloads

## Install

```sh
npm install @vis-resm/importmap
pnpm add @vis-resm/importmap
yarn add @vis-resm/importmap
bun add @vis-resm/importmap
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.11 |
| Published | 2023-09-08 |
| First published | 2022-09-22 |
| Weekly downloads | 0 |
| License | AGPL-3.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 41.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Shiotsuki_ |
| Maintainers | zhanghuan628, shiotsuki_ |

## Links

- npm: https://www.npmjs.com/package/@vis-resm/importmap
- npm.io page: https://npm.io/package/@vis-resm/importmap

## Recent versions

- 0.0.11 (latest) — 2023-09-08
- 0.0.10 — 2023-09-05
- 0.0.9 — 2023-08-30
- 0.0.8 — 2023-08-15
- 0.0.7 — 2022-09-23
- 0.0.6 — 2022-09-23
- 0.0.4 — 2022-09-22
- 0.0.3 — 2022-09-22
- 0.0.2 — 2022-09-22
- 0.0.1 — 2022-09-22

## README

## @vis-resm/importmap

resm 运行时 importmap 管理工具。

<p>
  <img alt="license" src="https://img.shields.io/npm/l/@vis-resm/importmap?color=blue">
  <img alt="version" src="https://img.shields.io/npm/v/@vis-resm/importmap?color=light">
  <img alt="downloads" src="https://img.shields.io/npm/dt/@vis-resm/importmap">
</p>

## 使用

### 一般使用

```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
<script type="importmap-shim">
  {
    "imports": {
      "@examples/demo1@1.0.0/vue": "https://unpkg.com/vue@2.6.14/dist/vue.esm.browser.min.js",
      "@examples/demo1@1.0.0/style-inject": "https://unpkg.com/style-inject@0.3.0/dist/style-inject.es.js",
    }
  }
</script>
```

### 使用 external

有些情况下我们不想将`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
<script type="importmap-shim">
  {
    "imports": {
      "@examples/demo1@1.0.0/vue": "https://unpkg.com/vue@2.6.14/dist/vue.esm.browser.min.js"
    }
  }
</script>
```

### 指定 url 库

目前支持`unpkg`与`node_modules`中获取。

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

install(pkg, "unpkg");

install(pkg, "node_modules");
```

### 自定义源映射

```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",
});
```

### 容错处理

如果仓库中`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](https://github.com/guybedford/es-module-shims)

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

---
_Source: https://npm.io/package/@vis-resm/importmap · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._