JavaScript模块化开发怎么做_ES6模块与CommonJS有什么区别

es6模块与Commonjs本质差异在于加载机制和绑定行为：ES6依赖静态分析、实时绑定；CommonJS为动态执行、值拷贝。import必须顶层字面量，require可任意位置；混用需构建工具或node桥接。

ES6模块（import/export）是现代javaScript的标准模块方案，CommonJS（require/module.exports）是Node.js早期的运行时模块规范；二者不能直接混用，必须靠构建工具或Node运行时桥接——这不是语法偏好问题，而是加载机制、绑定行为和构建能力的根本差异。

为什么 import 不能放在 if 里，而 require 可以？

因为ES6模块依赖关系必须在代码执行前静态确定，解析器要靠它做tree-shaking、循环依赖分析和打包优化；import 只能在顶层作用域出现，任何条件判断、函数作用域或动态拼接路径都会报语法错误。

• import 路径必须是字面量字符串：import('./utils.js') 合法（这是动态导入，返回 promise），但 import('./' + name + '.js') 直接报错
• require 是普通函数调用，可出现在任意位置：if (DEBUG) require('./debug') 或 require(config.path) 都没问题
• 误用后果：webpack/vite 在构建时会报 Cannot use import statement outside a module 或 Dynamic imports must be strings

导出值变了，为什么 require 拿不到更新，而 import 可以？

CommonJS导出的是值的拷贝（对象除外，导出的是引用），ES6模块导出的是实时绑定的只读引用——这直接影响状态共享、单例行为和调试逻辑。

/* lib.cjs */ let count = 0; function inc() { count++; } module.exports = { count, inc }; 
/ app.cjs / const lib = require('./lib'); console.log(lib.count); // 0 lib.inc(); console.log(lib.count); // 0 ← 不变！因为导出的是初始值拷贝

/* lib.mjs */ export let count = 0; export function inc() { count++; } 
/ app.mjs / import { count, inc } from './lib'; console.log(count); // 0 inc(); console.log(count); // 4 ← 实时响应！绑定的是同一内存地址

• CommonJS中改 module.exports 本身（比如重新赋值）不会影响已 require 的模块，因为缓存的是首次执行后的 exports 对象
• ES6模块中 export let 和 export const obj = {} 都支持属性修改同步可见，但不能在导入侧执行 count = 5（报 Assignment to constant variable）
• 跨模块共享可变状态时，CommonJS容易“失联”，ES6更可靠

在node.js里混用ESM和CJS，怎么避免 require is not defined 或 Cannot import ESM module from CommonJS？

Node.js 12+ 支持双模块系统，但默认不互通；强行混用会触发运行时错误。关键不是“能不能”，而是“怎么桥接”。

立即学习“Java免费学习笔记（深入）”；

• 在 .mjs 或 package.json 中设 "type": "module" 的文件里，require() 直接不可用 → 改用 import() 动态导入CJS模块：const cjsMod = await import('./legacy.js')
• 想在CJS中加载ESM模块？不行。但可用 createRequire 创建兼容require：

  import { createRequire } from 'module'; const require = createRequire(import.meta.url); const esmMod = require('./utils.mjs'); // 实际拿到的是 { default: ... }

• Webpack/Vite等工具会自动把CJS包的 module.exports 挂到 default 上，所以 import cjs from 'some-cjs-pkg' 实际等价于 import { default as cjs } from 'some-cjs-pkg'
• 别手动改文件后缀或 "type" 字段来“试错”，先看构建工具文档是否已处理桥接（如Vite默认支持CJS转ESM）

最常被忽略的一点：模块系统的本质不是写法问题，而是加载时机与绑定语义。你写的 import { foo } from './bar' 看似只是引入一个函数，背后决定着代码能否被摇掉、状态是否一致、调试时变量为何“不动”——选错模块规范，后期重构成本远高于初期多敲几行 export default。