ES6模块详解：JavaScript模块化实践

JavaScript模块化已从可选项变为必答题，而ES6的import/export绝非简单的“值拷贝”——它导出的是实时绑定、依赖在编译时静态解析、不支持条件导入，必须用import()动态加载；默认导出灵活匿名，具名导出则严格按名匹配且支持重命名；Node.js中启用需明确配置"type":"module"或使用.mjs后缀，混用CommonJS需格外谨慎；更关键的是，模块间共享的是活绑定（live binding），变量修改会即时同步所有导入处——理解这些反直觉却至关重要的机制，才是正确驾驭现代JavaScript模块化的起点。

JavaScript模块化不是“要不要用”的问题，而是“怎么用对”的问题——ES6模块（import/export）是语言原生标准，但它的行为和你直觉里“导入一个值”完全不同：它导出的是绑定，不是快照；它加载发生在编译时，不是运行时；它不允许条件导入，哪怕只差一行if也会报错。

为什么 import 不能写在 if 里？——静态解析的硬约束

ES6模块依赖关系必须在代码执行前就确定，引擎靠静态分析构建整个依赖图。一旦把import放进条件分支、函数或循环，语法直接非法：

if (ENV === 'dev') {
  import { debug } from './debug.js'; // ❌ SyntaxError: 'import' and 'export' may only appear at the top level
}

想按需加载？用import()这个函数式动态导入（返回Promise）：

• import('./utils.js').then(module => module.helper())
• 支持字符串模板，但路径必须是“可静态分析的”——import(`./${name}.js`) ✅，import('./' + name + '.js') ❌
• 常用于路由懒加载、功能开关、错误边界降级

export default 和 export const x = ... 导出的东西不一样

默认导出（export default）本质是给模块配一个“匿名出口”，导入时名字随意；具名导出（export const x = ...）则强制按名匹配，且支持解构重命名：

// math.js
export const PI = 3.14;
export default function add(a, b) { return a + b; }

// app.js
import sum, { PI as π } from './math.js'; // ✅ 名字可任意，具名导出必须用大括号
console.log(sum(1, 2), π); // 3 3.14

注意：export default只能有一个，而具名导出可以无限多个；混用时，import语句必须严格区分语法结构，写错就undefined。

Node.js 里跑 import 报错？检查这三件事

Node.js 支持ES6模块，但不是开箱即用。常见报错ERR_REQUIRE_ESM或Cannot use import statement outside a module通常因为：

• 文件扩展名不是 .mjs，且 package.json 里没写 "type": "module"
• 用了 require() 加载一个 .mjs 文件（CommonJS无法加载ESM）
• 在 type: "module" 项目里，试图用 require() 加载本地文件（必须改用 import() 或换回 .cjs 后缀）

最稳妥的迁移路径：新项目直接设 "type": "module"；老项目保留 .cjs 后缀写 CommonJS，新功能用 .mjs 写 ESM，两者通过 import() 互通。

真正容易被忽略的，是实时绑定（live binding）带来的副作用：一个模块里导出的let count = 0，另一个模块import { count }后，谁改了count，所有地方都看到变化——这不是引用传递，是语言级的绑定机制。别把它当普通变量用。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。