什么是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 赋值

模块路径与文件后缀

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

Vuex参考手册 中文CHM版

Vuex是一个专门为Vue.js应用设计的状态管理模型 + 库。它为应用内的所有组件提供集中式存储服务，其中的规则确保状态只能按预期方式变更。它可以与 Vue 官方开发工具扩展(devtools extension) 集成，提供高级特征，比如 零配置时空旅行般（基于时间轴）调试，以及状态快照 导出/导入。本文给大家带来Vuex参考手册，需要的朋友们可以过来看看！

3

查看详情

立即学习“Java免费学习笔记（深入）”；

• 相对路径需带前缀：./utils.js 或 ../lib/helper.js（.js 后缀在 ES 模块中通常不可省略）
• 不能省略 ./ 或 ../，否则会被当作内置模块或包名（如 import fs from 'fs'）
• Node.js 14+ 支持 "type": "module" 字段，让 .js 文件按 ES 模块解析；否则默认为 CommonJS

动态导入：按需加载模块

import() 是一个返回 Promise 的函数，用于条件加载、路由懒加载等场景：

• if (needMath) { const math = await import('./math.js'); math.add(2, 3); }
• 支持在任何位置使用（包括函数内、条件分支），不局限于顶层
• 常用于优化首屏加载，比如只在用户点击按钮后才加载图表模块

基本上就这些。ES6 的 import/export 是当前标准，CommonJS 主要在老 Node 项目或特定工具链中出现。选哪种取决于环境和构建配置，但新项目建议统一用 ES 模块写法。

以上就是什么是JavaScript模块以及如何导出导入？的详细内容，更多请关注php中文网其它相关文章！