什么是JavaScript模块以及如何导出导入？

JavaScript模块是独立可复用的代码单元，通过export/import实现封装与通信；ES6模块为现代标准，支持命名导出、默认导出及动态导入；CommonJS仅适用于旧版Node.js环境。

JavaScript模块是一段独立的、可复用的代码单元，它封装变量、函数或类，并能明确声明哪些内容对外可用（导出）、哪些仅内部使用（私有）。模块之间通过导入导出机制通信，避免全局污染，提升代码组织性和维护性。

模块的基本形式：ES6 模块（推荐）

现代 JavaScript 使用 export 和 import 语法，需在 HTML 中以 type="module" 加载，或在打包工具（如 Vite、Webpack）中默认启用。

• 导出方式：
  • 命名导出（可多个）：export const name = "Alice"; export function greet() { ... }
  • 默认导出（每个模块最多一个）：export default function() { ... } 或 export default class User { ... }
• 导入方式：
  • 导入命名导出：import { name, greet } from './utils.js';
  • 导入默认导出：import myFunc from './main.js';（无需大括号）
  • 混合导入：import myDefault, { name, greet } from './module.js';
  • 全部导入（不常用）：import * as utils from './utils.js'; → 用 utils.name 访问

CommonJS 模块（Node.js 早期常用）

在 Node.js 环境（尤其是未启用 ES 模块时）使用 require() 和 module.exports。语法不同，不能直接在浏览器原生脚本中运行（除非打包）。

• 导出：module.exports = { name: "Bob", sayHi() { ... } }; 或 exports.sayHi = function() { ... };
• 导入：const utils = require('./utils.js');（返回整个 module.exports 对象）
• 注意：exports 是 module.exports 的引用，直接赋值 exports = {...} 会断开连接，应始终用 module.exports 赋值

模块路径与文件后缀

导入语句中的路径必须明确：

标签： javascript es6 java html js node.js node vite 浏览器 工具 懒加载 ai