模块：import 与 export
使用具名导出和默认导出将代码拆分为 ES 模块，按需导入，并了解模块打包器如何解析依赖图。
模块：import 与 export 是 CoddyKit 上的免费 Frontend Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。
为什么使用模块
在模块出现之前，所有 JavaScript 都运行在全局作用域中。变量会相互冲突。代码顺序很重要。文件必须按顺序加载。ES 模块为每个文件提供独立的作用域、明确的导入以及可进行树摇的导出。
命名导出
请使用 export 关键字导出特定值。一个文件可以包含多个命名导出。使用者可以准确导入所需内容。
// utils.js
export const PI = 3.14159;
export function add(a, b) {
return a + b;
}
export class Vector {
constructor(x, y) { this.x = x; this.y = y; }
}命名导入
请使用花括号导入命名导出。您可以在一条语句中从同一个模块导入多个导出。
import { PI, add, Vector } from './utils.js';
console.log(PI); // 3.14159
console.log(add(2, 3)); // 5默认导出
每个模块可以有一个默认导出，通常代表该模块提供的主要内容。导入时无需使用花括号，并且可以为它指定任意名称。
// Button.js
export default function Button({ label }) {
return `<button>${label}</button>`;
}
// Importing:
import Button from './Button.js';
import MyButton from './Button.js'; // any name works重新导出
模块可以从其他模块重新导出内容，从而创建一个汇总文件——一个重新导出多个内容的统一入口。
// components/index.js
export { default as Button } from './Button.js';
export { default as Input } from './Input.js';
export { default as Modal } from './Modal.js';
// Consumer:
import { Button, Input, Modal } from './components';命名空间导入
请使用 import * as name 将模块中的所有内容导入一个命名空间对象。当您需要许多导出内容，或希望明确标示内容来源时，这种方式非常有用。
import * as utils from './utils.js';
console.log(utils.PI); // 3.14159
console.log(utils.add(1, 2)); // 3仅导入副作用
某些模块的导入目的只是执行其副作用（例如填充程序和注册事件处理程序）。请在不创建绑定的情况下导入它们。
import './polyfills.js'; // runs the code, imports nothing动态 import()——代码拆分
动态 import() 函数会返回一个 Promise。请使用它延迟加载模块，即只在需要时加载。打包工具会自动为动态导入的模块创建独立的代码块。
// Load a heavy module only when the button is clicked:
button.addEventListener('click', async () => {
const { processFile } = await import('./fileProcessor.js');
processFile(data);
});import.meta
import.meta 是模块内部可用的特殊对象。import.meta.url 是模块的 URL。Vite 使用 import.meta.env 表示环境变量。
// Vite environment variables:
console.log(import.meta.env.VITE_API_URL);
console.log(import.meta.env.MODE); // 'development' or 'production'模块解析
Vite 等打包工具会从文件系统（例如 './utils' 这样的相对路径）、node_modules（'lodash'）或路径别名（在 vite.config.js 中配置的 '@/components'）解析模块。
CommonJS 与 ES 模块
Node.js 最初使用 CommonJS（require / module.exports）。浏览器使用 ES 模块（import / export）。现代 Node.js 也支持 ES 模块，只需在 package.json 中设置 type: "module"。
// CommonJS (Node.js, older tooling):
const fs = require('fs');
module.exports = { myFunc };
// ES Modules (modern):
import fs from 'fs';
export { myFunc };快速检查
与静态导入相比，使用 dynamic import() 的主要优势是什么？
回顾：ES 模块
命名导出和命名导入用于处理多个值。默认导出和默认导入用于处理主要内容。重新导出可以创建汇总文件。动态 import() 支持延迟加载和代码拆分。import.meta 提供模块元数据。打包工具会解析别名、node_modules 和相对路径。
用 AI 导师学习 HTML — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 41
- 课程
- 163
常见问题解答
「模块：import 与 export」课时是免费的吗？
是的 — 「模块：import 与 export」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。
「模块：import 与 export」这节课中我会学到什么？
使用具名导出和默认导出将代码拆分为 ES 模块，按需导入，并了解模块打包器如何解析依赖图。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Frontend Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「模块：import 与 export」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Frontend Academy 课中编写并运行代码吗？
能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 数组方法：map、filter、reduce、find
- 对象解构与展开运算符
- 模板字面量与可选链
- 模块：import 与 export