浏览器 Import Maps

August 21, 2022

Import Maps 可以控制 import 语句和 import() 表达式的行为。
参见：https://caniuse.com/import-maps
提案：https://github.com/WICG/import-maps
规范：https://html.spec.whatwg.org/multipage/webappapis.html#import-maps

非浏览器环境也有相关实现：
对于 Node.js：https://nodejs.org/dist/latest-v16.x/docs/api/policy.html
对于 Deno：https://deno.land/manual/linking_to_external_code/import_maps

指定 Maps

html

<script type="importmap">
    {
        "imports": {
            "moment": "/node_modules/moment/src/moment.js",
            "lodash": "/node_modules/lodash-es/lodash.js"
        }
    }
</script>

根据 Import Maps 导入：

import moment from "moment";
import { partition } from "lodash";

注意，相对路径会受到 <base> 标签的影响

html

<base href="https://www.unpkg.com/vue@2/dist/" />
<script type="importmap">
    {
        "imports": {
            "vue": "./vue.runtime.esm.js"
        }
    }
</script>

<script type="module">
    import("vue"); // resolves to https://www.unpkg.com/vue@2/dist/vue.runtime.esm.js
</script>

导入子模块

json

{
    "imports": {
        "moment": "/node_modules/moment/src/moment.js",
        "moment/": "/node_modules/moment/src/",
        "lodash": "/node_modules/lodash-es/lodash.js",
        "lodash/": "/node_modules/lodash-es/"
    }
}

// 导入主模块
import moment from "moment";
import _ from "lodash";
// 导入子模块
import localeData from "moment/locale/zh-cn.js";
import fp from "lodash/fp.js";

重映射

json

{
    "imports": {
        "https://www.unpkg.com/vue@2/dist/vue.runtime.esm.js": "/node_modules/vue/dist/vue.runtime.esm.js"
    }
}

这就会把

import Vue from "https://www.unpkg.com/vue@2/dist/vue.runtime.esm.js";

改为本地获取

import Vue from "/node_modules/vue/dist/vue.runtime.esm.js";

可以将任意导入进行重映射

json

{
    "imports": {
        "/app/helpers.mjs": "/app/helpers/index.mjs"
    }
}

使用尾斜杠时，进行前缀匹配

json

{
    "imports": {
        "https://www.unpkg.com/vue/": "/node_modules/vue/"
    }
}

scopes 范围更改

用 scopes 可以控制指定路径下模块中的 import 导入的行为
使之从 Import Maps 的 scopes 指定的特定源进行导入，主要使用场景是版本控制。

{
  "imports": {
    "a": "/a-1.mjs",
    "b": "/b-1.mjs",
    "c": "/c-1.mjs"
  },
  "scopes": {
    "/scope2/": {
      "a": "/a-2.mjs"
    },
    "/scope2/scope3/": {
      "b": "/b-3.mjs"
    }
  }
}

指定上面的 scope，则：

在模块 /scope1/foo.mjs 中（未在 scope 中指定），import("a") => import("/a-1.mjs")
在模块 /scope2/foo.mjs 中（通过 scope 中指定），import("a") => import("/a-2.mjs")

这个例子摘自提案，解析如下：

Specifier	Referrer	Resulting URL
a	/scope1/foo.mjs	/a-1.mjs
b	/scope1/foo.mjs	/b-1.mjs
c	/scope1/foo.mjs	/c-1.mjs

a	/scope2/foo.mjs	/a-2.mjs
b	/scope2/foo.mjs	/b-1.mjs
c	/scope2/foo.mjs	/c-1.mjs

a	/scope2/scope3/foo.mjs	/a-2.mjs
b	/scope2/scope3/foo.mjs	/b-3.mjs
c	/scope2/scope3/foo.mjs	/c-1.mjs

导入 importmap 文件，替代硬编码

html

<script type="importmap" src="import-map.importmap"></script>

header 头应指定 MIME 类型为application/importmap+json application/json

动态生成 script 标签

可以动态生成 script 标签来控制 Import Maps，但必须保证该标签在模块解析前加载。

←Back to home