import.meta 是 esm 中只读元数据对象,核心属性 import.meta.url 返回模块绝对 url,用于路径解析与环境判断;node.js 20.6+ 支持 dirname/filename,vite 等支持 env 等扩展;仅限 esm,不可枚举。

import.meta 是 JavaScript 模块(ESM)中一个只读对象,用于获取当前模块的上下文元数据,最常见的是 import.meta.url,它返回模块文件的完整 URL(如 file:///path/to/module.js 或 https://site.com/script.js),可用于动态加载资源、确定运行环境或构建时无法预知的路径处理。
import.meta.url:获取模块绝对路径
这是目前浏览器和 Node.js 中唯一广泛支持的 import.meta 属性。它返回一个标准 URL 字符串,比 __dirname 或 __filename 更规范、跨平台:
- 在浏览器中返回模块脚本的完整 HTTP/HTTPS/file URL;
- 在 Node.js 中(需启用 ESM,即
.mjs或type: "module")返回file://协议 URL,例如file:///home/user/app/utils.js; - 可配合
new URL('./assets/data.json', import.meta.url)安全解析相对路径,避免依赖当前工作目录。
其他属性:环境相关,非标准但部分运行时支持
import.meta 本身是可扩展的,不同环境可添加自定义字段(但不跨平台):
- Node.js 支持
import.meta.dirname和import.meta.filename(v20.6+ 稳定),分别提供目录路径和文件路径(字符串,不含file://); - Vite、Webpack 等打包工具可能注入
import.meta.env(如import.meta.env.PROD)或import.meta.vite,用于访问构建环境变量; - 这些扩展属性不能直接在原生 ESM 中假设存在,使用前建议检测:
if ('env' in import.meta)。
常见用途与注意事项
利用 import.meta 可解决传统 CommonJS 中难以处理的问题:
-
动态加载同目录资源:用
new URL('./config.json', import.meta.url)构造 URL 后 fetch; -
判断是否在浏览器中运行:检查
import.meta.url.startsWith('file://')(Node.js)或import.meta.url.startsWith('http')(浏览器); -
不支持在非模块脚本中使用:仅限
type="module"的 script 或 ESM 文件,CommonJS 或内联 script 会报错; -
不可枚举、不可写、不可配置:无法遍历或修改
import.meta本身。
兼容性与替代方案
现代浏览器(Chrome 64+、Firefox 60+、Safari 12.1+)和 Node.js(v12.0.0+ ESM)均支持 import.meta.url。若需兼容旧环境:
- 在 Node.js CommonJS 中仍可用
__dirname/__filename; - 浏览器中若无 ESM 支持,需借助打包器(如 Vite/Webpack)做转换或 polyfill(但
import.meta本质无法真正 polyfill,只能模拟部分行为); - 服务端渲染(SSR)场景注意:同一份代码在客户端和服务器执行时,
import.meta.url指向不同协议,逻辑需区分。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











