关于es-modules:使用-ES-Module-的正确姿势
后面咱们在深刻了解 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 中查问依赖的包,找到对应的模块,最终将模块代码合并到最终的构建输入文件中。 ...