一、基础对比表

• ✅ 静态导入/导出结构
• ✅ 天然支持 Tree Shaking
• ⚡ 浏览器可直接使用

二、语法差异 - 开发者最痛的点！

"为什么我的 ESM 模块总是报错？" "CommonJS 的 require 为啥在 ESM 中不工作？"

// ===== CommonJS：被动接受的习惯 =====
// 引入模块必须放顶层，不能在条件/循环中
const obj = require;// 同步阻塞
// 导出方式混乱
module.exports = { a,b };// 主要方式
exports.c =;// 第二种方式
// ===== ES Module：标准化但学习成本高 =====
// 必须放在顶层！否则报错，import obj from './module';// 默认导入
// 动态引入需要 await
const dynamicMod = await import;/* 常见错误场景 */
1. 在 ESM 中使用 require
TypeError: Cannot use 'in' operator to search for 'default' in undefined
2. 在 CJS 中使用 import
SyntaxError: Unexpected token 'import'
3. 混用 __dirname 和 import.meta.url
"Can't find variable: __dirname"

. 常见迁移问题方法表格

ESM 项目需要兼容旧 CJS 库

1. 安装 @babel/plugin-transform-modules-commonjs 转换器
2. 或者配置 webpack externals 排除这些依赖

如何处理 _filename 和 _dirname? import { fileURLToPath } from 'url';const _filename = fileURLToPath;不过，const _dirname = path.dirname;

"为什么我的状态共享不生效？为什么修改了值却看不到变化？"

// ===== CommonJS：值拷贝带来的潜在问题 =====
// counter.js let count =;function add { count++;} module.exports = { count,add };// main.js const { count,add } = require;console.log，// add;console.log，// ⚠️仍为
// ❌ 如果其他模块也 require，count 不会同步更新！话说回来，// ===== ES Module：实时绑定带来的确定性 ====
// counter.mjs export let count =;说起来，export function add { count++;
}
// main.mjs import { count,add } from './counter.mjs';console.log，// add;console.log，// ✅
/* ⚠️ 注意事项 */
1. ESM 的 export const 是只读的！TypeError: Assignment to read-only binding.


CJS 的 exports.count++ 不会反映到其他引用者！怎么说呢，其他模块看到的是快照值。

"怎么选正确的风格？"

• CommonJS适合：配置文件、单例状态管理、动态路由等需要确定初始值且不频繁变化的场景。
• ES Module适合：状态驱动应用、响应式编程、库封装等需要实时数据流同步的场景。不过，

. 加载时机差异 - 性能与灵活性的权衡！

"为什么我的大型应用启动这么慢？如何调整加载速度，"

/* 性能对比测试 */
const testModuleLoadingTime = async => {
const startCjs = Date.now;require，console.log-startCjs);
const startEsm = Date.now;
await import;
console.log-startEsm);

};testModuleLoadingTime;

// 输出示例：
// CJS time: 47ms
// ESM time: 19ms 

/* 常用方法 */
1. 对于大型项目：
- 用 ES Module 做基础框架层
- 用 CommonJS 做业务特有配置


对于微前端架构：
✅ ES Module 天然支持 code-splitting
❌ CommonJS 需要复杂 webpack 配置才能做到相似效果


/* ⚠️ 注意事项 */
- 在 Node.js 中，ESM 动态 import 是 promise-based 的！const modA = await import;// 注意异步上下文，const modB = await modA.loadDependency;// 嵌套等待，


在浏览器中，script type=module 有严格执行顺序要求！ 


+++++ HTML.md

