javascript如何实现模块化_ES6模块和CommonJS有什么区别

ES6模块是静态解析、编译时确定依赖，不可动态加载；CommonJS是运行时执行、支持条件引入；二者在浏览器/Node.js中行为不同，互操作需注意默认导出结构、文件后缀、路径写法及循环引用机制。

ES6模块（import/export）是静态解析的

编译时就确定依赖关系，不能放在if或函数里动态加载。浏览器和Node.js（v12+默认启用）都支持，但行为有差异：

• 浏览器中必须用type="module"声明：

• Node.js中需文件后缀为.mjs，或在package.json里设"type": "module"
• 路径必须带扩展名或/前缀（import {x} from 'lodash'合法，但import {x} from './utils'不合法，得写成./utils.js）
• 顶层this是undefined，不是globalThis

CommonJS（require/module.exports）是运行时执行的

Node.js原生支持（.js文件默认走CommonJS），可以动态调用require，也支持条件加载：

• require('./utils')会自动尝试.js、.json、.node
• module.exports = {}和exports.xxx = yyy效果不同：后者只是给exports对象加属性，若直接赋值exports = {}会失效（因为exports只是module.exports的引用）
• 循环引用时返回已执行部分的对象（可能为空对象），而ES6模块返回一个实时绑定的代理对象
• 无法直接在浏览器中使用，除非经打包工具（如Webpack）转译

默认导出和命名导出的互操作陷阱

ES6模块的export default在CommonJS里对应module.exports.default，但很多库（如Lodash）把默认导出挂到module.exports本身——这就导致：

• ES6中import _ from 'lodash'能用，但import { debounce } from 'lodash'会报错（未命名导出）
• CommonJS中const _ = require('lodash')拿到的是整个对象，const { debounce } = require('lodash')才解构出方法
• 混用时注意Babel/TypeScript的esModuleInterop配置：开启后会自动注入__importDefault包装，默认导出变成{ default: xxx }结构

Node.js里同时存在两种模块系统时的实际问题

一个项目里.js是CommonJS，.mjs是ES6，但它们不能直接互相import/require：

• CommonJS require('./foo.mjs')会失败（报ERR_REQUIRE_ESM），必须用await import('./foo.mjs')
• ES6模块里import foo from './bar.js'可以，但若bar.js用了require或__dirname，运行时可能出错（ES6模块没有__dirname）
• 第三方包若没正确声明"type": "module"，即使内容是ES6语法，Node.js仍按CommonJS解析，导致import报错

跨模块边界传值时，尤其要注意对象是否被深拷贝、是否共享引用——ES6模块导出的是活绑定，CommonJS是浅拷贝后的值。