尧图建网站 尧图建网站 YAOTU WEB BUILD 免费咨询
ARTICLE DETAIL

资讯详情

深耕网站建设与建站编程的一线实战洞察。

common.js和es6中模块引l入的区别?

common.js和es6中模块引l入的区别? CommonJSCJS和 ES6 模块ESM是 JavaScript 中两套完全不同的模块规范它们在设计理念、加载机制、运行行为上都有本质区别。下面从核心差异 → 运行机制 → 实战影响​ 系统讲清楚。一、最核心的 10 个区别速览表对比项CommonJSES6 Module诞生背景Node.js 社区规范ECMAScript 官方标准加载方式运行时同步加载​编译期静态分析​导入语法require()import导出语法module.exportsexport是否静态❌ 动态✅ 静态是否支持 Tree Shaking❌ 不支持✅ 支持模块输出值的拷贝​值的实时引用活绑定​this 指向module.exportsundefined循环依赖返回“未完成副本”支持实时绑定顶层 await❌ 不支持✅ 支持ES2022二、加载机制的本质差异最重要✅ CommonJS运行时加载动态const fs require(fs); // 执行到这里才加载模块在代码执行阶段​ 才加载require是一个普通函数可以写在条件判断里if (Math.random() 0.5) { require(./a); } else { require(./b); }✅ 灵活❌ 无法静态分析✅ ES Module编译期静态解析import fs from fs;在代码执行前​ 就被解析import是语法不是函数不能动态写在 if 里// ❌ 报错 if (true) { import a from ./a; }✅ 可被引擎提前分析✅ 支持优化Tree Shaking三、导出的值拷贝 vs 实时绑定非常关键1️⃣ CommonJS值的拷贝// a.js let count 1; module.exports { count }; // main.js const { count } require(./a); count; console.log(count); // 2❗导出的 count 是值的快照2️⃣ ES Module实时绑定Live Binding// a.mjs export let count 1; // main.mjs import { count } from ./a.mjs; console.log(count); // 1如果 a.mjs 里改了count;main.mjs 中自动变化。✅ 这是 ESM 最反直觉但最重要的特性四、this 指向差异// CommonJS console.log(this module.exports); // true // ES Module console.log(this); // undefined✅ ESM 强制严格模式✅ 没有 module 对象五、循环依赖的处理方式CommonJS返回“半成品”// a.js exports.loaded false; const b require(./b); exports.loaded true; // b.js exports.loaded false; const a require(./a); console.log(a.loaded); // false❌ 可能读到未初始化的值ES Module支持实时绑定// a.mjs import { bLoaded } from ./b.mjs; export let aLoaded false; aLoaded true; // b.mjs import { aLoaded } from ./a.mjs; export let bLoaded false; bLoaded true;✅ 双方都能拿到最终正确值六、Tree Shaking 为什么只支持 ESM// utils.js export function a() {} export function b() {} // main.js import { a } from ./utils.js;✅ 打包工具能确定b没被用✅ 可以安全删除而 CommonJSmodule.exports { a, b };❌ 无法确定哪些属性会被访问❌ 不敢删七、Node.js 中的现实差异项目CommonJSES Module文件后缀.js.mjs或type: modulerequire✅❌默认import❌✅__dirname✅❌需手动拼顶层 await❌✅Node.js 中混合使用// ESM 中引入 CJS import cjs from ./cjs.cjs; // CJS 中引入 ESMNode 18 import(./esm.mjs).then(...);八、一句话总结**CommonJS 是为服务端设计的“运行时模块系统”ES Module 是为通用 JavaScript 设计的“编译期模块标准”。**✅新项目优先用 ES Module​✅库开发必须支持 ESM才能 Tree Shaking​✅Node 生态正在全面迁移到 ESM
返回列表