JavaScript模块化是用export和import显式声明依赖与接口的代码组织方式，通过语言原生机制实现作用域隔离、静态可分析和tree-shaking；不能直接在全局写函数，否则导致变量覆盖、函数互相干扰、依赖关系混乱；ES Modules需注意路径带后缀、import只能在顶层、不可混用require、命名导出须严格匹配；模块目录应按功能而非技术类型组织，如user/下聚合所有用户相关逻辑；CommonJS与ESM不可混用，须统一模块系统；模块化核心在于每个export被需要、每个import来源明确、每个模块职责单一。

JavaScript模块化是用 export 和 import 显式声明依赖与接口的代码组织方式，不是“把文件拆开就行”，而是通过语言原生机制实现作用域隔离、静态可分析、可 tree-shaking 的结构约束。

为什么不能直接在全局写函数？

传统脚本把所有逻辑堆进 或单个 .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';
/ main.js /
import { formatDate, DEFAULT_FORMAT } from './utils/date.js';
console.log(formatDate(new Date())); // 正确

模块目录结构怎么设计才真正有用？

按功能组织，而不是按技术类型。比如用户相关逻辑全塞进 user/ 目录，而不是分散在 controllers/user.js、models/user.js、views/user.js：

• 新增一个功能时，只进一个目录就能看全：逻辑、测试、配置、类型定义
避免跨目录跳转找 user.service.js 和 user.api.js 却发现它们根本没导出同名函数
• 删除功能时，删整个 user/ 目录即可，不会漏掉某个 api/ 下残留的 userHelper.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 是否明确知道来源、每个模块是否只做一件事且边界清晰——否则只是把混乱从一个文件搬到了十个文件。