概述
在现代 web 应用程序中，JavaScript 依赖管理是一个关键的问题。为了解决这个问题，使用模块化编程已经成为了一种标准，而 ES Modules 是其中最为流行的模块化形式。但是，ES Modules 在浏览器中的支持还不够完善，需要使用一些工具来解决这个问题，例如 webpack 等打包工具。但是，Webpack 的模块化方案是针对于 Node.js 环境的，对于浏览器却不是最优的解决方案。
@jsenv/import-map 正是为了解决这一问题而诞生的。它是一款面向浏览器的模块标准，可以用来管理浏览器中的模块解析和加载。下面我们来详细介绍一下它的用法。
安装
在使用 @jsenv/import-map 之前，首先需要将它安装到项目中。可以在项目根目录下使用以下命令安装该包。
npm install @jsenv/import-map
用法
在你项目的根目录下，新建一个 import-map.json 文件, 该文件的格式如下：
{
"imports": {
"moduleName": "/path/to/module/file.js",
"anotherModule": "/path/to/another/module.js"
}
}其中， moduleName 和 anotherModule 分别代表项目中要使用的模块名称，后面的路径则是实际模块所在的位置。在使用时，只需要使用模块名称即可。
import { someFunction } from "moduleName";该模块将会自动从 import-map.json 文件中查找对应模块的路径，然后加载并执行该模块。
如果需要使用字符串路径而非文件路径的话，可以直接使用如下语法：
{
"imports": {
"moduleName": "/path/to/module/file.js",
"anotherModule": "https://cdn.com/another/module.js"
}
}如果某些模块需要进行版本号的管理的话，可以直接用以下语法：
{
"imports": {
"moduleName": "/path/to/module/3.0.0/index.js",
}
}这时候，当加载 moduleName 时，将会自动去 /path/to/module/3.0.0/index.js 中加载该模块。
针对于复杂一点的项目环境，也可以给 import-map.json 文件打上前后缀标记，以方便进行管理。
{
"imports": {
"@modules/moduleName": "/path/to/module/file.js",
"@modules/anotherModule": "/path/to/another/module.js"
}
}这样，在代码中使用时，就需要加上前缀 @modules/：
import { someFunction } from "@modules/moduleName";高级用法
在一些复杂的项目中，模块有可能会存在多个版本的问题， @jsenv/import-map 提供了多个相关 API 以便使用者进行更加细粒度的控制。例如：
继承父级 import-map
有时候，我们的项目中包含多个子项目，而每个子项目都有其自己的 import-map.json ，那么这些子项目可以通过继承父级的 import-map 来方便地管理模块的依赖关系。
在一个子项目的 import-map.json 文件中添加一下内容：
-- -------------------- ---- -------
-
---------- -
------------ ----------------------------------------------
--
--------- -
--------------- -
------------ -----------------------------------
-
--
------------------- -
---------------------------------- -----------------------------------
-
-使用 overrides 字符串来覆盖父 import-map 中被定义的依赖项。
在上面的示例中， myPackage 是这个子项目独有的依赖项。scopes 字段定义了，当从子项目中的某个模块中 import myPackage 时，应该如何解析它的路径。
而 importsOverrides 则是子项目想要为父 import-map 文件中的某个依赖项添加一个不同的路径。
配置自定义实现
有的时候， @jsenv/import-map 提供的默认实现并不能很好地满足开发者的需求。比如我们需要将某些特定目录下的 JavaScript 文件编译为 ES Modules 但又不想使用工具链或者自己的代码去处理。
@jsenv/import-map 允许开发者自定义 JavaScript 模块的解析和加载过程，以解决这一问题。在 import-map.json 中添加 "importObjectAvailable()": "/path/to/implementations/custom.js" ，就可以自定义实现 module 解析和加载的逻辑。
-- -------------------- ---- -------
-
---------- -
------------ -----------------------------
--
--------- -
---- -
-
--
------------------------ ------------------------------------
-我们可以写一个 custom.js 用来加载 JavaScript 文件，然后让它返回一个实现了 resolve 和 instantiate 的对象。
-- -------------------- ---- ------- ------ ----- ------------ - - -------- ------------ - -------- ------------------ --------- - -- --- - ----- -------- ---------------------- --------- - -- --- -
在上面的代码中， resolve 方法需要返回一个表示 specifier 解析到的 JavaScript 文件的绝对路径的字符串。
instantiate 则是用来返回指定模块的 default 导出。开发人员可以使用任何他们想要的逻辑来返回 JavaScript 代码，并且使用 importObject 导出它。
结论
使用 @jsenv/import-map，我们可以在浏览器中使用模块管理。它是一种非常强大的工具，可以帮助开发者在不使用工具链的情况下直接加载和执行模块。同时， @jsenv/import-map 也允许我们在项目中管理版本号等各种信息，最终提高了代码的可维护性。
完整示例代码：
-- -------------------- ---- -------
-
---------- -
------------- --------------------------
---------------- -----------------------------------
--
--------- -
------------ -
-------- --------------------------
-
-
-import { someFunction } from "moduleName";
import { otherFunction } from "anotherModule";
import { myFunction } from "@src/myModule";来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb4a9b5cbfe1ea0611321