Nodeとブラウザのバンドラーにおけるモジュール解決

全体像

相対インポートとベアインポート

// Relative path imports start with ./ or ../
// Bare specifiers refer to packages installed (e.g., "lodash")
const examples = [
  "import { sum } from \\"./math.js\\";   // relative, file nearby",
  "import leftPad from \\"left-pad\\";   // bare, from node_modules",
  "import thing from \\"../lib/thing.js\\"; // parent folder"
];

console.log("specifiers:");
for (const line of examples) console.log(line);

拡張子の重要性

// Include file extensions for ESM (safe beginner habit)
const extTips = [
  "Good (ESM): import util from \\"./util.js\\"",
  "Also seen: .mjs for ESM files, .cjs for CJS files",
  "Avoid: import \\"./util\\" (may fail in Node/browsers)"
];

console.log("extensions:");
for (const t of extTips) console.log(t);

フォルダーとindex.js

// If you import a folder, many setups look for index.js inside it
const folderExample = [
  "my-lib/",
  "  index.js",
  "  helpers/",
  "    index.js"
];

for (const l of folderExample) console.log(l);

// Typical imports
const dirImports = [
  "import main from \\"./my-lib/index.js\\";",
  "import alsoMain from \\"./my-lib/\\";        // some setups resolve to index.js",
  "import helper from \\"./my-lib/helpers/index.js\\";"
];

console.log("imports:");
for (const l of dirImports) console.log(l);

パッケージのエントリーポイント

// Installed packages declare entry points in package.json
const pkgJson = [
  "{",
  "  \\"name\\": \\"tiny-lib\\",",
  "  \\"main\\": \\"dist/cjs/index.cjs\\",",
  "  \\"exports\\": {",
  "    \\".\\": { \\"import\\": \\"./dist/esm/index.js\\", \\"require\\": \\"./dist/cjs/index.cjs\\" }",
  "  }",
  "}"
];

console.log("package.json entry (example):");
for (const l of pkgJson) console.log(l);

// Importing a bare specifier will use these fields
console.log("import tiny-lib     -> resolves to ESM or CJS entry depending on environment");

ヒントと注意点

解決の基本クイズ

まとめ