javascript怎样进行模块化开发_ES6模块如何导入导出

JavaScript模块化以ES6 import/export为核心，支持命名导出、默认导出及混合导入；具静态性、单例性、实时绑定等特性，与CommonJS的值拷贝和动态加载有本质区别。

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

ES6 模块的基本导出方式

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

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

math.js

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

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

utils.js

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

ES6 模块的对应导入方式

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

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

main.js

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，不支持动态字符串
• 模块脚本需通过 加载，否则会报错
• 浏览器中模块默认启用严格模式，且有独立作用域（不污染全局）
• 重复导入同一模块不会重复执行，模块代码只执行一次（单例）

与 CommonJS 的关键区别

ES6 模块不是对象，而是绑定关系（live binding）：

• 导出的是绑定，不是值的拷贝。如果导出的变量后续被修改，导入方能感知到更新
• CommonJS（module.exports / require）导出的是值的快照，修改原始变量不影响已导入值
• ES6 模块支持循环依赖，但需注意初始化时机；CommonJS 在循环依赖中返回已执行部分的对象