JavaScript模块化开发已经成为前端工程的基础能力。通过把复杂系统拆成独立模块，开发者可以更好地管理依赖、控制作用域并提升复用性。在工程实践中，选择合适的模块规范和构建方式，往往决定了项目的可维护程度。
主流模块规范
目前常见的JavaScript模块规范主要包括以下几种：
- CommonJS：主要用于Node.js环境，使用require和module.exports。
- AMD：早期浏览器端方案，依赖define和require异步加载。
- ES Module：语言标准，使用import和export，被现代浏览器和打包工具广泛支持。
CommonJS示例
在Node.js工程中，我们常看到如下写法：
// math.js 导出模块
function add(a, b) {
return a + b;
}
module.exports = { add };
// main.js 引入模块
const { add } = require('./math');
console.log(add(1, 2));
ES Module示例
现代前端项目更推荐直接使用ES Module：
// util.js
export function format(str) {
return str.trim();
}
// app.js
import { format } from './util.js';
console.log(format(' hello '));
工程实践要点
合理划分模块边界
模块不是越小越好，应按照业务域或功能职责来拆分。避免 circular dependency（循环依赖），可用表格梳理依赖关系：
| 模块名 | 职责 | 依赖 |
|---|---|---|
| user | 用户数据管理 | request |
| request | 封装网络请求 | 无 |
使用构建工具
在浏览器不支持原生ES Module的旧项目中，可用打包工具如Webpack或Vite进行转译与打包。配置中应注意tree shaking以减少无用代码：
// vite.config.js 简化示例
import { defineConfig } from 'vite';
export default defineConfig({
build: {
rollupOptions: {
output: {
manualChunks: {
vendor: ['react', 'react-dom']
}
}
}
}
});
统一编码约定
团队应约定模块命名、默认导出与命名导出的使用场景。例如优先使用命名导出，方便静态分析和重构。在代码评审中关注import路径是否合理，避免出现深层相对路径如../../../../utils。
小结
JavaScript模块化开发与工程实践的核心在于用合适的规范组织代码，并结合构建工具与团队规范提升效率。无论是服务端CommonJS还是前端ES Module，理解其加载机制和依赖管理方式，都能让项目结构更清晰、协作更顺畅。
JavaScript模块化工程实践CommonJS修改时间：2026-07-29 07:27:16