ES6模块详解：JavaScript模块化入门指南

一分耕耘，一分收获！既然打开了这篇文章《JavaScript模块化与ES6模块详解》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

ES6模块导出的是绑定而非值，加载在编译时完成且不支持条件导入；需用import()动态加载；export default为匿名导出，具名导出需按名匹配；Node.js中需配置"type":"module"或使用.mjs后缀；绑定机制导致变量修改实时同步。

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，所有地方都看到变化——这不是引用传递，是语言级的绑定机制。别把它当普通变量用。

好了，本文到此结束，带大家了解了《ES6模块详解：JavaScript模块化入门指南》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！