使用 ES Module 的正确姿势

Python微信订餐小程序课程视频

https://edu.csdn.net/course/detail/36074

Python实战量化交易理财系统

https://edu.csdn.net/course/detail/35475
前面我们在深入理解 ES Module 中详细介绍过 ES Module 的工作原理。目前，ES Module 已经在逐步得到各大浏览器厂商以及 NodeJS 的原生支持。像 vite 等新一代的构建工具已经逐步使用 ES Module 并有计划的运用到生产环境中。因此，了解如何在浏览器以及 NodeJS 中使用 ES Module 是必要的。

在浏览器中使用

支持 ES Module 的浏览器通过 script 标签上的 type 字段来识别 ES Module，即 type=module 就是 ES Module。

<script type="module">
 import { foo } from 'bar';
 export default foo;
script>
<script type="module" src="/path/to/script">script>

浏览器在遇到 type=module 的 script 标签时，会将其作为 ES Module 来解析，如果有依赖模块时，会递归的加载依赖模块。模块加载原理与 Webpack 是类似的。

现在问题来了，浏览器如何加载模块呢？

有三种主要方式：

• 绝对路径，比如 http://domain.com/path/to/module
• 相对路径，比如：./path/to/module
• 包名（裸说明符，bare specifier），比如： lodash-es

绝对路径和相对路径都很好理解，与普通的 script 用法是一样的。直接使用包名浏览器如何处理呢？

我们在使用 Webpack 等打包器的时候，项目依赖的模块是安装在 node_modules 目录下的。在打包器执行构建的时候，会从 node_modules 中查询依赖的包，找到对应的模块，最终将模块代码合并到最终的构建输出文件中。

在浏览器中，其实是一样的，只不过我们要告诉浏览器去哪里找这些包。目前有一个规范（草案阶段）给出了解决方案，那就是 import-map。我们简单说