17370845950

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，运行时动态加载，同步执行。

典型写法：

const formatDate = (date) => new Date(date).toDateString();
const randomId = () => Math.random().toString(36).substr(2, 9);

module.exports = { formatDate, randomId };

const { formatDate } = require('./utils');
console.log(formatDate('2025-01-01'));

关键特点：

• 动态 require：可以写 require(somePath + '.js')，路径由变量拼接
• 运行时确定依赖：require 可以出现在 if 语句或函数内部
• 缓存机制：同一路径的 require 多次调用，只执行一次，返回缓存的 exports
• Node.js 默认支持，但浏览器原生不支持（需打包或转译）

ES6 模块是标准、静态、更现代的设计

ES6 Module（ESM）是 ECMAScript 官方标准，语法基于 import / export，设计目标是静态可分析、支持顶层 await、天然适配 tree-shaking。

典型写法：

export const formatDate = (date) => new Date(date).toDateString();
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 工具链、甚至你司的旧代码，还在用它。