一文搞懂 JavaScript 模块化
💡
原文中文，约6100字，阅读约需15分钟。
📝
内容提要
本文介绍了JavaScript中的主要模块方案，包括CommonJS、AMD、UMD和ESM，并解释了它们的背景和使用方式。同时还介绍了打包工具如何支持ESM以及如何解决Node.js和浏览器之间的差异问题。最后提到了双包问题和Deno对模块加载的不同方式。
🎯
关键要点
- JavaScript 早期没有模块系统，依赖手动管理引入顺序。
- Node.js 引入 CommonJS 规范，解决了 JavaScript 缺失模块的问题。
- 浏览器社区引入 AMD 规范，支持异步加载模块。
- AMD 和 CommonJS 的共存导致社区割裂，需解决模块间的兼容性问题。
- UMD 规范实现了对多种模块环境的支持，解决了模块兼容性问题。
- ESM（ECMAScript6 Module）于2015年发布，提供原生模块系统。
- 打包工具如 Rollup 和 Webpack 支持 ESM，通过配置实现兼容。
- Node.js 和浏览器环境存在差异，需通过特定字段区分不同环境的实现。
- Node.js 从18版本开始提供稳定的 ESM 支持，兼容 CommonJS 模块。
- 双包问题可能导致代码执行两遍，需谨慎处理。
- Deno 只支持通过 URL 加载模块，与 Node.js 的文件路径加载方式不同。
🏷️
标签
➡️
