JavaScript Academy · 课时

Node 与浏览器打包工具中的模块解析

Q: 「Node 与浏览器打包工具中的模块解析」这节课中我会学到什么？

了解导入如何解析：相对说明符与裸说明符、文件扩展名（.js/.mjs/.cjs）、索引文件和简单的软件包入口 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

了解导入如何解析：相对说明符与裸说明符、文件扩展名（.js/.mjs/.cjs）、索引文件和简单的软件包入口

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

整体概览

目标：了解导入路径如何解析。

相对说明符与裸说明符
使用明确的 .js（安全的默认选择）
文件夹中的 index.js
软件包入口点（main/exports，入门概览）

相对导入与裸导入

相对导入以 ./ 或 ../ 开头。裸导入指向已安装的软件包。

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

扩展名很重要

在 ESM 中添加 .js 扩展名，以避免解析错误。您还可能看到 .mjs 或 .cjs。

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

文件夹通常会公开 index.js。明确写出路径（.../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);

软件包入口点

软件包通过 main/exports 公开入口点。裸导入会为 ESM 或 CJS 选择正确的文件。

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

提示与常见陷阱

提示：

对于本地文件，优先使用带 .js 的相对路径。
仅对已安装的软件包使用裸导入。
明确写出 index.js，避免产生歧义。
在浏览器中，导入必须是有效的 URL（通常包含扩展名）。

解析基础测验

快速检查：安全的本地导入路径。

回顾

回顾：本地文件 → ./file.js。软件包 → 裸名称。文件夹通常解析为 index.js。了解这些规则，可以让导入保持简单且可预测。

常见问题解答

「Node 与浏览器打包工具中的模块解析」课时是免费的吗？

是的 — 「Node 与浏览器打包工具中的模块解析」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 3 节课。

「Node 与浏览器打包工具中的模块解析」这节课中我会学到什么？

了解导入如何解析：相对说明符与裸说明符、文件扩展名（.js/.mjs/.cjs）、索引文件和简单的软件包入口你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

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

「Node 与浏览器打包工具中的模块解析」课时需要多长时间？

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

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

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

此课程中的所有课时

ESM 基础——导入与导出、默认与命名
CommonJS 基础——require/module.exports 与 exports
Node 与浏览器打包工具中的模块解析

← 返回 JavaScript Academy