JavaScript模块化详解与import/export使用教程

本篇文章给大家分享《JavaScript模块化是什么？如何用import/export管理代码？》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

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。必须同时满足：

• 文件扩展名为 .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 模式下加载了文件。

到这里，我们也就讲完了《JavaScript模块化详解与import/export使用教程》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！