JavaScript模块化需用ES6 import/export原生语法，仅支持于现代浏览器或Node.js≥12且启用"module"模式；import必须顶层静态声明，动态位置会报错，可用import()函数替代；export default单个可重命名，命名导出多个须原名导入；Node.js中需.mjs扩展名或"package.json"设"type":"module"，路径须带扩展名。
JavaScript 模块化是把代码拆成独立、可复用、有作用域边界的文件，import 和 export 是 ES6 标准提供的原生语法，不是工具或运行时方案——这意味着必须在支持模块的环境（如现代浏览器或 Node.js ≥12 且启用 "type": "module"）中使用，否则会直接报错。
为什么 import 必须写在顶层，不能放在 if 或函数里？
因为 import 是静态语法：JS 引擎在代码执行前就要分析依赖图，确定哪些模块要加载、绑定哪些变量。动态位置会导致无法提前解析，所以任何嵌套、条件、计算路径下的 import 都会触发 SyntaxError: Cannot use import statement outside a module 或更具体的 import declaration may only appear at top level。
- ✅ 正确写法：
import { foo } from './utils.js'; - ❌ 错误写法：
if (condition) { import { foo } from './utils.js'; } - ⚠️ 替代动态加载：用
import()（带括号）函数式调用，它返回 Promise，可在任意位置使用：if (needUtils) { const { foo } = await import('./utils.js'); }
export default 和 export 命名导出的区别与混用风险
export default 每个模块只能有一个，导入时名字可自定；export 命名导出可以多个，导入时必须用原名（或通过 as 重命名）。两者可共存，但容易引发混淆和重复绑定。
- 导出侧：
export const A = 1; export function fn() {} export default class MyClass {} - 导入侧：
import MyClass, { A, fn } from './m.js'; // default 在前，命名在后，用大括号 - ⚠️ 常见错误：试图用大括号解构 default 导出：
import { default as MyClass } from './m.js'; // 不报错但冗余更糟的是：import { MyClass } from './m.js'; // 报错：MyClass is not exported
Node.js 中使用 import/export 的两个硬性前提
Node.js 默认按 CommonJS 处理 .js 文件，即使语法正确也会报 Cannot use import statement outside a module。必须同时满足：
立即学习“Java免费学习笔记（深入）”；
- 文件扩展名为
.mjs，或 -
package.json中声明"type": "module"
另外，跨文件路径必须带扩展名（如 import x from './utils.js'），Node.js 不像浏览器自动补 .js；且不支持裸模块名（import _ from 'lodash' 在纯 ESM 下仍需额外配置或使用 node --experimental-specifier-resolution=node）。
模块路径解析、循环依赖处理、顶层 this 为 undefined 这些细节，在真实项目里往往比语法更早暴露问题。别只盯着能不能跑通，先确认运行时是否真在 ESM 模式下加载了文件。