divclasscontainerdivclassheaderhHeader/hheader/divmain rolemain contenteditablefalse divclassarticle article-content p文章内容/p/article divclassaside aside-content p侧边栏内容/p/aside/divmain/footer Footer footer/divcontainerscriptsrcpath/to/script.js typeapplication/javascript defer defer/scriptlink relstylesheet hrefpath/to/styles.css titleStylesheet/scriptsrchttps://use.fontawesome.com/releases/v/all.min.jstypeapplication/javascript integrityshaX-CURZrZyBvVzPwGgPwqzQqkUzXnZzXxXxXxXxXXXXXXX crossoriginanonymous/scriptlink relstylesheet hrefhttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/css/all.min.css integrityshaXXXXXXXXXXXXXXXXXXX crossoriginanonymous/scripthref=https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.jstypeapplication/javascript integrityshaXXXXXXXXXXXXXXXXXXX crossoriginanonymous/scriptlink relstylesheet hrefhttps://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css integrityshaXXXXXXXXXXXXXXXXX crossoriginanonymous/meta charsetUTF-metanameviewport contentwidth=device-widthinitial-scale=/meta link relicon href=favicon.ico/meta namekeywords contentkeywords/meta nameauthor contentauthorname/meta namedescription contentpage description/metapropertyogtitle contentpage title/metapropertyogdescription contentpage description/metapropertyogimage contentsocial share image url/propertypage titlepropdescription page description/propertypage titlepropertyarticlepublishermetapropertypage titlepropdescription page description/propertypage titletitlePage Title/titlenavnav navbar-nav nav-link active aria-currentpage Home/a nav-link About/a nav-link Services/a nav-link Contact/a/navnav navbar-expand-lg bg-light container-fluidnavbar-brand Page Title/button navbar-toggler collapsed aria-controlsnavbarNav aria-expandedfalse aria-labelToggle navigationspan navbar-toggler-icon/button/collapsenavbar-collapse col-md-autoidnavbarNav ulnav navbar-nav li nav-item dropdown showdropdown-toggle nav-link dropdown-toggle disabled aria-expandedtrue hrefdata-bs-toggledropdown rolebuttonaria-haspopuptruearia-expandedfalseMenu/dropdown-menu showaria-labelledbydropdownMenubuttonnav-link activeHome/a dropdown-divider/dropdown-item About/a dropdown-item Services/a dropdown-item Contact/a/dropdown-menu/show/divbutton btn btn-primary my-sm-btn btn-block btn-lgMy Button/buttonform form-inline my-sm-form form-group mb-sm-form-control input-lg placeholderSearch/button typesubmitbtn btn-primarySearch/button/form/inputtypecheckboxchecked nameexample valueon changeeventchangechecked=trueinputtyperadio namegroup checked valueoptionchangeeventchangechecked=trueinputtypefile acceptimage/*inputtypepassword required placeholderPasswordinputtypedate minmaxvalueinputtypesubmit valueSubmitbutton typesubmit formactionprocess.php methodpost inputtypecheckboxnameaccept checked valueYesI accept termslabel foracceptAccept Terms/labelforaccept inputtypereadonly valueReadonly fieldselect form-control multiple optionValue Option ValueoptionValue Option ValueoptionValue Option Value/selecttextarea form-control rowscols placeholderTextarea/inputtypenumber minmaxstepvalueinputtypecolor valueselectmultiple size optionvalueoptionselected selectedvalueselectoptgroup labelGroup Name optionGroup Item optionGroup Item/selectfieldsetsample-fieldsetlegendSample legendlabelforemailEmail:/labelinput typeemail required placeholderEnter emailidemail/lablelforphonePhone:/labelinput typephone required placeholderEnter phoneidphone/lablelsubmit buttonSubmit/button/fieldsettable table-striped table-hover ad tr thHeader th thHeader th/th/tradtbody tr tdData td tdData td/tr tbody/table!-- SVG Example --svg heightwidth viewBox x y preserveAspectRationone circle cxcy r fillred/svgtable table-bordered borderprimary captionTable Captionad tr thScope Header th thScope Header th/th/tradtbody tr tdData td tdData td/tr tbody/tablefigure img srcimage.jpg altImage DescriptionfigcaptionImage Caption/figureimg srcsetimagesrcsmall.jpg x imagesrcmedium.jpg x imagesrclarge.jpg x altResponsive Image/srcsetimagesrcsmall.jpg x imagesrcmedium.jpg x imagesrclarge.jpg x altResponsive Image/srcsethrefmailto: Us/hreftel:+infoNumberCall Ushreflink relalternate hreflangzh hrefzh-version.htmlChinese Version/linka hrefhttps://example.comExample Link/adiv classalert alert-warningalert-warning rolealert This is an important alert message./divbutton classbtn btn-danger disabledDisabled Button/buttonprogress progress-bar progress-bar-striped progress-bar-animated bg-success roleprogressbar aria-valueminaria-valuenowaria-valueminwidthprogress-bar progress-bar-striped progress-bar-animated bg-danger roleprogressbar aria-valueminaria-valuenowaria-valueminwidthcanvas canvas-chart js-chart-container/canvasvideo controls autoplay loop posterposter-image.mpmpvideo source srctypevideo/webmp video source srctypevideo/ogg video source srctypevideo/mpvideoaudio controls autoplay loop audio source srctypeaudio/wava audio source srctypeaudio/mpegaudio source srctypeaudio/oggautodiv dialog openDialog Title buttonClose Close/bottomdialogdialog opendialog-title Dialog Title buttonClose Close/bottomdialogform methodpost actionprocess.php input typetext nameusernameplaceholderUsername input typesubmit valuesubmitformform methodpost actionprocess.php input typetext nameusernameplaceholderUsername input typesubmit valuesubmitformselectmultiple selectmultiple size select optgroup labelOption Group optionOption ValueoptionOption Value/selectselectmultiple selectmultiple size select optgroup labelOption Group optionOption ValueoptionOption Value/selectoutput forslider result/outputrange minmaxstepvaluenameslider idslider oninputoutput.value=input.valueoutputresult/input range minmaxstepvaluenameslider oninputoutput.value=input.value/outputresult/detailssummaryDetails Summary/detailsdetails summaryDetails Summary/detailsdetails summaryDetails Summary details Details Content/detailsdetails summaryDetails Summary details Details Content details Details Sub-content/detailsdetailssummaryDetails Summary details Details Content details Details Sub-content detailssummaryDetails Sub-sub-summary details Sub-sub-content/detailssummaryDetails Summary details Details Content details Details Sub-content detailssummaryDetails Sub-sub-summary details Sub-sub-content/detailstime datetimeISODate Time/timeciteBook by Author/citeaddressAddress Informationaddressabbr titleWorld Health OrganizationWHO/codeHTML Code/codekbdCtrl+Shift+K/kbdmarkHighlighted Text/markdelDeleted Text/delemDeleted Text/delemEmphasized Text/iinsInserted Text/inssupSuperscriptsup/subSubscriptsublink targetblankhrefExternal Link/linklink targetblankhrefExternal Link/linkblockquoteciteSourceBlockquote Sourceblockquoteblockquote citeSourceBlockquote Sourceblockquoteblockquote citeSourceBlockquote SourceblockquotequoteblockquoteciteSourceBlockquote SourceblockquotequoteblockquoteciteSourceBlockquote Sourceblockquotequotedetailopen summarySummary detailContentdetailopen summarySummary detailContentdetailsummarySummary detailContentdetailopen summarySummary detailContentdetailopen summarySummary detailContentsummarySummary detailContentsummarySummary detailContentsummarySummary detailContentsummarySummary detailContentsummartable-responsive table-responsive-xstable-responsive-table ad tr thHeader th/th/trad tbody tr tdData td/tbodytable-responsive-tabletable-responsive-table ad tr thHeader th/th/trad tbody tr tdData td/tbodytable-responsive-tabletablesortable data-ordercolcolcol data-sort-ignore true ad tr sortabledescending sortableascending sortableunsorted sortableunsortedsortablesortablesortablesortablesortableunexpandable expandabledescendingascendingunsortedsortablesortablesortablesortablesortablestable-simpletable adtrthHeader A/ththHeader B/th/th/tradtbodytrtddatadatatddatadatadata/data datadata/data datadata/data datadata/data data datadata/data datadata/data datadatadatadatadatadatadatadatadata/data datatdatatatdatatatdatatatdatatatdatatatdatatatdata/data datatdatatatdatatatdata tatata tatata tatata tatata tatata tatata tatata tdata/tabletable-simpletable-simple table adtrthHeader A/ththHeader B/th/th/tradtbodytrtddatadatatddatadatadata/data datadata/data datadata/data datadata/Data Data Data Data Data Data Data Data Data Data/Data Datacode language-html pre code code language-html pre code code language-html pre code code language-html pre code code language-html pre codemetanameviewportcontentwidth=device-widthinitial-scale=/meta linkreliconhref=favicon.ico/linklinkrelstylesheethrefstyles.css/linklinkrelstylesheetprefetchhrefstyles.cssasstylecrossoriginanonymous