JavaScript模块化是什么？怎么引入使用？

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《JavaScript模块化是什么？如何使用模块？》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

ES模块（ESM）是浏览器和现代Node.js原生支持的静态模块系统，与动态的CommonJS不兼容；需用import/export顶层声明，支持命名/默认/混合导出及动态导入，路径须为字面量且带扩展名或相对前缀。

JavaScript 模块化是把代码拆成独立、可复用、有作用域边界的文件单位，解决全局污染和依赖混乱问题。ES6（ECMAScript 2015）起原生支持 import / export，现在已是标准做法。

什么是 ES 模块（ESM）？和 CommonJS 有什么区别？

ES 模块是浏览器和现代 Node.js（v12+ 默认启用）原生支持的模块系统，静态分析、编译时确定依赖，不支持动态路径或运行时修改导出对象。CommonJS（require/module.exports）是 Node.js 早期方案，动态加载、运行时执行，两者不能混用（比如在 ESM 文件里写 require() 会报错 ReferenceError: require is not defined）。

关键差异：

• export 和 import 必须在顶层作用域（不能在 if 或函数内）
• export default 每个文件最多一个；export 命名导出可多个，导入时名字必须匹配（或用 as 重命名）
• ESM 中 this 在模块顶层是 undefined，而 CommonJS 是当前模块对象
• Node.js 中启用 ESM 需满足任一条件：文件后缀为 .mjs，或 package.json 中设置 "type": "module"

如何正确使用 export 导出变量、函数或类？

导出不是“发布”，只是标记哪些内容可以被其他模块访问。常见写法有三种：

• 命名导出（Named Export）：

  export const API_URL = 'https://api.example.com';
  export function fetchData() { /* ... */ }
  export class User { /* ... */ }

  可批量导出：

  const a = 1;
  const b = 2;
  export { a, b };

• 默认导出（Default Export）：

  export default function initApp() { /* ... */ }
  // 或
  const router = new Router();
  export default router;

  每个模块仅一个，默认导出不要求命名，导入时可自定义名称
• 混合导出：

  export const VERSION = '1.0.0';
  export default function main() { /* ... */ }

  注意：不能写 export default const x = 1（语法错误），必须先声明再 export default x 或直接 export default 后跟表达式

如何用 import 加载模块？路径和语法要注意什么？

导入路径必须是字符串字面量（不能拼接变量），且需带扩展名或以 /、./、../ 开头（否则会被当作内置模块或包名）。常见形式：

• 导入默认导出：

  import initApp from './app.js'; // 注意：没大括号

• 导入命名导出：

  import { API_URL, fetchData } from './api.js';

• 全部导入为命名空间对象：

  import * as api from './api.js';
  console.log(api.API_URL);

• 只执行模块（无导入内容，用于副作用）：

  import './polyfill.js';

• 动态导入（返回 Promise，可用于按需加载）：

  const module = await import('./lazy.js');

  注意：动态导入可在条件语句或函数中使用，但依然要求路径是字符串字面量或模板字符串（如 import(`./pages/${page}.js`) 在构建工具支持下才安全）

常见报错及绕过陷阱

实际开发中最容易卡在这些地方：

• Cannot use import statement outside a module：浏览器脚本没加 type="module" 属性，或 Node.js 没设 "type": "module"
• Module not found：路径错误（漏掉 ./）、大小写不符（Linux/macOS 区分大小写）、扩展名缺失（ESM 不自动补 .js）
• export 'xxx' was not found in 'yyy'：导出名拼写错误、试图从默认导出文件里解构命名导出（比如 import { foo } from './bar.js'，但 bar.js 只有 export default）
• 在 HTML 中引入 ESM 脚本必须加 type="module"：

  <script type="module" src="./main.js"></script>

  否则当作传统脚本执行，import 语法直接报错
• 循环依赖时，ESM 返回的是实时绑定（live binding）的引用，不是值拷贝 —— 如果 A 导入 B，B 又导入 A，A 中未初始化的 export let x 在 B 中读取会是 undefined，直到 A 执行完赋值

模块路径解析、Tree-shaking 效果、与打包工具（如 Vite/Webpack）的协作机制，都依赖于静态 import/export 结构。一旦开始用 ESM，就别回头混写 require，否则构建和运行时行为会不可预测。

理论要掌握，实操不能落！以上关于《JavaScript模块化是什么？怎么引入使用？》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！