登录
JavaScript模块化深度解析：从CommonJS到ES Modules的演进之路
2026年3月9日 15:34
引言
JavaScript模块化是现代前端开发的基石，它让代码组织更加清晰、可维护性更强。从早期的全局变量污染，到CommonJS、AMD、CMD，再到如今的ES Modules，JavaScript模块化经历了漫长的演进过程。本文将深入探讨JavaScript模块化的发展历程、核心概念和最佳实践，帮助你全面掌握这个前端开发必备技能。
模块化的发展历程
1. 早期JavaScript的困境
在JavaScript早期，没有模块化概念，所有代码都在全局作用域中执行。
// 早期的问题代码
// utils.js
var name = '工具函数';
function formatDate() {
// 格式化日期逻辑
}
// app.js
var name = '应用代码'; // 变量名冲突！
function formatDate() {
// 与utils.js中的函数冲突
}
这种开发方式存在严重问题：
- 全局变量污染
- 命名冲突
- 依赖关系混乱
- 无法按需加载
2. 命名空间模式
为了解决全局污染问题，开发者开始使用命名空间。
// 使用对象作为命名空间
var MyApp = MyApp || {};
MyApp.utils = {
formatDate: function(date) {
return new Date(date).toLocaleDateString();
},
debounce: function(func, delay) {
var timer;
return function() {
clearTimeout(timer);
timer = setTimeout(func, delay);
};
}
};
MyApp.services = {
userService: {
getUser: function(id) {
// 获取用户逻辑
}
}
};
// 使用
MyApp.utils.formatDate('2024-01-15');
虽然命名空间缓解了问题，但仍然存在依赖管理困难等问题。
CommonJS规范
3. CommonJS基础
CommonJS是Node.js采用的模块化规范，使用require和module.exports。
// math.js - 定义模块
function add(a, b) {
return a + b;
}
function multiply(a, b) {
return a * b;
}
// 导出多个函数
module.exports = {
add: add,
multiply: multiply
};
// 或者使用exports对象
exports.add = add;
exports.multiply = multiply;
// app.js - 使用模块
var math = require('./math');
console.log(math.add(2, 3)); // 5
console.log(math.multiply(4, 5)); // 20
4. CommonJS的特点
// CommonJS的核心特性
// 1. 同步加载
var fs = require('fs'); // 阻塞等待模块加载完成
// 2. 运行时加载
var module = require('./module'); // 在运行时动态加载
// 3. 值的拷贝
// counter.js
var count = 0;
module.exports = {
count: count,
increment: function() {
count++;
}
};
// app.js
var counter = require('./counter');
console.log(counter.count); // 0
counter.increment();
console.log(counter.count); // 仍然是0，因为是值的拷贝
// 4. 单例模式
// 多次require同一个模块，只加载一次
var module1 = require('./module');
var module2 = require('./module');
console.log(module1 === module2); // true
5. CommonJS的模块缓存机制
// 模块缓存示例
// cache.js
console.log('模块被加载');
module.exports = {
data: 'cached data'
};
// app.js
require('./cache'); // 输出: 模块被加载
require('./cache'); // 不再输出，使用缓存
require('./cache'); // 不再输出，使用缓存
// 清除缓存
delete require.cache[require.resolve('./cache')];
require('./cache'); // 再次输出: 模块被加载
AMD规范
6. RequireJS与AMD
AMD（Asynchronous Module Definition）是异步模块定义规范，RequireJS是其最著名的实现。
// 定义模块
define(['dependency1', 'dependency2'], function(dep1, dep2) {
// 模块代码
var privateVar = 'private';
function publicFunction() {
return dep1.doSomething() + dep2.doSomething();
}
// 返回公共API
return {
publicFunction: publicFunction
};
});
// 简单模块定义
define(function() {
return {
version: '1.0.0'
};
});
// 使用模块
require(['math', 'utils'], function(math, utils) {
var result = math.add(10, 20);
console.log(utils.formatDate(result));
});
7. RequireJS配置
<!-- index.html -->
<script src="require.js" data-main="app"></script>
// require.config.js
require.config({
// 基础路径
baseUrl: 'js/lib',
// 路径映射
paths: {
'jquery': 'jquery.min',
'underscore': 'underscore.min',
'backbone': 'backbone.min'
},
// 模块依赖
shim: {
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
}
}
});
// 加载主模块
require(['app/main'], function(main) {
main.init();
});
ES Modules（ESM）
8. ES Modules基础语法
ES Modules是JavaScript官方的模块化标准，现在已被所有现代浏览器和Node.js支持。
// 导出命名导出
// utils.js
export const formatDate = (date) => {
return new Date(date).toLocaleDateString();
};
export const debounce = (func, delay) => {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => func.apply(this, args), delay);
};
};
// 导出函数
export function greet(name) {
return `Hello, ${name}!`;
}
// 导出类
export class User {
constructor(name) {
this.name = name;
}
sayHello() {
return `Hello, I'm ${this.name}`;
}
}
// 导入命名导出
import { formatDate, debounce } from './utils.js';
import { greet } from './utils.js';
// 使用
console.log(formatDate('2024-01-15'));
const debouncedSearch = debounce(search, 300);
9. 默认导出
// 默认导出
// api.js
export default class API {
constructor(baseUrl) {
this.baseUrl = baseUrl;
}
async get(endpoint) {
const response = await fetch(`${this.baseUrl}${endpoint}`);
return response.json();
}
async post(endpoint, data) {
const response = await fetch(`${this.baseUrl}${endpoint}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
});
return response.json();
}
}
// 导入默认导出
import API from './api.js';
const api = new API('https://api.example.com');
const users = await api.get('/users');
10. 混合导出
// 混合导出示例
// index.js
// 命名导出
export { formatDate, debounce } from './utils.js';
export { User } from './models.js';
// 默认导出
export default {
version: '1.0.0',
author: 'Developer'
};
// 重新导出并重命名
export { formatDate as format } from './utils.js';
// 导出所有
export * from './constants.js';
11. ES Modules的特点
// ES Modules的核心特性
// 1. 静态分析
// 在编译时确定依赖关系，可以进行tree-shaking
// 2. 异步加载
import('./module.js').then(module => {
// 动态导入
console.log(module.default);
});
// 3. 值的引用
// counter.js
export let count = 0;
export function increment() {
count++;
}
// app.js
import { count, increment } from './counter.js';
console.log(count); // 0
increment();
console.log(count); // 1，因为是引用
// 4. 严格模式
// ES Modules自动运行在严格模式下
// 不能使用未声明的变量
// this指向undefined
模块化最佳实践
12. 模块组织结构
// 推荐的模块组织结构
// src/
// ├── api/
// │ ├── index.js // 统一导出
// │ ├── user.js // 用户相关API
// │ └── product.js // 产品相关API
// ├── components/
// │ ├── Button/
// │ │ ├── index.js
// │ │ ├── Button.vue
// │ │ └── Button.test.js
// │ └── Form/
// ├── utils/
// │ ├── index.js
// │ ├── date.js
// │ └── string.js
// └── main.js
// api/index.js - 统一导出
export { default as userAPI } from './user.js';
export { default as productAPI } from './product.js';
// 使用
import { userAPI, productAPI } from '@/api';
13. 循环依赖处理
// 循环依赖问题
// moduleA.js
import { funcB } from './moduleB.js';
export function funcA() {
console.log('funcA called');
funcB();
}
// moduleB.js
import { funcA } from './moduleA.js';
export function funcB() {
console.log('funcB called');
funcA();
}
// 解决方案1：延迟导入
// moduleA.js
export function funcA() {
console.log('funcA called');
import('./moduleB.js').then(module => {
module.funcB();
});
}
// 解决方案2：重构代码结构
// 将共享逻辑提取到第三个模块中
14. 动态导入与代码分割
// 动态导入实现代码分割
// router.js
const routes = [
{
path: '/home',
component: () => import('./views/Home.vue')
},
{
path: '/about',
component: () => import('./views/About.vue')
},
{
path: '/admin',
component: () => import('./views/Admin.vue')
}
];
// 条件导入
async function loadFeature() {
if (shouldLoadFeature) {
const module = await import('./feature.js');
module.init();
}
}
// 预加载
const preloadModule = import('./heavy-module.js');
// 当需要时使用
async function useModule() {
const module = await preloadModule;
module.doSomething();
}
现代构建工具中的模块化
15. Vite中的模块处理
// vite.config.js
import { defineConfig } from 'vite';
import path from 'path';
export default defineConfig({
// 解析配置
resolve: {
// 路径别名
alias: {
'@': path.resolve(__dirname, 'src'),
'@components': path.resolve(__dirname, 'src/components'),
'@utils': path.resolve(__dirname, 'src/utils')
},
// 扩展名
extensions: ['.js', '.json', '.vue']
},
// 构建优化
build: {
// 代码分割
rollupOptions: {
output: {
manualChunks: {
// 将node_modules中的代码打包到vendor
'vendor': ['vue', 'vue-router', 'pinia'],
// 第三方UI库
'ui': ['element-plus']
}
}
},
// 压缩配置
minify: 'terser',
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true
}
}
}
});
16. Webpack中的模块处理
// webpack.config.js
const path = require('path');
module.exports = {
// 入口配置
entry: {
main: './src/main.js',
vendor: './src/vendor.js'
},
// 输出配置
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[contenthash].js',
chunkFilename: '[name].[contenthash].js'
},
// 模块解析
resolve: {
extensions: ['.js', '.json', '.vue'],
alias: {
'@': path.resolve(__dirname, 'src'),
'@components': path.resolve(__dirname, 'src/components')
}
},
// 优化配置
optimization: {
// 代码分割
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
priority: 10
},
common: {
name: 'common',
minChunks: 2,
priority: 5
}
}
},
// Tree Shaking
usedExports: true,
sideEffects: false
}
};
性能优化
17. Tree Shaking优化
// utils.js
// 只导出需要的函数，避免打包无用代码
export const usedFunction = () => {
console.log('这个函数会被使用');
};
export const unusedFunction = () => {
console.log('这个函数不会被使用，会被tree-shaking移除');
};
// package.json
{
"sideEffects": false,
// 或者指定有副作用的文件
"sideEffects": [
"*.css",
"./src/polyfill.js"
]
}
18. 模块预加载与预获取
// 预加载 - 高优先级
const preloadModule = () => {
const link = document.createElement('link');
link.rel = 'modulepreload';
link.href = '/heavy-module.js';
document.head.appendChild(link);
};
// 预获取 - 低优先级
const prefetchModule = () => {
const link = document.createElement('link');
link.rel = 'moduleprefetch';
link.href = '/future-module.js';
document.head.appendChild(link);
};
// 在路由导航时预加载
router.beforeEach((to, from, next) => {
if (to.path === '/dashboard') {
preloadModule();
}
next();
});
总结
JavaScript模块化经历了从无到有、从简单到复杂的演进过程：
发展历程
- 早期阶段：全局变量、命名空间
- CommonJS：Node.js服务端模块化
- AMD：浏览器端异步模块化
- ES Modules：官方标准，统一前后端
核心优势
- 代码组织：清晰的模块边界和职责
- 依赖管理：明确的依赖关系
- 可维护性：易于维护和重构
- 性能优化：支持tree-shaking和代码分割
- 开发体验：更好的IDE支持和类型推断
最佳实践
- 统一使用ES Modules：现代项目首选ESM
- 合理组织模块：按功能划分模块结构
- 避免循环依赖：重构代码结构解决循环依赖
- 利用动态导入：实现代码分割和懒加载
- 配置构建工具：充分利用tree-shaking等优化
学习建议
- 理解模块化的历史和演进
- 掌握ES Modules的语法和特性
- 学习构建工具的模块处理机制
- 实践性能优化技巧
- 关注模块化的最新发展
模块化是现代JavaScript开发的基础，掌握它对于成为一名优秀的前端开发者至关重要。随着JavaScript生态的不断发展，模块化技术也在不断演进，保持学习和实践是跟上技术发展的关键。
本文首发于掘金，欢迎关注我的专栏获取更多前端技术干货！
