JavaScript Academy · 课时

ESM 基础——导入与导出、默认与命名

学习 ESM 导入与导出的基础：什么是模块、命名导出与默认导出的区别、命名空间导入，以及与 CommonJS 的简单对比

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

什么是模块？

目标：有把握地阅读模块语法。

了解模块是什么
了解命名导出与默认导出的区别
使用 import * 作为命名空间
快速了解 CJS 的区别

模块 = 文件 + 局部作用域

模块就是一个文件。其中的变量默认为局部变量，除非您使用 export 将其导出。

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

命名导出——概念

命名导出在导入时使用大括号：import { name }。您可以从一个文件中导出多个项目。

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

默认导出——概念

默认导出在导入时不使用大括号：import name from "path"。

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

命名空间导入

import * as ns 会将命名导出汇集到一个对象中（例如 math.sum）。

// 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 与 ESM 对比及解析说明

CJS 与 ESM（入门概览）：

ESM：使用导入/导出语法（静态）。示例：import { x } from "./m.js"。
CJS：使用 require/module.exports（动态）。示例：const x = require("./m.js")。
在 ESM 中，请在浏览器和许多 Node 环境中使用明确的文件扩展名（例如 ./file.js）。

命名导入与默认导入测验

快速检查：命名导入语法。

回顾

回顾：模块就是一个文件。使用大括号进行命名导出，使用不带大括号的默认导出，并使用 import * 导入命名空间。CJS 使用 require，ESM 使用 import。

常见问题解答

「ESM 基础——导入与导出、默认与命名」课时是免费的吗？

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

「ESM 基础——导入与导出、默认与命名」这节课中我会学到什么？

学习 ESM 导入与导出的基础：什么是模块、命名导出与默认导出的区别、命名空间导入，以及与 CommonJS 的简单对比你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

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

「ESM 基础——导入与导出、默认与命名」课时需要多长时间？

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

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

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

此课程中的所有课时

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

← 返回 JavaScript Academy