JavaScript模块路径解析：相对与绝对路径详解

JavaScript模块路径解析看似简单，实则暗藏玄机——相对路径（./或../开头）、绝对路径（/开头，仅浏览器有效）和包名路径（无前缀，Node.js特有）三者规则迥异，且严格依赖运行环境（浏览器 vs Node.js）和模块系统（ESM vs CommonJS）。理解这些差异不仅能避免“模块找不到”的常见报错，还能帮你规避跨环境兼容陷阱、合理设计项目结构，并善用import.meta.url等现代API实现更健壮的路径处理。

在 JavaScript 模块系统中（尤其是 ES Module 和 Node.js 的 CommonJS/ESM），路径解析规则直接影响模块能否正确加载。相对路径和绝对路径不是简单“带不带斜杠”的问题，而是由解析机制决定的——关键看 路径是否以 /、./ 或 ../ 开头，以及运行环境（浏览器 vs Node.js）。

相对路径：以 ./ 或 ../ 开头

这类路径基于 当前模块文件的位置 进行解析。

• ./utils.js：表示与当前文件同目录下的 utils.js
• ../config/index.js：向上一级目录，再进入 config 文件夹找 index.js
• ./api/user：会尝试匹配 user.js、user/index.js 或 user/package.json 中的 main/exports

注意：Node.js ESM 中不允许省略扩展名（如 ./utils 会报错），必须写全 ./utils.js 或通过 package.json#exports 显式声明入口。

绝对路径：以 / 开头（仅限浏览器）

在浏览器中，以 / 开头的路径是相对于 站点根目录（即 URL 的 origin + path root）解析的。

• /scripts/main.js：从 https://example.com/scripts/main.js 加载
• 它和文件系统无关，不依赖 HTML 页面所在位置，只看当前网页 URL 的根路径
• Node.js 的 ESM 不支持这种写法（会报 ERR_MODULE_RESOLUTION_EXCEPTION）

包名路径（Node.js 特有）：无 ./、../、/ 开头

像 lodash、react 这类路径既不是相对也不是绝对，而是 包名解析：

• Node.js 会从当前文件向上逐级查找 node_modules，直到找到对应包
• 支持 package.json#exports 和 package.json#imports 控制可导入子路径
• 浏览器原生 ESM 不支持此机制（需打包工具或 import maps 模拟）

常见陷阱与建议

• 避免混用：不要在同一个项目里对同一类模块同时用 ./utils 和 utils，易引发路径歧义
• 跨环境兼容：浏览器中想模拟“项目根路径”，可用 import.meta.url 构造绝对 URL，例如：
  new URL('./assets/logo.png', import.meta.url)
• Node.js 中想统一使用项目根路径，推荐用 import { dirname } from 'path' + import.meta.url 计算 __dirname 等效值
• TypeScript 用户注意：baseUrl 和 paths 是编译期别名，不影响运行时解析，仍需按实际路径书写

以上就是《JavaScript模块路径解析：相对与绝对路径详解》的详细内容，更多关于的资料请关注golang学习网公众号！