一、什么是裸模块

裸模块是指直接通过import XXX from moduleName这样的语法形式引入对应的js模块，我们在前端项目中直接通过这种裸引入的方式访问第三方库需要借助像Webpack、Vite等这样的前端构建工具，它们会在打包构建的时候从node_modules中找到对应的模块名所在的path并替换掉我们之前编写的moduleName，从而达到裸引入的方式。

// 我们编写的代码
import { createApp } from "vue";

// 构建后的代码
import { createApp } from "/node_modules/vue/dist/vue"

二、import-maps简介

在Chrome89+中增加了一个新的ES Module引入方式，我们可以通过给定一个script标签，并且将script的type属性值设置为importmap，接着在创建好的脚本中编写我们需要的模块相关的路径映射，从而可以实现在其他脚本中直接裸引入模块;importmaps 使用 JSON格式定义浏览器中的全局模块：

在type为importmap的脚本中编写非JSON格式的代码是错误的

<script type="importmap">
   {
      "imports": {
        "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js",
      }
    }
</script>

目前该特性仅在内核为blink的浏览器中可以使用。查看兼容性

Chrome	Edge	opera
89+	89+	76+

三、使用import-maps实现原生裸模块引入

<script type="importmap">
   {
      "imports": {
        "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js",
        "mylib" : "/lib/mylib.js"
      }
    }
</script>

<script>
   // 这里会自动加载 https://unpkg.com/vue@3/dist/vue.esm-browser.js
   import { createApp, h } from 'vue';
   
   // 这里会自动加载/lib/mylib.js
   import mylib from "mylib";
   
   createApp({ render: () => h("h1", "Hello Vue3!") }).mount("#app");
</script>

总结

importmaps的出现是前端模块化发展的一个重要里程碑。虽然这个特性目前仍需要在项目中考虑兼容性的问题。但展望未来，当浏览器内置模块加载器逐步完善起来，对于非常轻量级的web项目而言像webpack、vite这样的前端构建工具不再是唯一的选择。