JavaScript模块化主要有CommonJS和ES6两种方式：前者用require/module.exports，运行时同步加载，Node原生支持；后者用import/export，编译时静态分析，浏览器和新Node版本原生支持；二者长期共存、各司其职。
JavaScript模块化主要靠 CommonJS 和 ES6（ECMAScript 2015）模块系统 两种方式，它们在语法、加载机制、运行时行为和适用环境上差异明显。选错方案容易导致报错或打包异常，尤其在Node.js和浏览器混合开发中。
语法写法不同
CommonJS 使用 require() 和 module.exports（或 exports），是动态、可写多次的赋值式导出：
-
导出：
module.exports = { foo: 1 };或exports.bar = () => {} -
导入：
const utils = require('./utils');（路径必须带./或../）
ES6 模块使用 import / export，是静态声明、编译期确定的语法：
-
导出：
export const a = 1;、export default function() {} -
导入：
import { a } from './utils.js';（注意：浏览器中路径必须含扩展名或以.js结尾）
加载时机与执行顺序不同
CommonJS 是运行时同步加载，require() 执行时才读取并执行模块文件，支持条件加载（如 if (x) require('./a')）。
ES6 模块是编译时静态分析，所有 import 必须在顶层，不能放在 if 或函数内；且 import 语句会被提升到模块顶部，但实际绑定在模块执行阶段完成（即“实时绑定”——导出值变了，导入处也会跟着变）。
默认导出与命名导出处理不同
CommonJS 只有一个导出对象（module.exports），所谓“默认导出”只是把整个对象赋给它，没有语法级区分：
-
module.exports = function() {}→ 导入后直接调用：const fn = require('./x'); fn(); - 无法同时有多个具名导出和一个默认导出；想模拟需手动挂载：
module.exports.default = ...; module.exports.named = ...;
ES6 明确区分 export default 和 export 命名导出：
- 一个模块最多一个
default，导入时可自定义名字：import MyFunc from './x'; - 命名导出必须用对应名字或解构：
import { foo, bar } from './x'; - 可同时存在：
export default class A {}; export const b = 2;
运行环境与工具链支持不同
CommonJS 是 Node.js 原生支持的模块系统（v14.0+ 默认仍为 CommonJS，除非设置 "type": "module"），不被浏览器原生支持（需打包器如 Webpack/Babel 转译）。
ES6 模块被现代浏览器原生支持（通过 ），Node.js 从 v12 起支持（需文件后缀为 .mjs 或 package.json 中设 "type": ），但 CommonJS 仍是 Node 生态主流（尤其 npm 包）。
"module"
实际项目中常见混合场景：Node 后端用 CommonJS，前端用 ES6；或借助工具（如 Vite、Webpack）自动处理两者互调（例如在 ES6 环境中 import _ from 'lodash'，底层其实是解析其 CommonJS 版本）。
基本上就这些。选型看环境：Node 脚本、工具类优先 CommonJS；浏览器项目、新工程、TypeScript 项目推荐 ES6 模块。二者不是谁替代谁，而是长期共存、各司其职。
