前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
首页程序员面试题库import.meta.resolve
JavaScript模块与语言机制

import.meta.resolve 是干什么的?它和 import 有什么关系?

import.meta.resolve(specifier) 走的是和 import 同一套解析规则,把说明符变成一个完整 URL 字符串返回,但到此为止,不发请求、不执行模块。可以理解成「只做 import 的第一步」。

前端进阶之旅 · 一题精讲更新于 2026.09.29
JavaScript#模块与语言机制
先看核心答案读代码示例
理解线索

`import` 的三步和 `resolve` 管的那一步

  1. 解析说明符变成 URL,import.meta.resolve 只做这一步
  2. 加载按 URL 请求文件、解析依赖,import() 才会做
  3. 执行运行模块顶层代码,结果进入模块缓存

new URL("./x.js", import.meta.url) 只能处理相对路径,遇到 vue 这种裸说明符就无能为力,也不认 import map。需要「和 import 解析结果完全一致」时只能用 import.meta.resolve。

核心回答

先记住这个答案

import.meta.resolve() 接收一个模块说明符,按 import 语句相同的规则把它解析成完整的 URL 字符串返回。它只做解析,不下载、不执行模块。和 import 的关系就是:import 先解析、再加载、再执行,import.meta.resolve 只做第一步。所以它能看到 import map、package.json 的 exports 这些规则的最终结果。

  • 只解析模块 URL,不加载模块
  • 同步返回字符串,不是 Promise
  • 裸说明符也可按当前环境解析
  • 相对路径不检查文件是否存在,找不到的包会抛错

在 Node.js 里看看它返回什么

假设项目里装了一个包 pkg,它的 package.json 用 exports 把入口指向了 dist/index.mjs。

解析相对路径和包名JavaScript
// /app/main.mjs
console.log(import.meta.resolve('./utils.mjs'))
// file:///app/utils.mjs

console.log(import.meta.resolve('pkg'))
// file:///app/node_modules/pkg/dist/index.mjs(按 exports 解析)

console.log(import.meta.resolve('./not-exist.mjs'))
// file:///app/not-exist.mjs,相对路径不检查文件是否存在

import.meta.resolve('no-such-pkg')
// 抛出 ERR_MODULE_NOT_FOUND,找不到包时无法算出 URL

返回的是字符串,不是 Promise。早期 Node.js 实现过异步版本,后来和浏览器统一成了同步。第二行很能说明问题:你不需要知道 pkg 的文件结构,它会按包自己声明的 exports 找到真正的入口。 相对路径那一行说明它只是在「算地址」,文件存不存在要等真正 import 时才知道。裸说明符不一样,找不到包就连地址都算不出来,所以会抛错。

什么时候需要它

平时写 import 用不到它。需要的场景是:你要的是一个模块的地址,而不是模块本身。

把地址交给别的 API
典型例子是创建 Worker:new Worker(import.meta.resolve("pkg/worker.js"), { type: "module" })。Worker 的构造函数只接受 URL,你又希望这个地址跟着依赖版本、import map 走,用它最合适。 同样的思路也适用于加载 WASM 文件、给 <link rel="modulepreload"> 生成地址、在 Service Worker 里预缓存模块。浏览器里如果页面配了 import map,import.meta.resolve("vue") 返回的就是映射后的 CDN 地址,调试映射有没有写对也很方便。
回答前,多想一步

容易答错的地方

以为它会加载模块
它不发网络请求,也不执行模块代码,调用多少次都没有副作用。想拿到模块内容要用 import()。
以为它等价于 new URL(path, import.meta.url)
对相对路径来说两者结果一样。但 new URL 只是做 URL 拼接,new URL("vue", import.meta.url) 会得到当前目录下一个叫 vue 的文件地址,完全错误。import.meta.resolve 才会按包解析、查 import map。
以为它能在 CommonJS 里用
import.meta 只存在于 ES 模块中,CommonJS 文件里写它是语法错误。CommonJS 里对应的是 require.resolve(),它返回的是文件系统路径,不是 URL,并且会检查文件是否存在。
试着用自己的话回答

面试官还会怎么问?

和 require.resolve 有什么区别?

require.resolve 走的是 CommonJS 解析规则,返回文件路径字符串,文件不存在会抛错。import.meta.resolve 走 ESM 规则,返回 file:// 开头的 URL,相对路径不检查存在性。两者对同一个包可能给出不同结果,因为 exports 里可以给 import 和 require 配置不同的入口。

解析结果怎么转成文件路径?

在 Node.js 里用 node:url 模块的 fileURLToPath(),把 file:///app/a.mjs 转成 /app/a.mjs,Windows 上还会正确处理盘符。不要自己用字符串截掉 file://,遇到中文路径和空格会被百分号编码坑到。

浏览器里能用吗?

主流浏览器都已支持,并且会遵守页面上的 import map。老环境不支持时,相对路径可以退回 new URL(path, import.meta.url) 的写法。

从一道题,走向一组知识

把知识连起来

模块与语言机制

import.meta.url 在浏览器和 Node.js 里分别拿到的是什么?

import.meta.url 是当前模块的地址,也是 import.meta.resolve 解析相对路径时的基准。

模块与语言机制

好几个文件都 import 同一个模块,它的代码会执行几次?

模块按解析后的 URL 缓存,用 import.meta.resolve 能看清两个说明符是不是同一个模块。

参考资料

  • JavaScript:模块与语言机制参考资料

示例用于理解所注明的运行环境与边界;延伸学习可结合原文中的更多案例。

本题目录
  1. 先记住这个答案
  2. 在 Node.js 里看看它返回什么
  3. 什么时候需要它
  4. 容易答错的地方
  5. 面试官还会怎么问
  6. 把知识连起来
读懂,再试着讲出来

先看核心答案,再读代码。最后展开追问,检查自己有没有遗漏边界。

试着回答追问
浏览全部面试题理解原理,也关注真实的使用场景。回到顶部 ↑