ESMの基礎 — import/export、defaultとnamed

モジュールとは

モジュール = ファイル + ローカルスコープ

// A module is just a file with its own scope
// Here we simulate "module scope" by keeping variables local.
(function () {
  const secret = 42;                          // local to this file/scope
  function reveal() { return "value:" + secret; }
  console.log("module-like scope:", typeof secret === "number", reveal());
})();

名前付きエクスポート — 考え方

// Named exports: you export multiple items by name
const exampleNamedExport = [
  "export const PI = 3.14;",
  "export function sum(a, b) { return a + b; }",
  "import { PI, sum } from \\"./math.js\\";"
];

console.log("named export example:");
for (const line of exampleNamedExport) console.log(line);

// Tiny emulation: pretend we imported two named symbols
const PI = 3.14;
function sum(a, b) { return a + b; }
console.log("emulated use:", PI, sum(2, 3));

デフォルトエクスポート — 考え方

// Default export: each module can have at most one default
const exampleDefault = [
  "export default function greet(name) { return \\"Hi \\" + name; }",
  "import greet from \\"./greet.js\\"; // no braces"
];

console.log("default export example:");
for (const line of exampleDefault) console.log(line);

// Emulation of default import usage
function greet(name) { return "Hi " + name; }
console.log("emulated default:", greet("Ayla"));

名前空間インポート

// Namespace import collects all named exports under one object
const exampleNamespace = [
  "import * as math from \\"./math.js\\";",
  "console.log(math.PI, math.sum(1, 2));"
];

console.log("namespace import example:");
for (const line of exampleNamespace) console.log(line);

// Emulate a namespace object
const math = { PI: 3.14, sum: function (a, b) { return a + b; } };
console.log("namespace use:", math.PI, math.sum(4, 5));

CJSとの違いと解決に関するメモ

名前付きインポートとデフォルトインポートのクイズ

まとめ