首页 > 文章 > 前端

JavaScript模块化发展：CommonJS到ES6全解析

时间：2025-12-02 23:35:57 192浏览收藏

来到golang学习网的大家，相信都是编程学习爱好者，希望在这里学习文章相关编程知识。下面本篇文章就来带大家聊聊《JavaScript模块化：从CommonJS到ES6详解》，介绍一下，希望对大家的知识积累有所帮助，助力实战开发！

JavaScript模块化从CommonJS到ES6模块演进，提升代码可维护性。CommonJS通过require同步加载，适用于Node.js；ES6模块采用import/export实现静态编译时加载，支持Tree Shaking，成为现代前端标准。

JavaScript模块化_从CommonJS到ES6模块

JavaScript模块化是现代前端开发的基础。随着项目规模扩大，把所有代码写在一个文件里显然不可行。模块化让开发者能将代码拆分成独立、可复用的单元，提升维护性和协作效率。从早期的CommonJS到如今主流的ES6模块，JavaScript的模块系统经历了重要演进。

CommonJS 是早期为 Node.js 设计的模块规范，它通过 require 加载模块，用 module.exports 或 exports 导出内容。

// math.js
module.exports = {
add: (a, b) => a + b,
subtract: (a, b) => a - b
};

// app.js
const math = require('./math');
console.log(math.add(2, 3)); // 5

CommonJS 的特点是运行时同步加载模块，适合服务器环境，因为文件就在本地磁盘上，读取快。但在浏览器中同步加载会阻塞页面，因此不适合直接在浏览器使用。

为了解决浏览器异步加载的问题，出现了 AMD（Asynchronous Module Definition）和 CMD 规范。代表实现是 RequireJS（AMD），它支持异步加载模块。

// define 模块
define(['./math'], function(math) {
  return {
    calculate: function() {
      return math.add(1, 2);
    }
  }
});

虽然解决了异步问题，但语法复杂，写法不够直观，逐渐被更简洁的方案取代。

ES6（ECMAScript 2015）引入了官方模块系统，使用 import 和 export 关键字，成为现代 JavaScript 的标准。

// math.mjs
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// 或默认导出
// export default function(a, b) { return a + b; }

// app.mjs
import { add, subtract } from './math.mjs';
// 或导入默认
// import add from './math.mjs'
console.log(add(4, 5)); // 9

ES6 模块是静态的，意味着导入和导出在代码执行前就确定，这使得工具可以进行静态分析，实现摇树优化（Tree Shaking），剔除未使用的代码。

浏览器原生支持 ES6 模块，但需注意文件应以 .mjs 为扩展名或在 script 标签中声明 type="module"：

Node.js 现在也支持 ES6 模块，只需将文件后缀改为 .mjs 或在 package.json 中设置 "type": "module"。

基本上就这些。从 CommonJS 到 ES6 模块，JavaScript 模块化越来越贴近语言本身，开发体验和性能都得到提升。现在新项目推荐统一使用 ES6 模块，保持一致性，便于构建工具处理。

理论要掌握，实操不能落！以上关于《JavaScript模块化发展：CommonJS到ES6全解析》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！

JavaScript模块化 require CommonJS ES6模块 import/export