JavaScript模块化从CommonJS到ES6模块演进，提升代码可维护性。CommonJS通过require同步加载，适用于Node.js；ES6模块采用import/export实现静态编译时加载，支持Tree Shaking，成为现代前端标准。
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），它支持异步加载模块。
立即学习“Java免费学习笔记（深入）”；
// 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"：
<script type="module" src="./app.mjs"></script>
Node.js 现在也支持 ES6 模块，只需将文件后缀改为 .mjs 或在 package.json 中设置 "type": "module"。
基本上就这些。从 CommonJS 到 ES6 模块，JavaScript 模块化越来越贴近语言本身，开发体验和性能都得到提升。现在新项目推荐统一使用 ES6 模块，保持一致性，便于构建工具处理。
以上就是JavaScript模块化_从CommonJS到ES6模块的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
552
