JavaScript模块化是解决大型项目代码组织混乱、依赖关系复杂问题的关键技术，通过模块化可以将不同功能的代码拆分成独立单元，实现按需加载和复用，是前端工程化不可或缺的一部分。
主流JavaScript模块化规范
CommonJS规范
CommonJS是Node.js默认的模块化规范，主要用于服务端JavaScript开发，采用同步加载模块的方式，适合本地文件读取速度较快的场景。
CommonJS通过require函数导入模块，通过module.exports或者exports导出模块，示例如下：
// math.js 导出模块
function add(a, b) {
return a + b;
}
function subtract(a, b) {
return a - b;
}
module.exports = {
add,
subtract
};
// main.js 导入模块
const math = require('./math.js');
console.log(math.add(1, 2)); // 输出3
console.log(math.subtract(5, 3)); // 输出2
ES Module规范
ES Module是ECMAScript官方推出的模块化规范，支持静态分析，适合浏览器端和服务端通用，是目前前端工程的主流选择。
ES Module通过import导入模块，通过export或者export default导出模块，示例如下：
// utils.js 导出模块
export const PI = 3.1415926;
export function formatDate(date) {
return date.toLocaleDateString();
}
export default function log(message) {
console.log(message);
}
// app.js 导入模块
import log, { PI, formatDate } from './utils.js';
log(`圆周率的值是${PI}`);
console.log(formatDate(new Date()));
其他规范
除了上述两种主流规范，还有AMD、CMD等规范，不过目前已经被ES Module逐步取代，实际工程中很少使用，这里不做过多展开。
JavaScript工程实践中的模块化技巧
合理拆分模块
模块拆分需要遵循单一职责原则，每个模块只负责一个独立的功能，避免单个模块代码量过大。可以按照功能维度拆分，比如工具模块、业务模块、UI组件模块等，也可以按照层级拆分，比如数据层、逻辑层、视图层模块。
管理模块依赖
尽量减少模块之间的循环依赖，循环依赖会导致代码执行顺序不符合预期，增加调试难度。如果必须存在循环依赖，可以通过延迟导入或者重构模块结构来解决。同时要注意依赖的版本管理，避免不同模块依赖同一库的不同版本引发冲突。
模块打包配置
在工程中通常使用Webpack、Vite等打包工具处理模块化代码，需要合理配置打包规则。比如设置resolve.extensions自动识别模块后缀，配置alias简化模块导入路径，示例如下是Vite的基础配置：
// vite.config.js
import { defineConfig } from 'vite';
import path from 'path';
export default defineConfig({
resolve: {
// 自动识别的后缀
extensions: ['.js', '.jsx', '.ts', '.tsx'],
// 路径别名
alias: {
'@': path.resolve(__dirname, 'src')
}
}
});
Tree Shaking优化
ES Module的静态结构支持Tree Shaking，可以自动剔除未使用的模块代码，减小打包体积。在工程中需要确保使用ES Module语法，并且打包工具开启对应的优化选项，比如Webpack的usedExports配置，Vite默认支持Tree Shaking无需额外配置。
不同场景的模块化选择
如果是Node.js服务端项目，优先使用CommonJS规范，兼容性更好；如果是浏览器端前端项目，优先使用ES Module规范，配合打包工具处理兼容性；如果是需要同时支持服务端和浏览器端的库开发，可以同时提供CommonJS和ES Module两种导出格式，示例如下：
// package.json中配置导出
{
"name": "my-lib",
"main": "dist/index.cjs.js", // CommonJS入口
"module": "dist/index.esm.js", // ES Module入口
"exports": {
".": {
"require": "./dist/index.cjs.js",
"import": "./dist/index.esm.js"
}
}
}
常见问题解答
- 问：CommonJS和ES Module可以混用吗？答：在打包工具中可以通过插件实现混用，但是不建议这样做，最好统一使用一种规范，减少维护成本。
- 问：模块导出时exports和module.exports有什么区别？答：exports是module.exports的引用，直接给exports赋值会切断引用关系，导致导出失效，所以推荐直接使用module.exports导出。
- 问：动态导入模块怎么实现？答：ES Module支持
import()函数动态导入，返回Promise，适合按需加载场景，示例如下：
// 动态导入模块
button.addEventListener('click', async () => {
const { openModal } = await import('./modal.js');
openModal();
});
JavaScript模块化CommonJSES_Module工程实践模块打包修改时间：2026-07-19 01:21:23