JavaScript模块化关键在正确使用ESM与CommonJS：二者不兼容，混用报错；ESM的import须顶层声明，动态加载需用import()；export default与具名export导入方式严格对应；Node.js中ESM需启用"type":"module"且路径必须带后缀。
JavaScript 模块化不是“要不要用”的问题，而是“怎么用对”的问题——ESM（import/export）和 CommonJS（require/module.exports）本质不兼容，混用会直接报错，比如 ReferenceError: require is not defined 或 Cannot use import statement outside a module。
ESM 的 import 必须写在顶层作用域
这是 ESM 最常踩的坑：不能在条件语句、函数内部或 try/catch 里写 import。浏览器和 Node.js（启用 "type": "module" 时）都强制执行这一限制。
常见错误场景：
- 想根据环境动态加载模块，写了
if (DEV) { import('./debug.js') }→ 报语法错误 - 封装一个工具函数，内部调用
import('./utils.js')→ 不合法，必须用import()动态导入
正确做法是改用动态 import()（返回 Promise）：
立即学习“Java免费学习笔记（深入）”；
if (DEV) {
import('./debug.js').then(({ init }) => init())
}
注意：import() 是函数调用，不是声明，可以出现在任意位置，但加载结果需 await 或 .then 处理。
export default 和具名 export 导入方式不同
导出类型决定导入写法，写错会导致变量为 undefined，但不会报错，极难排查。
比如模块 math.js 写了：
淘宝客打折系统，集成了jssdk模块，增加了seo优化功能，更有利于搜索引擎收录 1程序上传到服务器空间 2开启服务器 3打开安装地址：http://您的域名/install.php 4如果不能安装请确保数据库里的表全部删除 5进入后台地址：http://您的域名/main.php 默认用户名和密码都是admin 6测试数据时可以导入 test文件夹里的test.sql文件 到数据库，或者
export default function add(a, b) { return a + b }
export const PI = 3.14
对应导入必须严格匹配：
-
import add from './math.js'→ 正确获取默认导出 -
import { PI } from './math.js'→ 正确获取具名导出 -
import { add } from './math.js'→ ❌add是 undefined，因为它是 default，不是具名 -
import math from './math.js'→ ✅math就是那个add函数
如果同时需要默认和具名，可合并写：import add, { PI } from './math.js'。
Node.js 中 ESM 需显式启用且路径必须带后缀
Node.js 默认把 .js 文件当 CommonJS 执行，即使写了 export 也会报错。启用 ESM 有两种等效方式：
- 在
package.json中加"type": "module" - 用
node --experimental-modules index.mjs（旧版）或直接运行.mjs文件（推荐）
更重要的是：ESM 下 import 路径必须是完整说明，不能省略扩展名：
-
import { foo } from './utils'→ ❌ 报错ERR_MODULE_NOT_FOUND -
import { foo } from './utils.js'→ ✅ -
import { foo } from './utils.mjs'→ ✅
这个限制没有例外，连 node_modules 里的包也一样——除非该包在 package.json 中声明了 "exports" 字段并配置了默认入口。
模块化的真正复杂点不在语法，而在于环境判断和加载时机：浏览器原生支持 ESM，但不支持 require；Node.js 支持两者但互斥；打包工具（如 Vite、Webpack）会做转换，但开发时若直连浏览器或用 node --run，就绕不开这些边界条件。别依赖“它应该能跑”，先确认执行上下文再选语法。
