引言：模块化演进的历史脉络
在深入技术细节之前，让我们先理解为什么JavaScript需要两种模块系统。这不仅仅是技术选择，更是一部前端工程化的演进史。
2009年之前：模块化的史前时代
javascript
// 全局命名空间污染
var utils = {
add: function(a, b) { return a + b; },
multiply: function(a, b) { return a * b; }
};
// IIFE模式（立即调用函数表达式）
var module = (function() {
var privateVar = 'hidden';
return {
publicMethod: function() { return privateVar; }
};
})();一、设计哲学与历史背景的深度对比
1.1 CommonJS：服务端优先的设计理念
CommonJS诞生于2009年，旨在为JavaScript在服务端开发提供模块化标准。
核心设计原则：
javascript
// CommonJS 的同步加载哲学
const module = require('./module'); // 阻塞式加载
// 模拟Node.js的模块加载器实现
class CommonJSLoader {
constructor() {
this.moduleCache = new Map();
this.loadingStack = [];
}
require(modulePath) {
// 1. 路径解析
const resolvedPath = this.resolvePath(modulePath);
// 2. 缓存检查
if (this.moduleCache.has(resolvedPath)) {
return this.moduleCache.get(resolvedPath).exports;
}
// 3. 创建模块实例
const module = {
exports: {},
loaded: false,
filename: resolvedPath,
children: [],
parent: this.loadingStack[this.loadingStack.length - 1] || null
};
// 4. 缓存模块
this.moduleCache.set(resolvedPath, module);
this.loadingStack.push(module);
try {
// 5. 同步读取文件内容
const fileContent = this.readFileSync(resolvedPath);
// 6. 包装并执行模块代码
const wrapper = `(function(exports, require, module, __filename, __dirname) {
${fileContent}
})`;
const compiledWrapper = eval(wrapper);
compiledWrapper.call(
module.exports,
module.exports,
this.require.bind(this),
module,
resolvedPath,
this.dirname(resolvedPath)
);
// 7. 标记为已加载
module.loaded = true;
} finally {
this.loadingStack.pop();
}
return module.exports;
}
readFileSync(path) {
// 模拟同步文件读取
console.log(`📂 同步读取文件: ${path}`);
return "module.exports = { value: 'Hello CommonJS' };";
}
}1.2 ES6模块：语言层面的标准化方案
ES6模块（2015年）的设计目标是统一浏览器和服务端的模块系统，强调静态分析和编译时优化。
核心设计原则：
javascript
// ES6模块的异步加载哲学
import { namedExport } from './module.js'; // 静态声明
// 模拟ES6模块加载器的核心架构
class ESModuleLoader {
constructor() {
this.moduleMap = new Map(); // 模块映射表
this.loadingPromises = new Map(); // 加载中的Promise
this.dependencyGraph = new Map(); // 依赖图
}
async loadModule(specifier, referrer = null) {
const resolvedUrl = this.resolveSpecifier(specifier, referrer);
// 1. 检查是否正在加载或已加载
if (this.moduleMap.has(resolvedUrl)) {
return this.moduleMap.get(resolvedUrl);
}
if (this.loadingPromises.has(resolvedUrl)) {
return this.loadingPromises.get(resolvedUrl);
}
// 2. 创建加载Promise
const loadPromise = this.fetchAndParseModule(resolvedUrl);
this.loadingPromises.set(resolvedUrl, loadPromise);
try {
const module = await loadPromise;
this.moduleMap.set(resolvedUrl, module);
this.loadingPromises.delete(resolvedUrl);
return module;
} catch (error) {
this.loadingPromises.delete(resolvedUrl);
throw error;
}
}
async fetchAndParseModule(url) {
console.log(`🌐 异步获取模块: ${url}`);
// 1. 获取模块源码
const source = await this.fetchModuleSource(url);
// 2. 解析模块依赖（静态分析）
const { imports, exports } = this.parseModule(source);
// 3. 创建模块记录
const moduleRecord = {
url,
namespace: null, // 模块的命名空间对象
environment: new Map(), // 模块环境记录
requestedModules: imports, // 请求的模块
localExportEntries: exports, // 本地导出条目
status: 'unlinked' // 模块状态：unlinked -> linking -> linked -> evaluating -> evaluated
};
// 4. 递归加载所有依赖
const dependencyLoadPromises = imports.map(importSpecifier =>
this.loadModule(importSpecifier, url)
);
await Promise.all(dependencyLoadPromises);
return moduleRecord;
}
parseModule(source) {
// 简化的静态分析实现
const imports = [];
const exports = [];
// 提取import语句
const importRegex = /import\s+(?:\*\s+as\s+(\w+)|{([^}]+)}|(\w+))\s+from\s+['"]([^'"]+)['"]/g;
let match;
while ((match = importRegex.exec(source)) !== null) {
imports.push(match[4]);
}
// 提取export语句
const exportRegex = /export\s+(?:default|{([^}]+)}|(\w+))/g;
while ((match = exportRegex.exec(source)) !== null) {
if (match[1]) exports.push(...match[1].split(',').map(s => s.trim()));
if (match[2]) exports.push(match[2]);
}
return { imports, exports };
}
}二、语法体系的全面对比分析
2.1 导出机制的深度差异
CommonJS的运行时导出：
javascript
// 动态导出机制
class CommonJSExporter {
constructor() {
this.exportMechanisms = {
// 1. 直接赋值（覆盖整个导出）
directAssignment: function() {
module.exports = {
name: 'direct',
value: 42
};
},
// 2. 逐步添加属性
incrementalExport: function() {
exports.propertyA = 'valueA';
exports.propertyB = function() { return 'valueB'; };
// 注意：这实际上是在修改 module.exports
console.log(exports === module.exports); // true
},
// 3. 条件导出
conditionalExport: function(env) {
if (env === 'development') {
module.exports = { debug: true, verbose: true };
} else {
module.exports = { debug: false, optimized: true };
}
},
// 4. 循环引用处理
circularReference: function() {
// 模块加载过程中就可以导出部分内容
exports.partialValue = 'loaded';
// 稍后继续完善导出
setTimeout(() => {
exports.completeValue = 'finished';
}, 100);
},
// 5. 动态计算导出值
computedExports: function() {
const dynamicValue = Math.random();
module.exports = {
computed: dynamicValue > 0.5 ? 'high' : 'low',
timestamp: Date.now()
};
}
};
}
}ES6模块的静态导出：
javascript
// ES6模块的导出是声明式的，在解析阶段就确定
class ES6Exporter {
static exportPatterns = {
// 1. 命名导出（必须在顶层）
namedExports: `
// 导出变量声明
export const PI = 3.14159;
export let counter = 0;
// 导出函数声明
export function calculateArea(radius) {
return PI * radius * radius;
}
// 导出类声明
export class Calculator {
constructor() { this.version = '1.0'; }
add(a, b) { return a + b; }
}
// 后置导出（统一在模块末尾）
const privateHelper = () => { /* 实现 */ };
export { privateHelper as helper };
`,
// 2. 默认导出（每个模块一个）
defaultExport: `
// 直接默认导出
export default class DefaultClass {
constructor() { this.type = 'default'; }
}
// 或者后置默认导出
class AnotherClass {}
export default AnotherClass;
`,
// 3. 复合导出模式
mixedExports: `
// 命名导出和默认导出可以共存
export const version = '1.0.0';
export default function main() {
return 'main function';
}
// 重新导出其他模块的内容
export { namedExport } from './other-module.js';
export * as utils from './utils.js';
`,
// 4. 只读的实时绑定
liveBindings: `
export let mutableValue = 'initial';
export function updateValue(newValue) {
mutableValue = newValue; // 所有导入的地方都会立即看到这个变化
}
// 注意：导入方不能直接修改 mutableValue
// import { mutableValue } from './module.js';
// mutableValue = 'modified'; // 错误：只读的
`
};
}2.2 导入机制的工程化差异
CommonJS的动态导入：
javascript
class CommonJSImporter {
constructor() {
this.importPatterns = {
// 1. 同步阻塞加载
synchronousLoad: function() {
// 在模块顶部加载
const fs = require('fs');
const path = require('path');
// 运行时决定加载哪个模块
const config = require(`./config/${process.env.NODE_ENV}.js`);
},
// 2. 条件导入
conditionalImport: function(featureFlag) {
let processor;
if (featureFlag === 'advanced') {
processor = require('./advanced-processor');
} else {
processor = require('./basic-processor');
}
return processor;
},
// 3. 动态路径
dynamicPath: function(moduleName) {
try {
// 可能失败的动态require
return require(`./plugins/${moduleName}`);
} catch (error) {
return require('./plugins/default');
}
},
// 4. 循环依赖的处理
circularDependency: function() {
// a.js
console.log('a starting');
exports.done = false;
const b = require('./b.js');
console.log('in a, b.done =', b.done);
exports.done = true;
console.log('a done');
// b.js
console.log('b starting');
exports.done = false;
const a = require('./a.js');
console.log('in b, a.done =', a.done);
exports.done = true;
console.log('b done');
},
// 5. 模块缓存机制
moduleCaching: function() {
const module1 = require('./shared-module');
const module2 = require('./shared-module');
console.log(module1 === module2); // true - 相同的实例
// 清除缓存（危险操作！）
delete require.cache[require.resolve('./shared-module')];
}
};
}
}ES6模块的静态导入：
javascript
class ES6Importer {
static importPatterns = {
// 1. 静态声明（必须在顶层）
staticDeclarations: `
// 命名导入
import { specificExport, anotherExport } from './module.js';
// 默认导入
import defaultExport from './default-module.js';
// 命名空间导入
import * as namespace from './utils.js';
// 混合导入
import defaultExport, { namedExport } from './mixed.js';
// 只导入模块（用于副作用）
import './polyfills.js';
`,
// 2. 动态导入（返回Promise）
dynamicImport: `
// 条件加载
if (featureFlags.useAdvanced) {
const advancedModule = await import('./advanced.js');
advancedModule.advancedFeature();
}
// 懒加载
button.addEventListener('click', async () => {
const module = await import('./dialog.js');
module.openDialog();
});
// 并行加载多个模块
const [moduleA, moduleB] = await Promise.all([
import('./module-a.js'),
import('./module-b.js')
]);
`,
// 3. 导入的实时绑定
liveBindings: `
// exporter.js
export let counter = 0;
export function increment() { counter++; }
// importer.js
import { counter, increment } from './exporter.js';
console.log(counter); // 0
increment();
console.log(counter); // 1 - 实时更新！
`,
// 4. 静态分析友好的模式
staticAnalysisFriendly: `
// 明确的依赖关系，便于tree shaking
import { functionA, functionB } from './utils.js';
// 未使用的functionC会被tree shaking移除
// 副作用导入明确标记
import 'core-js/stable'; // 明确的polyfill引入
`
};
}三、引擎实现与性能特性的深度对比
3.1 CommonJS的运行时特性分析
javascript
class CommonJSRuntimeAnalysis {
constructor() {
this.performanceCharacteristics = {
// 1. 同步加载的性能影响
synchronousLoading: `
// 模块加载是同步的，会阻塞事件循环
const start = Date.now();
const heavyModule = require('./cpu-intensive-module.js');
const end = Date.now();
console.log(\`模块加载耗时: \${end - start}ms\`);
`,
// 2. 缓存机制的内存使用
cachingMechanism: `
// 模块缓存的内存分析
const memoryUsage = process.memoryUsage();
require('./large-module.js');
const newMemoryUsage = process.memoryUsage();
console.log('内存增长:',
newMemoryUsage.heapUsed - memoryUsage.heapUsed, 'bytes');
// 重复require不会增加内存
require('./large-module.js');
const finalMemoryUsage = process.memoryUsage();
console.log('重复加载内存:',
finalMemoryUsage.heapUsed - newMemoryUsage.heapUsed); // 基本为0
`,
// 3. 循环依赖的运行时解析
circularDependencyRuntime: `
// 创建循环依赖分析器
class CircularDependencyTracker {
constructor() {
this.loadingModules = new Set();
this.dependencyGraph = new Map();
}
trackRequire(modulePath) {
if (this.loadingModules.has(modulePath)) {
console.warn(\`🚨 检测到循环依赖: \${modulePath}\`);
this.logDependencyCycle(modulePath);
}
this.loadingModules.add(modulePath);
// 模拟模块执行
const originalRequire = Module.prototype.require;
Module.prototype.require = function(id) {
const childPath = require.resolve(id);
this.trackDependency(modulePath, childPath);
return originalRequire.call(this, id);
};
}
}
`,
// 4. 动态特性的性能代价
dynamicFeaturesCost: `
// 动态require的性能测试
function benchmarkDynamicRequire() {
const iterations = 1000;
const dynamicModules = ['moduleA', 'moduleB', 'moduleC'];
console.time('动态require');
for (let i = 0; i < iterations; i++) {
const moduleName = dynamicModules[i % dynamicModules.length];
const module = require(\`./\${moduleName}.js\`);
module.execute();
}
console.timeEnd('动态require');
// 对比静态require
const moduleA = require('./moduleA.js');
const moduleB = require('./moduleB.js');
const moduleC = require('./moduleC.js');
console.time('静态require');
for (let i = 0; i < iterations; i++) {
const module = [moduleA, moduleB, moduleC][i % 3];
module.execute();
}
console.timeEnd('静态require');
}
`
};
}
}3.2 ES6模块的编译时优化特性
javascript
class ES6ModuleOptimization {
static optimizationFeatures = {
// 1. 静态分析的威力
staticAnalysis: `
// 编译时即可确定的依赖图
import { a } from './module-a.js'; // ✅ 静态可分析
import { b } from './module-b.js'; // ✅ 静态可分析
// 以下代码在编译时就可以构建完整的依赖树
// 这使得tree shaking成为可能
// 对比动态导入（部分静态分析）
if (condition) {
import('./module-c.js'); // ⚠️ 动态部分，有限的分析
}
`,
// 2. Tree Shaking机制
treeShakingMechanism: `
// math-utils.js
export function add(a, b) {
console.log('add被调用');
return a + b;
}
export function multiply(a, b) {
console.log('multiply被调用');
return a * b;
}
export function unusedHelper() {
console.log('这个函数不会被包含在bundle中');
return 'unused';
}
// main.js
import { add } from './math-utils.js';
// 打包后只会包含add函数
// multiply和unusedHelper会被移除
console.log(add(1, 2)); // 输出: add被调用 3
`,
// 3. 实时绑定的性能优势
liveBindingPerformance: `
// 创建大量模块实例的性能测试
class LiveBindingBenchmark {
async run() {
// ES6模块的实时绑定
const es6Start = performance.now();
for (let i = 0; i < 10000; i++) {
const { counter, increment } = await import('./es6-counter.js');
increment();
if (counter !== i + 1) {
console.error('实时绑定错误');
}
}
const es6Time = performance.now() - es6Start;
// CommonJS的值拷贝
const cjsStart = performance.now();
for (let i = 0; i < 10000; i++) {
const { counter, increment } = require('./cjs-counter.js');
const newCounter = increment();
if (newCounter !== i + 1) {
console.error('值拷贝错误');
}
}
const cjsTime = performance.now() - cjsStart;
console.log(\`ES6实时绑定: \${es6Time}ms\`);
console.log(\`CommonJS值拷贝: \${cjsTime}ms\`);
}
}
`,
// 4. 作用域提升优化
scopeHoisting: `
// 没有作用域提升的情况
// 每个模块都被包装在函数中
(function(module, exports, __webpack_require__) {
exports.someFunction = function() { /* ... */ };
});
// 作用域提升后（webpack等工具可以做到的优化）
// 所有模块代码被合并到同一个作用域
function someFunction() { /* ... */ }
// 减少了函数包装的开销，提升了运行性能
`
};
}四、工程化实践与迁移策略
4.1 混合使用场景的深度解析
javascript
class HybridModuleUsage {
constructor() {
this.interoperabilityPatterns = {
// 1. 在CommonJS中加载ES6模块
cjsImportESM: `
// CommonJS模块
async function loadESM() {
// 动态import是唯一方式
const esmModule = await import('./esm-module.js');
// 注意：不能使用解构
// const { namedExport } = await import('./esm-module.js'); // 可以，但不推荐
// 最佳实践：使用默认导入或命名空间
const defaultExport = await import('./esm-module.js');
const namespace = await import('./esm-module.js');
return {
default: defaultExport.default,
named: namespace.namedExport
};
}
// 错误示例
// import { something } from './esm-module.js'; // SyntaxError
// const esmModule = require('./esm-module.js'); // Error
`,
// 2. 在ES6模块中加载CommonJS模块
esmImportCJS: `
// ES6模块
import cjsDefault from './cjs-module.cjs';
import * as cjsNamespace from './cjs-module.cjs';
// CommonJS模块会被当作默认导出
console.log(cjsDefault); // 整个module.exports对象
console.log(cjsNamespace.default); // 同样的对象
// 注意：不能直接命名导入CommonJS的导出
// import { namedExport } from './cjs-module.cjs'; // 可能不工作
// 解决方案：使用解构
const { namedExport } = cjsDefault;
`,
// 3. 双模式包的最佳实践
dualModePackage: `
// package.json配置
{
"name": "dual-mode-package",
"type": "module", // 新的Node.js配置
"main": "./dist/index.cjs", // CommonJS入口
"exports": {
"import": "./dist/index.js", // ES模块入口
"require": "./dist/index.cjs", // CommonJS入口
"default": "./dist/index.js" // 回退
},
"scripts": {
"build": "rollup -c", // 同时生成两种格式
"build:cjs": "tsc --module commonjs --outDir dist/cjs",
"build:esm": "tsc --module esnext --outDir dist/esm"
}
}
// 源码使用ES6模块编写
// src/index.js
export function mainFunction() { /* ... */ }
export const helper = { /* ... */ };
// 构建工具配置（Rollup示例）
// rollup.config.js
export default [
{
input: 'src/index.js',
output: {
file: 'dist/index.js',
format: 'esm'
}
},
{
input: 'src/index.js',
output: {
file: 'dist/index.cjs',
format: 'cjs'
}
}
];
`,
// 4. 条件性模块加载策略
conditionalLoading: `
// 现代加载器实现
class SmartModuleLoader {
async loadModule(modulePath) {
try {
// 首先尝试ES6模块
if (this.supportsESM()) {
return await import(modulePath);
}
// 回退到CommonJS
return this.requireFallback(modulePath);
} catch (error) {
// 模块格式检测失败的处理
return this.handleModuleError(error, modulePath);
}
}
supportsESM() {
// 检测环境是否支持ES6模块
return typeof window !== 'undefined' ||
(typeof process !== 'undefined' &&
parseInt(process.versions.node.split('.')[0]) >= 12);
}
requireFallback(path) {
// 在ESM上下文中安全地使用require
if (typeof require !== 'undefined') {
return require(path);
}
throw new Error('require is not available in this environment');
}
}
`
};
}
}4.2 性能优化与调试技巧
javascript
class ModulePerformanceDebugger {
constructor() {
this.debuggingTools = {
// 1. 模块加载时间分析
loadTimeAnalysis: `
// CommonJS加载时间追踪
const originalRequire = Module.prototype.require;
Module.prototype.require = function(id) {
const start = performance.now();
const result = originalRequire.call(this, id);
const end = performance.now();
console.log(\`📦 CommonJS加载 \${id}: \${(end - start).toFixed(2)}ms\`);
return result;
};
// ES6模块加载时间追踪
const originalImport = import;
window.import = function(specifier) {
const start = performance.now();
return originalImport(specifier).then(module => {
const end = performance.now();
console.log(\`🚀 ES6加载 \${specifier}: \${(end - start).toFixed(2)}ms\`);
return module;
});
};
`,
// 2. 依赖图可视化
dependencyGraph: `
class DependencyMapper {
constructor() {
this.graph = new Map();
this.circularDependencies = new Set();
}
trackCommonJSDependencies() {
const originalRequire = Module.prototype.require;
Module.prototype.require = function(id) {
const parent = this.filename;
const child = require.resolve(id);
this.addDependency(parent, child);
return originalRequire.call(this, id);
};
}
trackESMDependencies() {
// 通过拦截import.meta.url来追踪
const originalPrepare = Module.prototype.prepare;
Module.prototype.prepare = function() {
const parent = this.filename;
// 解析import语句获取子依赖
this.parseImports().forEach(child => {
this.addDependency(parent, child);
});
return originalPrepare.call(this);
};
}
generateGraphviz() {
let dot = 'digraph Dependencies {\\n';
for (const [parent, children] of this.graph) {
for (const child of children) {
dot += \` "\${parent}" -> "\${child}"\\n\`;
}
}
dot += '}';
return dot;
}
}
`,
// 3. 内存使用监控
memoryMonitoring: `
class ModuleMemoryProfiler {
constructor() {
this.snapshots = new Map();
this.moduleSizes = new Map();
}
takeSnapshot(label) {
if (typeof performance !== 'undefined' && performance.memory) {
this.snapshots.set(label, {
usedJSHeapSize: performance.memory.usedJSHeapSize,
totalJSHeapSize: performance.memory.totalJSHeapSize,
timestamp: Date.now()
});
}
if (typeof process !== 'undefined' && process.memoryUsage) {
this.snapshots.set(label, {
...process.memoryUsage(),
timestamp: Date.now()
});
}
}
compareSnapshots(snapshotA, snapshotB) {
const snapA = this.snapshots.get(snapshotA);
const snapB = this.snapshots.get(snapshotB);
if (!snapA || !snapB) return null;
const differences = {};
for (const key in snapA) {
if (key !== 'timestamp') {
differences[key] = snapB[key] - snapA[key];
}
}
return differences;
}
monitorModuleLoad(modulePath) {
this.takeSnapshot(\`before_\${modulePath}\`);
// 加载模块...
this.takeSnapshot(\`after_\${modulePath}\`);
const diff = this.compareSnapshots(
\`before_\${modulePath}\`,
\`after_\${modulePath}\`
);
this.moduleSizes.set(modulePath, diff);
}
}
`
};
}
}五、现代工具链与构建优化
5.1 构建工具的模块处理策略
javascript
class BuildToolStrategies {
static toolSpecificOptimizations = {
// 1. Webpack的模块处理
webpack: `
// webpack.config.js
module.exports = {
mode: 'production',
optimization: {
// 启用作用域提升
concatenateModules: true,
// 更激进的tree shaking
usedExports: true,
sideEffects: false
},
module: {
rules: [
{
test: /\\.js$/,
// 强制使用ES6模块语法进行解析
parser: {
amd: false,
commonjs: false,
system: false,
harmony: true
}
}
]
},
experiments: {
// 支持顶层await
topLevelAwait: true
}
};
// package.json标记副作用
{
"name": "my-package",
"sideEffects": [
"**/*.css",
"**/*.scss",
"./src/polyfill.js"
]
}
`,
// 2. Rollup的ESM优先策略
rollup: `
// rollup.config.js
export default {
input: 'src/index.js',
output: [
{
file: 'dist/index.esm.js',
format: 'esm',
// ES模块特定的优化
exports: 'named',
sourcemap: true
},
{
file: 'dist/index.cjs.js',
format: 'cjs',
exports: 'auto'
}
],
plugins: [
// 解析node_modules中的ES模块
nodeResolve({
preferBuiltins: true,
exportConditions: ['module', 'import', 'require']
}),
// CommonJS转ES模块
commonjs({
strictRequires: true,
requireReturnsDefault: 'auto'
})
],
// 显式声明外部依赖
external: ['react', 'react-dom']
};
`,
// 3. Vite的ESM原生开发体验
vite: `
// vite.config.js
export default {
// 开发服务器基于原生ES模块
server: {
// 不需要打包，直接提供ES模块
},
build: {
// 生产构建使用Rollup
rollupOptions: {
output: {
// 代码分割策略
manualChunks: {
vendor: ['react', 'react-dom'],
utils: ['lodash', 'moment']
}
}
}
},
optimizeDeps: {
// 预构建CommonJS依赖
include: ['some-commonjs-package']
}
};
// Vite的模块解析策略
// 1. 开发时：原生ES模块 + 按需编译
// 2. 构建时：Rollup打包 + 优化
`,
// 4. TypeScript的模块配置
typescript: `
// tsconfig.json
{
"compilerOptions": {
// 不同的模块输出格式
"module": "esnext", // 开发：ES模块
"moduleResolution": "node", // 模块解析策略
"target": "es2015", // 目标ES版本
"lib": ["es2020", "dom"],
// 输出配置
"outDir": "./dist",
"declaration": true,
"declarationMap": true,
// 模块互操作性
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true
},
"include": ["src/**/*"],
"exclude": ["node_modules", "dist"]
}
// 构建脚本
// "build": "tsc --module commonjs && tsc --module esnext --outDir dist/esm"
`
};
}六、决策框架：如何选择合适的模块系统
基于以上深度分析，我们创建了一个科学的决策框架：
javascript
class ModuleSystemDecisionFramework {
constructor() {
this.decisionMatrix = {
criteria: [
{
name: '目标环境',
weight: 0.3,
questions: [
'主要运行在浏览器还是Node.js？',
'需要支持旧版本Node.js吗？',
'目标用户的浏览器支持情况如何？'
],
recommendations: {
'现代浏览器+Node.js 14+': 'ES6模块',
'旧版本Node.js': 'CommonJS',
'混合环境': '双模式包'
}
},
{
name: '性能要求',
weight: 0.25,
questions: [
'需要tree shaking优化包大小吗？',
'模块加载性能是否关键？',
'需要实时绑定的特性吗？'
],
recommendations: {
'包大小敏感': 'ES6模块',
'启动时间敏感': '需要具体分析',
'需要实时更新': 'ES6模块'
}
},
{
name: '开发体验',
weight: 0.2,
questions: [
'团队对哪种语法更熟悉？',
'需要静态类型检查吗？',
'构建工具链的成熟度如何？'
],
recommendations: {
'TypeScript项目': 'ES6模块',
'传统Node.js项目': 'CommonJS',
'现代前端栈': 'ES6模块'
}
},
{
name: '生态系统',
weight: 0.15,
questions: [
'依赖的第三方库主要使用什么格式？',
'需要与现有CommonJS代码互操作吗？',
'计划发布到npm吗？'
],
recommendations: {
'依赖主要是ESM': 'ES6模块',
'依赖主要是CJS': 'CommonJS或双模式',
'发布公共包': '双模式'
}
},
{
name: '长期维护',
weight: 0.1,
questions: [
'项目的预期生命周期？',
'团队的技术演进路线？',
'迁移成本是否可接受？'
],
recommendations: {
'长期项目': 'ES6模块',
'短期原型': '根据团队熟悉度选择',
'渐进迁移': '双模式策略'
}
}
]
};
}
evaluateProject(projectContext) {
const scores = {
esm: 0,
cjs: 0,
dual: 0
};
this.decisionMatrix.criteria.forEach(criterion => {
const answer = projectContext[criterion.name];
const recommendation = criterion.recommendations[answer];
if (recommendation === 'ES6模块') scores.esm += criterion.weight;
else if (recommendation === 'CommonJS') scores.cjs += criterion.weight;
else if (recommendation === '双模式包') scores.dual += criterion.weight;
});
const maxScore = Math.max(scores.esm, scores.cjs, scores.dual);
if (scores.esm === maxScore) return { recommendation: 'ES6模块', confidence: scores.esm };
if (scores.cjs === maxScore) return { recommendation: 'CommonJS', confidence: scores.cjs };
return { recommendation: '双模式包', confidence: scores.dual };
}
}
// 使用决策框架
const framework = new ModuleSystemDecisionFramework();
const myProject = {
'目标环境': '现代浏览器+Node.js 14+',
'性能要求': '包大小敏感',
'开发体验': '现代前端栈',
'生态系统': '发布公共包',
'长期维护': '长期项目'
};
const decision = framework.evaluateProject(myProject);
console.log('模块系统推荐:', decision);