如何通过import.meta在HTML中获取模块的元数据信息？

本文共计1054个文字，预计阅读时间需要5分钟。

ES 模块（ESM）环境下的 `import.meta` 是一个仅读对象，提供了关于当前模块的元数据。以下是其主要内容：

常见误操作：把 type="module" 忘了写，或者用 node --loader 运行但没加 --experimental-modules（旧 Node 版本），都会导致该对象不可用。

• 浏览器中必须用 <script type="module" src="app.js"></script> 才能启用
• Node.js 中需满足：文件后缀为 .mjs，或 package.json 中声明 "type": "module"
• Vite / Webpack 等构建工具默认支持，但若手动配置了 target: 'es5' 可能移除该特性

import.meta.url 的实际用途：获取当前模块路径

import.meta.url 返回一个 file://（Node）或 https://（浏览器）开头的完整 URL 字符串，是定位模块资源最可靠的方式。相比 document.currentScript.src 或 __dirname，它不依赖执行上下文，且在动态导入、Worker、嵌套模块中依然准确。