前端模块化开发标准全面解析--ESM获得绝杀

鱼樱前端2025-03-26 0:33

大家好，我是鱼樱！！！

关注公众号【鱼樱AI实验室】持续每天分享更多前端和AI辅助前端编码新知识~~喜欢的就一起学反正开源至上，无所谓被诋毁被喷被质疑文章没有价值~~~坚持自己观点

一个城市淘汰的自由职业-农村前端程序员（虽然不靠代码挣钱，写文章就是为爱发电），兼职远程上班目前！！！热心坚持分享~~~

目录

  1. 模块化背景与演进
  2. 主流模块化标准
  3. 标准对比与现状
  4. 最佳实践建议

背景与演进

JavaScript模块化发展历程：

  1. 原始阶段（2009年前）：全局变量污染、依赖管理混乱
  2. 社区方案阶段（2009-2015）：CommonJS/AMD/CMD等方案涌现
  3. 标准统一阶段（2015+）：ES Module成为语言标准

主流模块化标准

IIFE（立即调用函数表达式）已淘汰

javascript 复制代码 
// 定义模块
var module = (function() {
  var privateVar = 'secret';
  return {
    publicMethod: function() {
      return privateVar;
    }
  };
})();

// 使用模块
module.publicMethod();

特点：

  • 通过闭包实现作用域隔离
  • 无依赖管理能力
  • 典型方案：早期jQuery插件

CommonJS

javascript 复制代码 
// math.js
const add = (a, b) => a + b;
module.exports = { add };

// app.js
const { add } = require('./math');
console.log(add(2, 3));

核心特征：

  • require() 同步加载
  • module.exports 导出
  • 主要场景：Node.js环境
  • 现代应用：仍广泛用于Node.js，通过打包工具用于浏览器

AMD（Asynchronous Module Definition）逐渐淘汰

javascript 复制代码 
// 定义模块
define(['dep1', 'dep2'], function(dep1, dep2) {
  return {
    doSomething: function() {
      return dep1.action() + dep2.action();
    }
  };
});

// 加载模块
require(['module'], function(module) {
  module.doSomething();
});

核心特征：

  • 浏览器优先的异步加载
  • 典型实现：RequireJS
  • 现状：ES Module普及后使用率大幅下降

CMD（Common Module Definition）已淘汰

javascript 复制代码 
define(function(require, exports, module) {
  var dep1 = require('./dep1');
  exports.action = function() {
    return dep1.doSomething();
  };
});

核心差异：

  • 延迟执行（vs AMD提前执行）
  • 典型实现：Sea.js
  • 现状：2016年后基本退出市场

UMD（Universal Module Definition）

javascript 复制代码 
(function(root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD
    define(['dep'], factory);
  } else if (typeof module === 'object' && module.exports) {
    // CommonJS
    module.exports = factory(require('dep'));
  } else {
    // 全局变量
    root.myModule = factory(root.dep);
  }
})(this, function(dep) {
  // 模块逻辑
  return { /* ... */ };
});

核心价值：

  • 兼容AMD/CommonJS/全局变量
  • 现代应用：库开发仍需考虑多环境兼容时使用

ES Module（ECMAScript Modules）

javascript 复制代码 
// 导出模块
export const name = 'module';
export default function() { /* ... */ };

// 导入模块
import myModule, { name } from './module.js';

核心优势：

  1. 静态解析（编译时加载）
  2. 浏览器原生支持
  3. 支持Tree-shaking
  4. 循环依赖处理更优

现代扩展：

javascript 复制代码 
// 动态导入
const module = await import('./module.js');

// 聚合导出
export * from './base.js';

对比与现状

标准 加载方式 环境 静态分析 现状
IIFE 同步 浏览器 ❌ 淘汰
CommonJS 同步 Node ❌ Node主流
AMD 异步 浏览器 ❌ 逐渐淘汰
CMD 延迟 浏览器 ❌ 淘汰
UMD 兼容 通用 ❌ 存量使用
ES Module 静态 全平台 ✅ 绝对主流

2023年现状：

  1. 必须掌握：ES Module（100%项目使用）、CommonJS（Node.js开发）
  2. 了解即可：UMD（库开发兼容需求）、AMD（旧系统维护）
  3. 已淘汰：IIFE、CMD

最佳实践

  1. 新项目 ：全面采用ES Module

    html 复制代码 
    <script type="module" src="app.js"></script>

  2. 库开发：同时提供ES Module和UMD版本

  3. Node.js：逐步迁移.mjs文件，混合使用过渡期

  4. 构建工具：统一用ES Module源码，通过Webpack/Rollup转换

未来趋势：

  • 浏览器原生Import Maps普及
  • ESM逐步替代CommonJS成为Node默认标准
  • 基于ESM的Bundleless架构兴起（Vite、Snowpack）

CommonJS vs ES Module 核心区别解析

一、模块加载机制

特性 CommonJS ES Module
加载方式 同步加载（运行时） 异步加载（编译时解析）
执行时机 遇到require立即执行 预解析依赖，延迟执行
动态加载 支持任意位置require() 顶层静态import，动态需用import()

示例对比：

js 复制代码 
 
// CommonJS 动态加载
if (condition) {
  const module = require('./moduleA');
}

// ES Module 报错（静态解析）
if (condition) {
  import module from './moduleA'; // SyntaxError
}

二、模块导出本质

