ข้อแปลกของตัวโหลด ESM และความแตกต่างของ path/URL

ภาพรวม

เส้นทางสัมพัทธ์เทียบกับฐาน

// 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);

ปรับรูปแบบด้วย ..

// URL resolves "../" segments
const u = new URL("../assets/a.txt", "https://x.com/app/views/page/");
console.log("normalized:", u.href);

ทำความรู้จัก URL แบบ file:

// 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);

ชนิดของตัวระบุ

// 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"));

แนวปฏิบัติที่เหมาะกับผู้เริ่มต้น

แบบทดสอบพื้นฐานการแก้ไข URL

ทบทวน