JavaScript模块化是现代前端开发基石，解决代码混乱、污染、依赖失控等问题；ES6模块静态可分析、支持tree-shaking，CommonJS动态运行、Node原生支持，二者在构建工具中可互操作。
JavaScript模块化不是锦上添花，而是现代前端开发的基石。它解决的是代码组织混乱、变量污染、依赖不可控、复用困难这些真实痛点——尤其当项目从几十行膨胀到几万行时，没有模块系统，维护成本会指数级上升。
模块化让代码真正可维护
没有模块时，所有人把函数和变量挂在全局作用域，一个 utils.js 里改个 formatDate，可能悄悄影响了三个页面的日期显示。模块化强制“作用域隔离”，每个文件默认私有，只暴露明确接口，别人用什么、怎么用，一清二楚。
实际好处包括：
- 避免命名冲突：两个团队都写
ajax函数？模块路径不同，互不干扰 - 按需加载：Webpack/Vite 能静态分析 import，自动做 code-splitting
- 便于测试：可以单独导入某个工具函数，不用启动整个应用
- 支持 Tree-shaking：ES6 的
export是静态声明，打包器能识别未使用的导出并剔除
CommonJS 是 Node.js 的“老派”方案
CommonJS（CJS）诞生于服务端，核心是 require() 和 module.exports，运行时动态加载，同步执行。
立即学习“Java免费学习笔记（深入）”；
典型写法：
utils.jsconst formatDate = (date) => new Date(date).toDateString();main.js
const randomId = () => Math.random().toString(36).substr(2, 9);
module.exports = { formatDate, randomId };
const { formatDate } = require('./utils');
console.log(formatDate('2024-01-01'));
关键特点：
-
动态 require：可以写
require(somePath + '.js')，路径由变量拼接 -
运行时确定依赖：
require可以出现在 if 语句或函数内部 -
缓存机制：同一路径的
require多次调用，只执行一次，返回缓存的exports - Node.js 默认支持，但浏览器原生不支持（需打包或转译）
ES6 模块是标准、静态、更现代的设计
ES6 Module（ESM）是 ECMAScript 官方标准，语法基于 import / export，设计目标是静态可分析、支持顶层 await、天然适配 tree-shaking。
典型写法：
utils.mjs 或 .js（配合 type="module"）export const formatDate = (date) => new Date(date).toDateString();main.mjs
export const randomId = () => Math.random().toString(36).substr(2, 9);
// 或统一导出：
// export { formatDate, randomId };
import { formatDate } from './utils.js';
// 或默认导入：
// import utils from './utils.js';
关键区别：
- 静态结构：import/export 必须在顶层，不能在 if 或函数中；路径必须是字符串字面量
- 编译时绑定：导入的变量是“活绑定”（live binding），如果模块内修改了导出值，导入方也能看到更新（注意：基本类型仍是拷贝，对象引用才体现活绑定）
-
默认导出灵活：
export default不强制命名，导入时可自定义名，适合单入口模块 -
浏览器原生支持：HTML 中用
即可运行
两者共存与互操作不是玄学
Node.js 从 v12 开始支持 ESM，但默认仍为 CJS。常见场景处理方式：
- CJS 中导入 ESM：用
await import('./mod.mjs')（动态导入，返回 Promise） - ESM 中导入 CJS：Node 允许直接
import cjsMod from './mod.cjs'，会自动包装成命名空间对象 - package.json 加
"type": "module"整体切到 ESM；否则 .js 文件默认 CJS - Vite/Webpack 等构建工具会自动桥接两种模块，开发者通常无感
基本上就这些。模块化本身不复杂，但它是理清依赖、支撑协作、走向工程化的第一步。选 ESM 是趋势，但理解 CJS 依然必要——毕竟大量 npm 包、Node 工具链、甚至你司的旧代码，还在用它。