特性 CommonJS ES Module
导出类型 值的拷贝（副本） 值的引用（实时绑定）
导出可变性 导出后修改不影响已导入值 导出值变化会实时影响所有导入
默认导出 module.exports = {} export default {}

内存示意图：

css 复制代码 
 
CommonJS：
模块A exports → { count: 1 }（内存地址X）
模块B require得到副本 → { count: 1 }（内存地址Y）

ES Module：
模块A exports → { count: 1 }（内存地址X）
模块B import得到引用 → 指向内存地址X

三、静态分析与优化

特性 CommonJS ES Module
静态可分析性 动态特性难以静态分析 完全支持静态分析
Tree-shaking 基本不可用 完美支持
循环依赖处理 可能得到未完成模块 通过实时绑定安全处理

Tree-shaking示例：

js 复制代码 
 
// math.js
export function add(a, b) { return a + b }
export function unused() { /*...*/ }

// app.js
import { add } from './math.js'

// 打包后 unused 函数会被自动移除

四、运行时特性

特性 CommonJS ES Module
顶层this指向 指向module.exports undefined
严格模式 默认非严格模式 自动启用严格模式
变量污染 可能污染全局作用域 模块级作用域

五、环境支持

环境 CommonJS ES Module
Node.js 原生支持（.cjs） 需文件后缀.mjs或设置"type": "module"
浏览器 需打包工具转换 原生支持（<script type="module">）
Deno 不支持 原生支持

六、循环依赖处理对比

CommonJS场景：

js 复制代码 
 
// a.js
exports.loaded = false;
const b = require('./b');
console.log('在a中，b.loaded =', b.loaded);
exports.loaded = true;

// b.js
exports.loaded = false;
const a = require('./a');
console.log('在b中，a.loaded =', a.loaded);
exports.loaded = true;

// 输出结果：
// 在b中，a.loaded = false
// 在a中，b.loaded = true

ES Module场景：

js 复制代码 
 
// a.mjs
import { bLoaded } from './b.mjs';
export let aLoaded = false;
console.log('在a中，b.loaded =', bLoaded);
aLoaded = true;

// b.mjs
import { aLoaded } from './a.mjs';
export let bLoaded = false;
console.log('在b中，a.loaded =', aLoaded);
bLoaded = true;

// 输出结果：
// 在b中，a.loaded = false
// 在a中，b.loaded = true
// （但后续访问的aLoaded/bLoaded都是更新后的值）

七、现代化演进

  1. Node.js混合模式：

    json 复制代码 
     
// package.json
{
  "type": "module", // 默认ESM
  "scripts": {
    "start": "node --experimental-require-module main.mjs"
  }
}

  2. 浏览器直接加载ESM：

    js 复制代码 
     
<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
</script>

  3. 构建工具统一处理（Webpack/Vite）：

    js 复制代码 
     
// vite.config.js
export default {
  build: {
    target: 'esnext' // 生成纯ESM代码
  }
}

总结选择策略

  • 新项目：无脑选择ES Module
  • Node.js库：同时提供CJS和ESM双版本
  • 旧系统改造：逐步迁移策略
  • 浏览器兼容 ：现代浏览器直接使用ESM，旧浏览器通过<script nomodule>回退
相关推荐
C++ 老炮儿的技术栈8 分钟前
有符号变量与无符号变量的区别
服务器·开发语言·前端·数据结构·c++·算法·c
aixingpan18 分钟前
aixingpan.cn API开发文档：api_docs_bichart_natalvssecondary2接口指南
前端·php
MZ_ZXD00128 分钟前
【关注可白嫖源码】--课程设计--毕业设计-- 29210 Vue.js 3+Springboot中药材基本信息与图片查询系统
javascript·spring boot·课程设计·毕设·大作业·程序开发·毕设代做
liangshanbo121531 分钟前
Webpack Tree Shaking 面试题整理
前端·webpack·node.js
Ai-_Man1 小时前
您您这可以把Google AI Studio的多个会话比如说。左侧的多个会话一次性导出吗？不是单条会话里面的多次会对话。AI导出鸭
javascript·人工智能·ai·小程序·电脑
去伪存真1 小时前
从乱码到高精度检索：探矿业务中 TXT、Word、PDF 与网页的 RAG 清洗之道
前端·agent
两个西柚呀1 小时前
JS事件总结
前端·javascript·css
小狼154541 小时前
拼多多订单数据导出 CSV 实战：接口分页、字段平铺与 5 个数据坑，多多开票助手
java·前端·javascript
搬砖的小码农_Sky1 小时前
AI Agent：Node.js和浏览器运行环境的本质区别
javascript·node.js·人机交互
ss2731 小时前
AI全栈实战 | 2.2-02 React 思维模型：数据不可变 vs Vue 数据可变，两种哲学把复杂度推给谁
前端·vue.js·react.js
热门推荐
01历年考研数学一、数学二、数学三真题试卷及答案PDF02国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）03GitHub 镜像站点04Telegram APK 下载安装完整指南 — 2026年最新05蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接06微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新072026 爱知・名古屋亚运会怎么看？直播平台+赛程安排分享082026 年 9 月国内外主流大模型横向硬核评测：价格、算力、业务场景全维度对比，GPT‑6 Astra横空出世09给AI一张“业务概念地图“：本体如何从哲学走向企业智能10jev-ultrafast 深度解析：7 秒订机票的浏览器 Agent 是如何炼成的