JavaScript模块化开发：ES6模块导入导出详解

本文深入解析了JavaScript模块化开发的核心——ES6的import/export语法，系统讲解了命名导出、默认导出及混合导入等实用方式，并强调其静态性、单例性与实时绑定等关键特性；通过与CommonJS的对比，清晰揭示了ES6模块在编译时检查、树摇优化、循环依赖处理及响应式绑定上的显著优势，帮助开发者真正理解现代前端模块化的工作原理与最佳实践。

JavaScript 的模块化开发主要通过 ES6 的 import 和 export 语法实现，它原生支持静态分析、编译时检查和树摇优化，是现代前端开发的标准方式。

ES6 模块的基本导出方式

一个模块文件（如 math.js）可以使用多种方式导出变量、函数或类：

• 命名导出（named export）：可导出多个，必须用原名导入，支持重命名

export const PI = 3.14159;
export function add(a, b) { return a + b; }
export class Calculator { /* ... */ }

• 默认导出（default export）：每个模块最多一个，导入时可自定义名称，更灵活

export default function debounce(fn, delay) { /* ... */ }

ES6 模块的对应导入方式

导入需与导出方式匹配，且路径必须是字符串字面量（不能拼接）：

• 导入命名导出：用大括号 {}，可重命名（as）

import { PI, add } from './math.js';
import { add as sum } from './math.js'; // 重命名

• 导入默认导出：不用大括号，可任意命名

import debounce from './utils.js';
import myDebounce from './utils.js'; // 名字随意

• 混合导入：同时引入默认和命名导出

import debounce, { PI, add } from './math.js'; // 默认在前，命名在后

• 整体导入（namespace import）：把所有命名导出挂载为对象属性

import * as math from './math.js';
console.log(math.PI, math.add(2, 3));

常见注意事项和限制

ES6 模块是静态的、顶层的、单例的，这些特性决定了它的行为边界：

• 导入/导出语句只能出现在模块顶层，不能在条件、函数或循环中
• 模块路径必须是相对（./ 或 ../）或绝对（以 / 开头）URL，不支持动态字符串
• 模块脚本需通过