HTML中如何使用import.meta获取模块元信息

import.meta是ES模块（ESM）中由引擎注入的只读元数据对象，仅在.mjs文件或

import.meta 是什么，为什么不能在普通脚本里用

简单来说，import.meta 是 ES 模块（ESM）的“专属身份证”，由 Ja vaScript 引擎自动生成并注入。它只在 .mjs 文件或 标签里有效。这可不是什么全局变量，你在 window 或 globalThis 上根本找不到它——所以，如果在普通的 标签里试图访问，迎面而来的就是一个 ReferenceError: import.meta is not defined 错误。

哪些情况容易踩坑呢？最常见的就是忘了给脚本标签加上 type="module"。在 Node.js 环境里，如果用旧版本且没加 --experimental-modules 标志，或者配置了自定义加载器但没处理好模块上下文，同样会导致这个对象“消失”。

• 在浏览器中，必须使用 这样的形式才能激活它。
• 在 Node.js 中，需要满足以下条件之一：文件后缀是 .mjs，或者在 package.json 中明确声明了 "type": "module"。
• 像 Vite、Webpack 这类现代构建工具默认都支持，但如果你手动配置了像 target: 'es5' 这样的降级选项，这个特性可能会被意外移除。

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

import.meta.url 的实用性非常高，它返回一个完整的 URL 字符串。在 Node.js 环境下，它以 file:// 开头；在浏览器中，则是 https:// 这样的协议开头。这可以说是定位模块自身资源最可靠的方法了。比起依赖执行上下文的 document.currentScript.src，或者 CommonJS 里的 __dirname，它的优势在于：无论模块是被动态导入、在 Web Worker 中运行，还是被嵌套引用，路径信息始终准确无误。

一个典型的应用场景就是加载与模块同目录的附属资源，比如 JSON 配置文件、图片或者 Web Worker 脚本：

立即学习“前端免费学习笔记（深入）”；

const configUrl = new URL('./config.json', import.meta.url);
fetch(configUrl).then(r => r.json());

这里有个细节需要注意：import.meta.url 本身是一个只读的字符串，你不能直接把它当 path.dirname() 的参数来用。正确的做法是配合 URL 构造函数来解析路径。如果直接进行字符串操作，尤其在浏览器中使用 file:// 协议时，很容易引发错误。

• 在浏览器中，new URL('./data/', import.meta.url) 能够正确地解析相对路径。
• 在 Node.js 中，import.meta.url 的格式类似 file:///abs/path/to/file.mjs，转换时要注意保留 file: 前缀。
• 切忌对 import.meta.url 进行简单的字符串截取（比如 .replace('file://', '')），因为 URL 的协议和编码规则会因运行环境不同而变化。

import.meta.env 在前端构建中的特殊行为

需要明确的是，import.meta.env 并非 Ja vaScript 的原生特性。它是 Vite、Webpack、Rollup 等构建工具提供的一个“语法糖”。你在源代码中能看到它，但其实际值是在构建阶段被替换（通过 define 配置）或在运行时注入的。这意味着，在一个未经构建的、纯 ESM 的 HTML 页面里，这个对象根本不存在。

举个例子，在 Vite 项目中写入 import.meta.env.PROD，构建后它会被直接替换为布尔字面量 true 或 false；而 import.meta.env.BASE_URL 则会被替换成部署的基础路径。

• 在开发模式下，import.meta.env 通常是一个空对象，除非你显式配置了环境变量定义。
• 它不能在原生 Node.js ESM 中直接使用（没有构建工具时），否则会抛出 Cannot read property 'ENV' of undefined 错误。
• 务必注意，敏感信息（如 API 密钥）不应通过 import.meta.env 注入到前端代码中，以避免安全泄露风险。

兼容性与常见陷阱

从兼容性角度看，IE 浏览器完全不支持 import.meta。现代浏览器的支持起始版本为：Chrome 64+、Firefox 60+、Safari 12.1+。但即便在支持的浏览器中，也需要确保整个模块加载链是完整的。例如，通过 加载的模块可以使用它，但通过 eval() 或 new Function() 动态生成的代码里则不行——原因同样是缺乏模块上下文。

• 在服务端渲染（SSR）场景下，Node.js 中的 import.meta.url 与浏览器环境中的表现可能不一致，处理路径逻辑时需要区分环境。
• 使用实验性特性 import.meta.resolve() 时，需要在 Node.js 20.6+ 中开启 --experimental-import-meta-resolve 标志，并且该特性尚未得到所有浏览器的支持。
• Webpack 5 默认启用了对 import.meta 的支持，但如果配置中设置了 experiments.topLevelAwait: false，可能会影响其相关行为。

最后，一个非常关键且容易被忽略的特性是：import.meta 反映的是代码的“声明位置”，而非“调用位置”。也就是说，一个工具函数无论被多少层模块引用，其内部的 import.meta.url 永远指向它自己所在的源文件路径，而不是调用它的那个文件。这一点在设计和调试时需要格外留心。