什么是 Import maps?
或者,可以理解为怎么控制 javascript 的 import 的行为。
基本概念
该提议允许控制 javaScript
的import
语句和 import()
表达式获取哪些 URL。
同时,这提案允许“裸导入”,就像import moment from "moment"
这样的语句,使其能够工作。
这个东西的原理就是通过一个使用中的import map
去控制普遍的模块之间的解析问题,正如介绍的,以下代码可工作:
import moment from "moment";
import { partition } from "lodash";
现在,上面两行代码会抛出异常,因为裸导入符是显示保留的,通过给浏览器提供如下代码:
<script type="importmap">
{
"imports": {
"moment": "/node_modules/moment/src/moment.js",
"lodash": "/node_modules/lodash-es/lodash.js"
}
}
</script>
像上面这样写的话,之气那的import
的行为就会解析成如下:
import moment from "/node_modules/moment/src/moment.js";
import { partition } from "/node_modules/lodash-es/lodash.js";
背景
对于大多数存在pre-ES2015 module systems
,CommonJS
的有经验的web开发者来说,他们可能会通过以下的方式导入模块:
const $ = require("jquery");
const { pluck } = require("lodash");
翻译成浏览器的es语法,就是:
import $ from "jquery";
import { pluck } from "lodash";
在这个系统中,这些裸导入jquery
和lodash
映射向了完整的文件名或者网址。通常这些导入符表示一个库,通过npm导入。通过只指明库的名字,它们会暗中请求这个包的主模块。