0Pricing
JavaScript Academy · 课时

ESM 加载器细节、路径与 URL 的差异

安全解析 URL，理解相对说明符与裸说明符，并了解文件 URL 与网页 URL 的区别。配合小型可运行演示

ESM 加载器细节、路径与 URL 的差异 是 CoddyKit 上的免费 JavaScript Academy 课时。 这是第 2 节课，共 3 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 3 节课。

全局概览

目标：跨环境安全地解析路径。

  • 使用URL构造函数解析相对路径
  • 了解相对说明符和裸说明符的区别
  • 了解file:与https:的差异
  • 避免使用脆弱的字符串拼接来处理路径
ESM 加载器细节、路径与 URL 的差异 — 插图 1

相对于 base 解析

new URL(relative, base)可以正确处理路径片段和斜杠。

// Use URL to resolve "./" against a base
const base = "https://site.com/app/screens/";
const img = new URL("./images/icon.png", base);
console.log("resolved:", img.href);
ESM 加载器细节、路径与 URL 的差异 — 插图 2

使用 .. 规范化

该构造函数会正确移除../，因此不需要手动拼接字符串。

// URL resolves "../" segments
const u = new URL("../assets/a.txt", "https://x.com/app/views/page/");
console.log("normalized:", u.href);
ESM 加载器细节、路径与 URL 的差异 — 插图 3

file: URL 示例

file:URL 在类似 Node 的环境中指向本地文件；浏览器未经用户操作无法直接读取它们。

// You can also work with file: URLs (no actual file I/O here)
const baseFile = "file:///home/user/project/src/";
const file = new URL("./data/sample.txt", baseFile);
console.log("file url:", file.href);
ESM 加载器细节、路径与 URL 的差异 — 插图 4

说明符种类

ESM 加载器对裸说明符的处理方式不同于相对说明符或绝对 URL。了解其种类会很有帮助。

// Tiny helper: categorize a module specifier
function specKind(s) {
  if (typeof s !== "string") return "unknown";
  if (s.startsWith("./") || s.startsWith("../") || s.startsWith("/")) return "relative-or-absolute";
  if (s.startsWith("http://") || s.startsWith("https://") || s.startsWith("file://")) return "url";
  return "bare"; // like "lodash" or "fs"
}

console.log("kind ./util.js:", specKind("./util.js"));
console.log("kind lodash   :", specKind("lodash"));
console.log("kind https:// :", specKind("https://cdn.site/x.js"));
ESM 加载器细节、路径与 URL 的差异 — 插图 5

适合初学者的习惯

提示：

  • 优先使用URL(relative, base)，不要进行字符串拼接。
  • 理解裸说明符与相对说明符的区别。
  • 不要假设浏览器中存在文件。
  • 让路径保持简短易读，方便初学者理解。
ESM 加载器细节、路径与 URL 的差异 — 插图 6

URL 解析基础测验

快速检查：安全地构建 URL。

ESM 加载器细节、路径与 URL 的差异 — 插图 7

总结

总结：使用URL构造函数解析相对路径（./、../），识别裸说明符与相对说明符的区别，并记住file:URL 不同于网页 URL。

ESM 加载器细节、路径与 URL 的差异 — 插图 8

常见问题解答

「ESM 加载器细节、路径与 URL 的差异」课时是免费的吗？

是的 — 「ESM 加载器细节、路径与 URL 的差异」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 3 节课。

「ESM 加载器细节、路径与 URL 的差异」这节课中我会学到什么？

安全解析 URL，理解相对说明符与裸说明符，并了解文件 URL 与网页 URL 的区别。配合小型可运行演示 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 3 节。

「ESM 加载器细节、路径与 URL 的差异」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 全局对象、fetch 可用性与文件/网络接口
  2. ESM 加载器细节、路径与 URL 的差异
  3. 环境变量与配置模式
← 返回 JavaScript Academy