JavaScript模块是什么？如何用import和export管理代码？

JavaScript模块是ES6引入的现代化代码组织机制，通过import和export语法实现静态依赖管理、严格作用域隔离与零全局污染，不仅让代码更清晰可维护，还支持tree-shaking等构建优化；文章深入解析了命名导出、默认导出、批量重命名导出及多种导入方式，并涵盖浏览器和Node.js环境下的关键实践要点——掌握它，是你写出专业、可扩展、易协作的前端代码的第一步。

JavaScript模块是一套将代码拆分为独立、可复用单元的机制，每个模块拥有自己的作用域，不会污染全局环境。从ES6（ECMAScript 2015）开始，原生支持import和export语法，让依赖管理和代码组织更清晰、可靠。

模块的基本特征

模块文件默认处于严格模式，顶层this为undefined；变量、函数、类等不会自动挂到window上；模块之间通过显式导入导出建立联系，形成静态依赖图，支持构建工具做摇树优化（tree-shaking）。

用export暴露功能

一个模块可通过export向外提供变量、函数、类或默认导出项：

• 命名导出（Named Export）：可多次使用，导出时需带名字，导入时名字必须一致（或用别名）
  — 示例：export const PI = 3.14;、export function add(a, b) { return a + b; }
• 默认导出（Default Export）：每个模块最多一个，导入时可自定义名称，更灵活
  — 示例：export default class Calculator { ... } 或 export default function() { ... }
• 批量导出与重命名：export { foo as bar, baz }; 可在导出时改名；export * from './math.js'; 可转发其他模块的命名导出（不包括默认）

用import引入依赖

import语句必须位于模块顶层（不能在条件或函数内），且路径必须是字符串字面量（不能拼接）：

• 导入命名导出：import { PI, add } from './utils.js';；若名字冲突可用别名：import { add as sum } from './utils.js';
• 导入默认导出：import Calculator from './calculator.js';（注意无大括号）
• 同时导入默认和命名：import Calculator, { PI, add } from './utils.js';
• 只执行模块（不取值）：import './polyfill.js';，适用于仅需副作用（如注册全局方法、修改原型）的场景

实际使用注意事项

浏览器中启用模块需在