一文搞懂 JavaScript 模块化
原文中文，约6100字，阅读约需15分钟。
📝
内容提要
本文介绍了JavaScript中的主要模块方案，包括CommonJS、AMD、UMD和ESM，并解释了它们的背景和使用方式。同时还介绍了打包工具如何支持ESM以及如何解决Node.js和浏览器之间的差异问题。最后提到了双包问题和Deno对模块加载的不同方式。
❓
Q&A
JavaScript模块化的历史背景是什么？
JavaScript早期没有模块系统，依赖手动管理引入顺序，导致封装和依赖管理问题。
CommonJS和AMD的主要区别是什么？
CommonJS是为同步导入设计，适用于Node.js，而AMD是为异步加载设计，适用于浏览器。
UMD规范是如何解决模块兼容性问题的？
UMD规范支持多种模块环境，允许在传统JavaScript、AMD和CommonJS中使用，解决了社区割裂问题。
ESM是什么，它与CommonJS的引用方式有什么不同？
ESM是ECMAScript6引入的原生模块系统，引用方式使用import语法，而CommonJS使用require。
如何通过打包工具支持ESM？
打包工具如Rollup和Webpack支持ESM，通过配置module字段和mainFields实现兼容。
Node.js如何处理ESM与CommonJS的兼容性问题？
Node.js通过后缀名和package.json中的type字段区分ESM和CommonJS，同时支持两者的引用。
🏷️
