JavaScript 模块化是 ES6 起原生支持的代码组织范式，通过 import/export 实现作用域隔离与显式依赖，形成可静态分析的模块树，并支持 tree-shaking 与按需加载。
JavaScript 模块化是一种将代码按功能或职责拆分成独立、可复用单元的组织方式。每个模块拥有自己的作用域，不污染全局环境，通过明确的导入（import）和导出（export）机制与其他模块通信。它不是附加 工具 或库，而是语言原生支持的代码结构范式——从 ES6 起正式成为标准。
模块化让代码有清晰的边界和职责
传统脚本常把所有逻辑堆在同一个文件或全局作用域里，变量函数随意暴露，容易互相干扰。模块化强制每个文件成为一个“封闭小房间”：
- 内部声明的变量、函数、类默认私有，外部不可见
- 必须用 export 显式声明哪些内容可以被别人使用
- 要用某个功能，必须用 import 主动引入，不能靠猜测或顺序依赖
- 比如一个 utils.js 文件只负责格式化日期、校验邮箱，api.js 只管发请求，彼此解耦
模块之间靠依赖声明建立关系
模块不是孤立存在的，它们组成一棵“模块树”。入口文件（如 main.js）导入其他模块，那些模块又可能导入更多模块，形成层级依赖：
- 静态分析友好：import 语句必须出现在顶层，构建工具（如 Vite、Webpack）能提前扫描整个依赖图
- 避免隐式耦合：不再靠 script 标签加载顺序决定执行逻辑，谁依赖谁一目了然
- 支持按需加载：配合 dynamic import()，可延迟加载非首屏模块，提升页面启动速度
不同环境对应不同的模块语法习惯
虽然 ES Modules（ESM）已是主流标准，但实际开发中仍需注意运行环境差异：
立即学习“Java 免费学习笔记（深入）”；
- 浏览器 中：直接支持 .mjs 或 .js（配合
），使用 export / import - Node.js 中：v14.3+ 默认启用 ESM，需在 package.json 中设置
"type": "module"；否则仍沿用 CommonJS 的 require / module.exports - 老项目或兼容需求：可能遇到 UMD、AMD 等过渡方案，但新项目无需主动选择
模块化不只是拆文件，更是设计思维
真正有效的模块化，不只是物理上分文件，更体现在逻辑组织上：
- 一个模块最好只做一件事，比如 authService.js 处理登录登出，不掺杂 UI 渲染
- 导出接口应稳定、语义清晰，避免频繁变更导致下游模块反复适配
- 可搭配命名空间式导出（named export）或单例式导出（default export），按场景选择：多个工具函数用命名导出，主组件 / 类常用默认导出
- 构建时支持 tree-shaking：未被 import 的导出内容会被自动剔除，减小最终包体积
