JavaScript模块化_从CommonJS到ES6

JavaScript模块化从CommonJS到ES6模块逐步演进，解决了早期代码组织混乱问题。CommonJS采用同步加载，适用于Node.js环境，通过require引入模块，module.exports导出；而ES6模块为语言原生标准，支持静态分析、tree-shaking及异步解析，使用import和export语法，更适合浏览器。两者主要差异在于加载时机（运行时值拷贝 vs 编译时动态引用）、语法风格及循环依赖处理。现代浏览器原生支持ES6模块，需通过<script type="module">引入。当前开发中二者常共存，Node.js可通过.mjs扩展名或package.json设置启用ES6模块，构建工具如Webpack、Vite等支持格式转换，Babel可将ES6语法转为CommonJS以兼容旧环境。混合使用时需注意互操作性，如用默认导入引入CommonJS模块。理解其差异有助于提升代码可维护性。

JavaScript模块化是现代前端开发的基础。早期的JavaScript缺乏原生模块机制，开发者不得不依赖全局变量或立即执行函数来组织代码，导致命名冲突和依赖混乱。为解决这些问题，社区逐步发展出CommonJS、AMD、UMD等规范，最终迎来了ES6模块（ESM）的标准化。

CommonJS：服务器端的模块方案

CommonJS 是最早被广泛采用的模块规范，主要应用于 Node.js 环境。

它通过 require 加载模块，通过 module.exports 或 exports 导出内容。每个文件是一个独立模块，变量不会污染全局作用域。

// math.js
function add(a, b) {
  return a + b;
}
module.exports = { add };
<p>// app.js
const { add } = require('./math');
console.log(add(2, 3)); // 5</p>

CommonJS 使用同步加载机制，适合服务端文件读取，但在浏览器中会阻塞主线程，因此不适合直接用于前端。

立即学习“Java免费学习笔记（深入）”；

ES6 模块：语言层面的标准化

ES6（ECMAScript 2015）引入了原生模块系统，成为 JavaScript 的官方标准。它使用 import 和 export 语法，支持静态分析和 tree-shaking，有助于构建工具优化打包体积。

// math.mjs
export const add = (a, b) => a + b;
export const mul = (a, b) => a * b;
<p>// app.mjs
import { add, mul } from './math.mjs';
console.log(add(2, 3)); // 5</p>

ES6 模块是异步解析的，设计上更适合浏览器环境。它支持默认导出（export default）和具名导出，导入时可重命名或整体导入。

居然设计家

居然之家和阿里巴巴共同打造的家居家装AI设计平台

199

查看详情

CommonJS 与 ES6 模块的主要差异

两者在行为和使用上有显著不同：

• 加载时机：CommonJS 是运行时加载，值拷贝；ES6 模块是编译时加载，动态引用（活绑定）。
• 语法风格：CommonJS 使用 require() 函数，ES6 使用 import 关键字（必须在顶层）。
• 循环依赖：CommonJS 返回缓存值，可能拿到未执行完的模块；ES6 模块能处理循环依赖，但需注意初始化顺序。
• 浏览器支持：现代浏览器原生支持 ES6 模块，需用 <script type="module"> 引入。

实际开发中的共存与转换

目前很多项目同时存在 CommonJS 和 ES6 模块。Node.js 从 v12 开始支持 .mjs 扩展名或 package.json 中设置 "type": "module" 来启用 ES6 模块。

构建工具如 Webpack、Vite、Rollup 默认支持两种格式，并能在打包过程中自动转换。Babel 可将 ES6 模块语法转为 CommonJS，便于在旧环境运行。

如果在同一个项目中混合使用，需要注意互操作性。例如，ES6 模块导入 CommonJS 模块时，可用默认导入方式：import _ from 'lodash'。

基本上就这些。从 CommonJS 到 ES6 模块，JavaScript 的模块化不断演进，最终走向统一标准。理解两者的原理和差异，有助于写出更清晰、可维护的代码。不复杂但容易忽略。

以上就是JavaScript模块化_从CommonJS到ES6的详细内容，更多请关注php中文网其它相关文章！