JavaScript模块化是用export和import显式声明依赖与接口的代码组织方式，通过语言原生机制实现作用域隔离、静态可分析和tree-shaking；不能直接在全局写函数，否则导致变量覆盖、函数互相干扰、依赖关系混乱；ES Modules需注意路径带后缀、import只能在顶层、不可混用require、命名导出须严格匹配；模块目录应按功能而非技术类型组织，如user/下聚合所有用户相关逻辑；CommonJS与ESM不可混用，须统一模块系统；模块化核心在于每个export被需要、每个import来源明确、每个模块职责单一。
JavaScript模块化是用 export 和 import 显式声明依赖与接口的代码组织方式，不是“把文件拆开就行”，而是通过语言原生机制实现作用域隔离、静态可分析、可 tree-shaking 的结构约束。
为什么不能直接在全局写函数？
传统脚本把所有逻辑堆进 <script> 或单个 .js 文件，会导致：
• userName 被多个脚本反复覆盖
• fetchData() 和 saveData() 互相改对方的变量
• 不知道谁在用哪个函数，改一个就崩一片
模块化强制“不暴露就不被访问”——内部变量默认私有，必须靠 export 才能被别人 import。
ES Modules 怎么写才不报错？
浏览器和现代 Node.js（v14.3+ 且 package.json 中设 "type": "module"）直接支持，但细节极易踩坑：
- 路径必须带后缀：
import { add } from './mathUtils.js'—— 写成./mathUtils会 404 -
import只能出现在顶层，不能放在if或函数里（动态加载要用import()函数） - 不能混用
require()和import：Node.js 中启用了 ESM 后，require就不可用 - 命名导出要严格匹配：
export const API_URL = '...'→ 必须import { API_URL } from ...，不能import API_URL
/* utils/date.js */
export function formatDate(date) {
return date.toLocaleDateString('zh-CN');
}
export const DEFAULT_FORMAT = 'YYYY-MM-DD';
<p>/<em> main.js </em>/
import { formatDate, DEFAULT_FORMAT } from './utils/date.js';
console.log(formatDate(new Date())); // 正确</p>模块目录结构怎么设计才真正有用？
按功能组织，而不是按技术类型。比如用户相关逻辑全塞进 user/ 目录，而不是分散在 controllers/user.js、models/user.js、views/user.js：
立即学习“Java免费学习笔记（深入）”；
- 新增一个功能时，只进一个目录就能看全：逻辑、测试、配置、类型定义 避免跨目录跳转找
- 删除功能时，删整个
user/目录即可，不会漏掉某个api/下残留的userHelper.js
user.service.js 和 user.api.js 却发现它们根本没导出同名函数典型推荐结构：
src/
├── user/
│ ├── index.js /* 统一导出: export { login, logout } */
│ ├── auth.js /* 只处理登录登出 */
│ └── user.test.js
├── product/
│ ├── index.js
│ ├── list.js
│ └── detail.js
CommonJS 和 ESM 混用会怎样？
Node.js 项目中常见错误：旧代码用 module.exports，新文件用 export default，结果运行时报 ReferenceError: require is not defined 或 Cannot use import statement outside a module。
- 同一项目必须统一模块系统：要么全 ESM（
"type": "module"），要么全 CommonJS（不设 type，默认） - 若需兼容老库（如某些 npm 包只导出 CommonJS），可用
createRequire临时桥接，但别长期依赖 - Vite/Webpack 等构建工具虽能自动转换，但开发时编辑器跳转、类型提示、tree-shaking 都会打折
模块化的关键不在“有没有 import”，而在每个 export 是否真的被需要、每个 import 是否明确知道来源、每个模块是否只做一件事且边界清晰——否则只是把混乱从一个文件搬到了十个文件。
