[{"data":1,"prerenderedAt":2731},["Reactive",2],{"article-20240323":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":7,"published":9,"categories":10,"slug":8,"body":12,"_type":2726,"_id":2727,"_source":2728,"_file":2729,"_extension":2730},"/articles/20240323","articles",false,"","ESModule与CommonJS互相引用的问题","2023/06/03",[11],"前端开发",{"type":13,"children":14,"toc":2717},"root",[15,23,54,94,100,105,134,146,166,214,220,225,267,280,287,311,450,472,622,637,696,737,746,775,783,809,814,819,849,980,996,1175,1220,1415,1423,1454,1467,1485,1493,1520,1570,1589,1789,1802,1829,1848,1917,1923,1959,1964,1972,1995,2061,2080,2095,2131,2150,2429,2444,2471,2488,2507,2589,2594,2620,2632,2673,2706,2711],{"type":16,"tag":17,"props":18,"children":20},"element","h2",{"id":19},"前言",[21],{"type":22,"value":19},"text",{"type":16,"tag":24,"props":25,"children":26},"p",{},[27,29,36,38,44,46,52],{"type":22,"value":28},"最近使用",{"type":16,"tag":30,"props":31,"children":33},"code",{"className":32},[],[34],{"type":22,"value":35},"Rollup",{"type":22,"value":37},"打包输出",{"type":16,"tag":30,"props":39,"children":41},{"className":40},[],[42],{"type":22,"value":43},"CJS",{"type":22,"value":45},"模块的代码，时不时会提示导入的模块是",{"type":16,"tag":30,"props":47,"children":49},{"className":48},[],[50],{"type":22,"value":51},"ESM",{"type":22,"value":53},"规范，需要使用动态导入的方式引入这个模块，这个问题引起了我的注意，所以决定深入研究一下。",{"type":16,"tag":55,"props":56,"children":57},"ul",{},[58,78],{"type":16,"tag":59,"props":60,"children":61},"li",{},[62,64,69,71,76],{"type":22,"value":63},"简单介绍",{"type":16,"tag":30,"props":65,"children":67},{"className":66},[],[68],{"type":22,"value":51},{"type":22,"value":70},"和",{"type":16,"tag":30,"props":72,"children":74},{"className":73},[],[75],{"type":22,"value":43},{"type":22,"value":77},"的原理",{"type":16,"tag":59,"props":79,"children":80},{},[81,86,87,92],{"type":16,"tag":30,"props":82,"children":84},{"className":83},[],[85],{"type":22,"value":51},{"type":22,"value":70},{"type":16,"tag":30,"props":88,"children":90},{"className":89},[],[91],{"type":22,"value":43},{"type":22,"value":93},"的互相引用问题",{"type":16,"tag":17,"props":95,"children":97},{"id":96},"cjs和esm的历史演变",[98],{"type":22,"value":99},"CJS和ESM的历史演变",{"type":16,"tag":24,"props":101,"children":102},{},[103],{"type":22,"value":104},"JavaScript一开始诞生是在浏览器上作为脚本语言使用的，当时在浏览器上并不存在模块的概念。它就像日本动漫里的男主角，刚转生到异世界时没有任何的武器和装备（不是龙傲天），所以说一开始的JavaScript也是不完善的，需要时间的历练，打怪升级学技能。",{"type":16,"tag":24,"props":106,"children":107},{},[108,110,116,118,124,126,132],{"type":22,"value":109},"直到Node.JS的诞生，让JavaScript能在服务端运行，同时Node.js社区的发展给JavaScript带来了模块化的概念，使用",{"type":16,"tag":30,"props":111,"children":113},{"className":112},[],[114],{"type":22,"value":115},"module.exports",{"type":22,"value":117},"导出和",{"type":16,"tag":30,"props":119,"children":121},{"className":120},[],[122],{"type":22,"value":123},"require",{"type":22,"value":125},"引入模块，这个规范叫做",{"type":16,"tag":30,"props":127,"children":129},{"className":128},[],[130],{"type":22,"value":131},"CommonJS",{"type":22,"value":133},"。它的出现使得服务端的JavaScript应用程序的开发更加规范化和标准化。",{"type":16,"tag":24,"props":135,"children":136},{},[137,139,144],{"type":22,"value":138},"由于",{"type":16,"tag":30,"props":140,"children":142},{"className":141},[],[143],{"type":22,"value":131},{"type":22,"value":145},"的引入模块原理是同步加载的方式，要是在浏览器端使用这个规范，则需要等待所有的模块加载完才能执行后面的代码。由于浏览器中的JavaScript引擎是单线程的，如果加载JavaScript模块的过程中，代码执行的时间过长，就会导致其他代码无法执行，从而影响整个页面的渲染和交互，最终影响了用户体验。因此，浏览器需要一种异步加载模块方式。",{"type":16,"tag":24,"props":147,"children":148},{},[149,151,157,159,164],{"type":22,"value":150},"在2015年的6月，",{"type":16,"tag":30,"props":152,"children":154},{"className":153},[],[155],{"type":22,"value":156},"ES6",{"type":22,"value":158},"标准正式推出，在这个标准里带来了JavaScript异步加载模块的",{"type":16,"tag":30,"props":160,"children":162},{"className":161},[],[163],{"type":22,"value":51},{"type":22,"value":165},"规范。",{"type":16,"tag":24,"props":167,"children":168},{},[169,174,176,182,184,190,192,197,199,205,206,212],{"type":16,"tag":30,"props":170,"children":172},{"className":171},[],[173],{"type":22,"value":51},{"type":22,"value":175},"，也叫做 ",{"type":16,"tag":30,"props":177,"children":179},{"className":178},[],[180],{"type":22,"value":181},"ECMAScript modules",{"type":22,"value":183},"或者",{"type":16,"tag":30,"props":185,"children":187},{"className":186},[],[188],{"type":22,"value":189},"ES modules",{"type":22,"value":191},"，是来自",{"type":16,"tag":30,"props":193,"children":195},{"className":194},[],[196],{"type":22,"value":156},{"type":22,"value":198},"规范里的模块化概念，使用",{"type":16,"tag":30,"props":200,"children":202},{"className":201},[],[203],{"type":22,"value":204},"import",{"type":22,"value":70},{"type":16,"tag":30,"props":207,"children":209},{"className":208},[],[210],{"type":22,"value":211},"export",{"type":22,"value":213},"关键字，来实现js的模块化导入和导出。",{"type":16,"tag":17,"props":215,"children":217},{"id":216},"esmodule和commonjs互相引用",[218],{"type":22,"value":219},"ESModule和CommonJS互相引用",{"type":16,"tag":24,"props":221,"children":222},{},[223],{"type":22,"value":224},"完全不同的两个规范，互相导入的话会导致什么情况呢？",{"type":16,"tag":24,"props":226,"children":227},{},[228,230,235,237,243,245,250,252,258,260,265],{"type":22,"value":229},"在继续之前，我们需要了解Node.js支持运行",{"type":16,"tag":30,"props":231,"children":233},{"className":232},[],[234],{"type":22,"value":51},{"type":22,"value":236},"规范的最低版本是：",{"type":16,"tag":30,"props":238,"children":240},{"className":239},[],[241],{"type":22,"value":242},"v13.2.0",{"type":22,"value":244},"，在之前的版本中，想要在node中使用",{"type":16,"tag":30,"props":246,"children":248},{"className":247},[],[249],{"type":22,"value":51},{"type":22,"value":251},"，需要添加",{"type":16,"tag":30,"props":253,"children":255},{"className":254},[],[256],{"type":22,"value":257},"--experimental-module",{"type":22,"value":259},"参数，在",{"type":16,"tag":30,"props":261,"children":263},{"className":262},[],[264],{"type":22,"value":242},{"type":22,"value":266},"版本之后可以直接使用。",{"type":16,"tag":24,"props":268,"children":269},{},[270,272,278],{"type":22,"value":271},"我将会使用Node.js",{"type":16,"tag":30,"props":273,"children":275},{"className":274},[],[276],{"type":22,"value":277},"v16.18.0",{"type":22,"value":279},"版本进行下面的测试，话不多说，立马进入。",{"type":16,"tag":281,"props":282,"children":284},"h3",{"id":283},"cjs导入esm模块",[285],{"type":22,"value":286},"CJS导入ESM模块",{"type":16,"tag":288,"props":289,"children":290},"ol",{},[291],{"type":16,"tag":59,"props":292,"children":293},{},[294,296,301,303,309],{"type":22,"value":295},"先新建一个",{"type":16,"tag":30,"props":297,"children":299},{"className":298},[],[300],{"type":22,"value":51},{"type":22,"value":302},"模块，文件名为： ",{"type":16,"tag":30,"props":304,"children":306},{"className":305},[],[307],{"type":22,"value":308},"esm.js",{"type":22,"value":310},"，代码如下：",{"type":16,"tag":312,"props":313,"children":317},"pre",{"className":314,"code":315,"language":316,"meta":7,"style":7},"language-js shiki shiki-themes github-dark","// esm.js\nexport const a = 1;\nexport const b = 2;\nexport function foo () {\n  return 3;\n}\n","js",[318],{"type":16,"tag":30,"props":319,"children":320},{"__ignoreMap":7},[321,333,369,399,423,441],{"type":16,"tag":322,"props":323,"children":326},"span",{"class":324,"line":325},"line",1,[327],{"type":16,"tag":322,"props":328,"children":330},{"style":329},"--shiki-default:#6A737D",[331],{"type":22,"value":332},"// esm.js\n",{"type":16,"tag":322,"props":334,"children":336},{"class":324,"line":335},2,[337,342,347,353,358,363],{"type":16,"tag":322,"props":338,"children":340},{"style":339},"--shiki-default:#F97583",[341],{"type":22,"value":211},{"type":16,"tag":322,"props":343,"children":344},{"style":339},[345],{"type":22,"value":346}," const",{"type":16,"tag":322,"props":348,"children":350},{"style":349},"--shiki-default:#79B8FF",[351],{"type":22,"value":352}," a",{"type":16,"tag":322,"props":354,"children":355},{"style":339},[356],{"type":22,"value":357}," =",{"type":16,"tag":322,"props":359,"children":360},{"style":349},[361],{"type":22,"value":362}," 1",{"type":16,"tag":322,"props":364,"children":366},{"style":365},"--shiki-default:#E1E4E8",[367],{"type":22,"value":368},";\n",{"type":16,"tag":322,"props":370,"children":372},{"class":324,"line":371},3,[373,377,381,386,390,395],{"type":16,"tag":322,"props":374,"children":375},{"style":339},[376],{"type":22,"value":211},{"type":16,"tag":322,"props":378,"children":379},{"style":339},[380],{"type":22,"value":346},{"type":16,"tag":322,"props":382,"children":383},{"style":349},[384],{"type":22,"value":385}," b",{"type":16,"tag":322,"props":387,"children":388},{"style":339},[389],{"type":22,"value":357},{"type":16,"tag":322,"props":391,"children":392},{"style":349},[393],{"type":22,"value":394}," 2",{"type":16,"tag":322,"props":396,"children":397},{"style":365},[398],{"type":22,"value":368},{"type":16,"tag":322,"props":400,"children":402},{"class":324,"line":401},4,[403,407,412,418],{"type":16,"tag":322,"props":404,"children":405},{"style":339},[406],{"type":22,"value":211},{"type":16,"tag":322,"props":408,"children":409},{"style":339},[410],{"type":22,"value":411}," function",{"type":16,"tag":322,"props":413,"children":415},{"style":414},"--shiki-default:#B392F0",[416],{"type":22,"value":417}," foo",{"type":16,"tag":322,"props":419,"children":420},{"style":365},[421],{"type":22,"value":422}," () {\n",{"type":16,"tag":322,"props":424,"children":426},{"class":324,"line":425},5,[427,432,437],{"type":16,"tag":322,"props":428,"children":429},{"style":339},[430],{"type":22,"value":431},"  return",{"type":16,"tag":322,"props":433,"children":434},{"style":349},[435],{"type":22,"value":436}," 3",{"type":16,"tag":322,"props":438,"children":439},{"style":365},[440],{"type":22,"value":368},{"type":16,"tag":322,"props":442,"children":444},{"class":324,"line":443},6,[445],{"type":16,"tag":322,"props":446,"children":447},{"style":365},[448],{"type":22,"value":449},"}\n",{"type":16,"tag":288,"props":451,"children":452},{"start":335},[453],{"type":16,"tag":59,"props":454,"children":455},{},[456,458,463,465,471],{"type":22,"value":457},"另外新建一个",{"type":16,"tag":30,"props":459,"children":461},{"className":460},[],[462],{"type":22,"value":43},{"type":22,"value":464},"模块，文件名为：",{"type":16,"tag":30,"props":466,"children":468},{"className":467},[],[469],{"type":22,"value":470},"cjs.js",{"type":22,"value":310},{"type":16,"tag":312,"props":473,"children":475},{"className":314,"code":474,"language":316,"meta":7,"style":7},"// cjs.js\nconst { a, b, foo } = require('./esm.js')\n\nconsole.log(a);\nconsole.log(b);\nconsole.log(foo());\n",[476],{"type":16,"tag":30,"props":477,"children":478},{"__ignoreMap":7},[479,487,555,564,582,598],{"type":16,"tag":322,"props":480,"children":481},{"class":324,"line":325},[482],{"type":16,"tag":322,"props":483,"children":484},{"style":329},[485],{"type":22,"value":486},"// cjs.js\n",{"type":16,"tag":322,"props":488,"children":489},{"class":324,"line":335},[490,495,500,505,510,515,519,524,529,534,539,544,550],{"type":16,"tag":322,"props":491,"children":492},{"style":339},[493],{"type":22,"value":494},"const",{"type":16,"tag":322,"props":496,"children":497},{"style":365},[498],{"type":22,"value":499}," { ",{"type":16,"tag":322,"props":501,"children":502},{"style":349},[503],{"type":22,"value":504},"a",{"type":16,"tag":322,"props":506,"children":507},{"style":365},[508],{"type":22,"value":509},", ",{"type":16,"tag":322,"props":511,"children":512},{"style":349},[513],{"type":22,"value":514},"b",{"type":16,"tag":322,"props":516,"children":517},{"style":365},[518],{"type":22,"value":509},{"type":16,"tag":322,"props":520,"children":521},{"style":349},[522],{"type":22,"value":523},"foo",{"type":16,"tag":322,"props":525,"children":526},{"style":365},[527],{"type":22,"value":528}," } ",{"type":16,"tag":322,"props":530,"children":531},{"style":339},[532],{"type":22,"value":533},"=",{"type":16,"tag":322,"props":535,"children":536},{"style":414},[537],{"type":22,"value":538}," require",{"type":16,"tag":322,"props":540,"children":541},{"style":365},[542],{"type":22,"value":543},"(",{"type":16,"tag":322,"props":545,"children":547},{"style":546},"--shiki-default:#9ECBFF",[548],{"type":22,"value":549},"'./esm.js'",{"type":16,"tag":322,"props":551,"children":552},{"style":365},[553],{"type":22,"value":554},")\n",{"type":16,"tag":322,"props":556,"children":557},{"class":324,"line":371},[558],{"type":16,"tag":322,"props":559,"children":561},{"emptyLinePlaceholder":560},true,[562],{"type":22,"value":563},"\n",{"type":16,"tag":322,"props":565,"children":566},{"class":324,"line":401},[567,572,577],{"type":16,"tag":322,"props":568,"children":569},{"style":365},[570],{"type":22,"value":571},"console.",{"type":16,"tag":322,"props":573,"children":574},{"style":414},[575],{"type":22,"value":576},"log",{"type":16,"tag":322,"props":578,"children":579},{"style":365},[580],{"type":22,"value":581},"(a);\n",{"type":16,"tag":322,"props":583,"children":584},{"class":324,"line":425},[585,589,593],{"type":16,"tag":322,"props":586,"children":587},{"style":365},[588],{"type":22,"value":571},{"type":16,"tag":322,"props":590,"children":591},{"style":414},[592],{"type":22,"value":576},{"type":16,"tag":322,"props":594,"children":595},{"style":365},[596],{"type":22,"value":597},"(b);\n",{"type":16,"tag":322,"props":599,"children":600},{"class":324,"line":443},[601,605,609,613,617],{"type":16,"tag":322,"props":602,"children":603},{"style":365},[604],{"type":22,"value":571},{"type":16,"tag":322,"props":606,"children":607},{"style":414},[608],{"type":22,"value":576},{"type":16,"tag":322,"props":610,"children":611},{"style":365},[612],{"type":22,"value":543},{"type":16,"tag":322,"props":614,"children":615},{"style":414},[616],{"type":22,"value":523},{"type":16,"tag":322,"props":618,"children":619},{"style":365},[620],{"type":22,"value":621},"());\n",{"type":16,"tag":288,"props":623,"children":624},{"start":371},[625],{"type":16,"tag":59,"props":626,"children":627},{},[628,630,635],{"type":22,"value":629},"运行",{"type":16,"tag":30,"props":631,"children":633},{"className":632},[],[634],{"type":22,"value":470},{"type":22,"value":636},"文件，结果提示以下的错误信息：",{"type":16,"tag":312,"props":638,"children":642},{"className":639,"code":640,"language":641,"meta":7,"style":7},"language-shell shiki shiki-themes github-dark","export const a = 1;\n^^^^^^\n\nSyntaxError: Unexpected token 'export'\n","shell",[643],{"type":16,"tag":30,"props":644,"children":645},{"__ignoreMap":7},[646,658,666,673],{"type":16,"tag":322,"props":647,"children":648},{"class":324,"line":325},[649,653],{"type":16,"tag":322,"props":650,"children":651},{"style":339},[652],{"type":22,"value":211},{"type":16,"tag":322,"props":654,"children":655},{"style":365},[656],{"type":22,"value":657}," const a = 1;\n",{"type":16,"tag":322,"props":659,"children":660},{"class":324,"line":335},[661],{"type":16,"tag":322,"props":662,"children":663},{"style":414},[664],{"type":22,"value":665},"^^^^^^\n",{"type":16,"tag":322,"props":667,"children":668},{"class":324,"line":371},[669],{"type":16,"tag":322,"props":670,"children":671},{"emptyLinePlaceholder":560},[672],{"type":22,"value":563},{"type":16,"tag":322,"props":674,"children":675},{"class":324,"line":401},[676,681,686,691],{"type":16,"tag":322,"props":677,"children":678},{"style":414},[679],{"type":22,"value":680},"SyntaxError:",{"type":16,"tag":322,"props":682,"children":683},{"style":546},[684],{"type":22,"value":685}," Unexpected",{"type":16,"tag":322,"props":687,"children":688},{"style":546},[689],{"type":22,"value":690}," token",{"type":16,"tag":322,"props":692,"children":693},{"style":546},[694],{"type":22,"value":695}," 'export'\n",{"type":16,"tag":24,"props":697,"children":698},{},[699,701,706,708,714,716,721,723,728,730,735],{"type":22,"value":700},"通过来说，如果在",{"type":16,"tag":30,"props":702,"children":704},{"className":703},[],[705],{"type":22,"value":43},{"type":22,"value":707},"上通过相对路径方式引入",{"type":16,"tag":30,"props":709,"children":711},{"className":710},[],[712],{"type":22,"value":713},".js",{"type":22,"value":715},"结尾的",{"type":16,"tag":30,"props":717,"children":719},{"className":718},[],[720],{"type":22,"value":51},{"type":22,"value":722},"模块，就会遇到上面的问题。根本原因Node.js底层在加载这个",{"type":16,"tag":30,"props":724,"children":726},{"className":725},[],[727],{"type":22,"value":308},{"type":22,"value":729},"文件时，把它识别成了",{"type":16,"tag":30,"props":731,"children":733},{"className":732},[],[734],{"type":22,"value":43},{"type":22,"value":736},"规范，最后使用cjs的loader进行处理时抛出的异常：",{"type":16,"tag":24,"props":738,"children":739},{},[740],{"type":16,"tag":741,"props":742,"children":745},"img",{"alt":743,"src":744},"Pasted image 20230605165120","https://johnhom-img.oss-cn-guangzhou.aliyuncs.com/images/Pasted%20image%2020230605165120.png",[],{"type":16,"tag":24,"props":747,"children":748},{},[749,751,756,758,763,765,773],{"type":22,"value":750},"那么问题来了，Node.js是如何识别引入的文件是",{"type":16,"tag":30,"props":752,"children":754},{"className":753},[],[755],{"type":22,"value":51},{"type":22,"value":757},"还是",{"type":16,"tag":30,"props":759,"children":761},{"className":760},[],[762],{"type":22,"value":43},{"type":22,"value":764},"规范的？其实Node.js有一个判断的机制叫做：",{"type":16,"tag":504,"props":766,"children":770},{"href":767,"rel":768},"https://nodejs.org/docs/latest-v14.x/api/packages.html#packages_determining_module_system",[769],"nofollow",[771],{"type":22,"value":772},"Determining module system",{"type":22,"value":774},"。用图例简单解析这个机制的判断逻辑:",{"type":16,"tag":24,"props":776,"children":777},{},[778],{"type":16,"tag":741,"props":779,"children":782},{"alt":780,"src":781},"Drawing 2023-06-05 17.08.24.excalidraw","https://johnhom-img.oss-cn-guangzhou.aliyuncs.com/images/Drawing%202023-06-05%2017.08.24.excalidraw.png",[],{"type":16,"tag":24,"props":784,"children":785},{},[786,788,793,795,800,802,807],{"type":22,"value":787},"为了",{"type":16,"tag":30,"props":789,"children":791},{"className":790},[],[792],{"type":22,"value":772},{"type":22,"value":794},"能够把",{"type":16,"tag":30,"props":796,"children":798},{"className":797},[],[799],{"type":22,"value":308},{"type":22,"value":801},"正确识别成",{"type":16,"tag":30,"props":803,"children":805},{"className":804},[],[806],{"type":22,"value":51},{"type":22,"value":808},"模块，我们有2种方案：",{"type":16,"tag":24,"props":810,"children":811},{},[812],{"type":22,"value":813},"第一种：修改文件名后缀的方式。",{"type":16,"tag":24,"props":815,"children":816},{},[817],{"type":22,"value":818},"步骤如下：",{"type":16,"tag":288,"props":820,"children":821},{},[822],{"type":16,"tag":59,"props":823,"children":824},{},[825,827,832,834,840,842,847],{"type":22,"value":826},"我们修改一下",{"type":16,"tag":30,"props":828,"children":830},{"className":829},[],[831],{"type":22,"value":308},{"type":22,"value":833},"文件为",{"type":16,"tag":30,"props":835,"children":837},{"className":836},[],[838],{"type":22,"value":839},"esm.mjs",{"type":22,"value":841},"，然后调整一下",{"type":16,"tag":30,"props":843,"children":845},{"className":844},[],[846],{"type":22,"value":470},{"type":22,"value":848},"文件的内容如下：",{"type":16,"tag":312,"props":850,"children":852},{"className":314,"code":851,"language":316,"meta":7,"style":7},"// cjs.js\nconst { a, b, foo } = require('./esm.mjs');\n\nconsole.log(a);\nconsole.log(b);\nconsole.log(foo());\n",[853],{"type":16,"tag":30,"props":854,"children":855},{"__ignoreMap":7},[856,863,920,927,942,957],{"type":16,"tag":322,"props":857,"children":858},{"class":324,"line":325},[859],{"type":16,"tag":322,"props":860,"children":861},{"style":329},[862],{"type":22,"value":486},{"type":16,"tag":322,"props":864,"children":865},{"class":324,"line":335},[866,870,874,878,882,886,890,894,898,902,906,910,915],{"type":16,"tag":322,"props":867,"children":868},{"style":339},[869],{"type":22,"value":494},{"type":16,"tag":322,"props":871,"children":872},{"style":365},[873],{"type":22,"value":499},{"type":16,"tag":322,"props":875,"children":876},{"style":349},[877],{"type":22,"value":504},{"type":16,"tag":322,"props":879,"children":880},{"style":365},[881],{"type":22,"value":509},{"type":16,"tag":322,"props":883,"children":884},{"style":349},[885],{"type":22,"value":514},{"type":16,"tag":322,"props":887,"children":888},{"style":365},[889],{"type":22,"value":509},{"type":16,"tag":322,"props":891,"children":892},{"style":349},[893],{"type":22,"value":523},{"type":16,"tag":322,"props":895,"children":896},{"style":365},[897],{"type":22,"value":528},{"type":16,"tag":322,"props":899,"children":900},{"style":339},[901],{"type":22,"value":533},{"type":16,"tag":322,"props":903,"children":904},{"style":414},[905],{"type":22,"value":538},{"type":16,"tag":322,"props":907,"children":908},{"style":365},[909],{"type":22,"value":543},{"type":16,"tag":322,"props":911,"children":912},{"style":546},[913],{"type":22,"value":914},"'./esm.mjs'",{"type":16,"tag":322,"props":916,"children":917},{"style":365},[918],{"type":22,"value":919},");\n",{"type":16,"tag":322,"props":921,"children":922},{"class":324,"line":371},[923],{"type":16,"tag":322,"props":924,"children":925},{"emptyLinePlaceholder":560},[926],{"type":22,"value":563},{"type":16,"tag":322,"props":928,"children":929},{"class":324,"line":401},[930,934,938],{"type":16,"tag":322,"props":931,"children":932},{"style":365},[933],{"type":22,"value":571},{"type":16,"tag":322,"props":935,"children":936},{"style":414},[937],{"type":22,"value":576},{"type":16,"tag":322,"props":939,"children":940},{"style":365},[941],{"type":22,"value":581},{"type":16,"tag":322,"props":943,"children":944},{"class":324,"line":425},[945,949,953],{"type":16,"tag":322,"props":946,"children":947},{"style":365},[948],{"type":22,"value":571},{"type":16,"tag":322,"props":950,"children":951},{"style":414},[952],{"type":22,"value":576},{"type":16,"tag":322,"props":954,"children":955},{"style":365},[956],{"type":22,"value":597},{"type":16,"tag":322,"props":958,"children":959},{"class":324,"line":443},[960,964,968,972,976],{"type":16,"tag":322,"props":961,"children":962},{"style":365},[963],{"type":22,"value":571},{"type":16,"tag":322,"props":965,"children":966},{"style":414},[967],{"type":22,"value":576},{"type":16,"tag":322,"props":969,"children":970},{"style":365},[971],{"type":22,"value":543},{"type":16,"tag":322,"props":973,"children":974},{"style":414},[975],{"type":22,"value":523},{"type":16,"tag":322,"props":977,"children":978},{"style":365},[979],{"type":22,"value":621},{"type":16,"tag":288,"props":981,"children":982},{"start":335},[983],{"type":16,"tag":59,"props":984,"children":985},{},[986,988,994],{"type":22,"value":987},"执行命令",{"type":16,"tag":30,"props":989,"children":991},{"className":990},[],[992],{"type":22,"value":993},"node cjs.js",{"type":22,"value":995},"，又抛出异常了，不过这次的报错稍微不太一样：",{"type":16,"tag":312,"props":997,"children":999},{"className":639,"code":998,"language":641,"meta":7,"style":7},"node:internal/modules/cjs/loader:1031\n    throw new ERR_REQUIRE_ESM(filename, true);\n    ^\n\nError [ERR_REQUIRE_ESM]: require() of ES Module esm.mjs not supported.\nInstead change the require of esm.mjs to a dynamic import() which is available in all CommonJS modules.\n",[1000],{"type":16,"tag":30,"props":1001,"children":1002},{"__ignoreMap":7},[1003,1011,1047,1055,1062,1084],{"type":16,"tag":322,"props":1004,"children":1005},{"class":324,"line":325},[1006],{"type":16,"tag":322,"props":1007,"children":1008},{"style":414},[1009],{"type":22,"value":1010},"node:internal/modules/cjs/loader:1031\n",{"type":16,"tag":322,"props":1012,"children":1013},{"class":324,"line":335},[1014,1019,1024,1029,1033,1038,1043],{"type":16,"tag":322,"props":1015,"children":1016},{"style":414},[1017],{"type":22,"value":1018},"    throw",{"type":16,"tag":322,"props":1020,"children":1021},{"style":546},[1022],{"type":22,"value":1023}," new",{"type":16,"tag":322,"props":1025,"children":1026},{"style":546},[1027],{"type":22,"value":1028}," ERR_REQUIRE_ESM",{"type":16,"tag":322,"props":1030,"children":1031},{"style":365},[1032],{"type":22,"value":543},{"type":16,"tag":322,"props":1034,"children":1035},{"style":414},[1036],{"type":22,"value":1037},"filename,",{"type":16,"tag":322,"props":1039,"children":1040},{"style":349},[1041],{"type":22,"value":1042}," true",{"type":16,"tag":322,"props":1044,"children":1045},{"style":365},[1046],{"type":22,"value":919},{"type":16,"tag":322,"props":1048,"children":1049},{"class":324,"line":371},[1050],{"type":16,"tag":322,"props":1051,"children":1052},{"style":414},[1053],{"type":22,"value":1054},"    ^\n",{"type":16,"tag":322,"props":1056,"children":1057},{"class":324,"line":401},[1058],{"type":16,"tag":322,"props":1059,"children":1060},{"emptyLinePlaceholder":560},[1061],{"type":22,"value":563},{"type":16,"tag":322,"props":1063,"children":1064},{"class":324,"line":425},[1065,1070,1075,1079],{"type":16,"tag":322,"props":1066,"children":1067},{"style":414},[1068],{"type":22,"value":1069},"Error",{"type":16,"tag":322,"props":1071,"children":1072},{"style":365},[1073],{"type":22,"value":1074}," [ERR_REQUIRE_ESM]: ",{"type":16,"tag":322,"props":1076,"children":1077},{"style":414},[1078],{"type":22,"value":123},{"type":16,"tag":322,"props":1080,"children":1081},{"style":365},[1082],{"type":22,"value":1083},"() of ES Module esm.mjs not supported.\n",{"type":16,"tag":322,"props":1085,"children":1086},{"class":324,"line":443},[1087,1092,1097,1102,1106,1111,1116,1121,1125,1130,1135,1140,1145,1150,1155,1160,1165,1170],{"type":16,"tag":322,"props":1088,"children":1089},{"style":414},[1090],{"type":22,"value":1091},"Instead",{"type":16,"tag":322,"props":1093,"children":1094},{"style":546},[1095],{"type":22,"value":1096}," change",{"type":16,"tag":322,"props":1098,"children":1099},{"style":546},[1100],{"type":22,"value":1101}," the",{"type":16,"tag":322,"props":1103,"children":1104},{"style":546},[1105],{"type":22,"value":538},{"type":16,"tag":322,"props":1107,"children":1108},{"style":546},[1109],{"type":22,"value":1110}," of",{"type":16,"tag":322,"props":1112,"children":1113},{"style":546},[1114],{"type":22,"value":1115}," esm.mjs",{"type":16,"tag":322,"props":1117,"children":1118},{"style":546},[1119],{"type":22,"value":1120}," to",{"type":16,"tag":322,"props":1122,"children":1123},{"style":546},[1124],{"type":22,"value":352},{"type":16,"tag":322,"props":1126,"children":1127},{"style":546},[1128],{"type":22,"value":1129}," dynamic",{"type":16,"tag":322,"props":1131,"children":1132},{"style":546},[1133],{"type":22,"value":1134}," import",{"type":16,"tag":322,"props":1136,"children":1137},{"style":365},[1138],{"type":22,"value":1139},"() ",{"type":16,"tag":322,"props":1141,"children":1142},{"style":546},[1143],{"type":22,"value":1144},"which",{"type":16,"tag":322,"props":1146,"children":1147},{"style":546},[1148],{"type":22,"value":1149}," is",{"type":16,"tag":322,"props":1151,"children":1152},{"style":546},[1153],{"type":22,"value":1154}," available",{"type":16,"tag":322,"props":1156,"children":1157},{"style":546},[1158],{"type":22,"value":1159}," in",{"type":16,"tag":322,"props":1161,"children":1162},{"style":546},[1163],{"type":22,"value":1164}," all",{"type":16,"tag":322,"props":1166,"children":1167},{"style":546},[1168],{"type":22,"value":1169}," CommonJS",{"type":16,"tag":322,"props":1171,"children":1172},{"style":546},[1173],{"type":22,"value":1174}," modules.\n",{"type":16,"tag":288,"props":1176,"children":1177},{"start":371},[1178],{"type":16,"tag":59,"props":1179,"children":1180},{},[1181,1183,1188,1190,1196,1198,1204,1206,1211,1213,1218],{"type":22,"value":1182},"大致的意思是",{"type":16,"tag":30,"props":1184,"children":1186},{"className":1185},[],[1187],{"type":22,"value":51},{"type":22,"value":1189},"模块不支持通过",{"type":16,"tag":30,"props":1191,"children":1193},{"className":1192},[],[1194],{"type":22,"value":1195},"require()",{"type":22,"value":1197},"函数引入，需要替换成通过",{"type":16,"tag":30,"props":1199,"children":1201},{"className":1200},[],[1202],{"type":22,"value":1203},"import()",{"type":22,"value":1205},"函数动态引入",{"type":16,"tag":30,"props":1207,"children":1209},{"className":1208},[],[1210],{"type":22,"value":51},{"type":22,"value":1212},"模块，那我们就改一下",{"type":16,"tag":30,"props":1214,"children":1216},{"className":1215},[],[1217],{"type":22,"value":470},{"type":22,"value":1219},"文件中代码，通过动态import的方式引入:",{"type":16,"tag":312,"props":1221,"children":1223},{"className":314,"code":1222,"language":316,"meta":7,"style":7},"async function main() {\n  const mod = await import('./esm.mjs');\n  const { a, b, foo } = mod;\n  console.log(a);\n  console.log(b);\n  console.log(foo());\n}\n\nmain();\n",[1224],{"type":16,"tag":30,"props":1225,"children":1226},{"__ignoreMap":7},[1227,1249,1287,1331,1347,1362,1385,1393,1401],{"type":16,"tag":322,"props":1228,"children":1229},{"class":324,"line":325},[1230,1235,1239,1244],{"type":16,"tag":322,"props":1231,"children":1232},{"style":339},[1233],{"type":22,"value":1234},"async",{"type":16,"tag":322,"props":1236,"children":1237},{"style":339},[1238],{"type":22,"value":411},{"type":16,"tag":322,"props":1240,"children":1241},{"style":414},[1242],{"type":22,"value":1243}," main",{"type":16,"tag":322,"props":1245,"children":1246},{"style":365},[1247],{"type":22,"value":1248},"() {\n",{"type":16,"tag":322,"props":1250,"children":1251},{"class":324,"line":335},[1252,1257,1262,1266,1271,1275,1279,1283],{"type":16,"tag":322,"props":1253,"children":1254},{"style":339},[1255],{"type":22,"value":1256},"  const",{"type":16,"tag":322,"props":1258,"children":1259},{"style":349},[1260],{"type":22,"value":1261}," mod",{"type":16,"tag":322,"props":1263,"children":1264},{"style":339},[1265],{"type":22,"value":357},{"type":16,"tag":322,"props":1267,"children":1268},{"style":339},[1269],{"type":22,"value":1270}," await",{"type":16,"tag":322,"props":1272,"children":1273},{"style":339},[1274],{"type":22,"value":1134},{"type":16,"tag":322,"props":1276,"children":1277},{"style":365},[1278],{"type":22,"value":543},{"type":16,"tag":322,"props":1280,"children":1281},{"style":546},[1282],{"type":22,"value":914},{"type":16,"tag":322,"props":1284,"children":1285},{"style":365},[1286],{"type":22,"value":919},{"type":16,"tag":322,"props":1288,"children":1289},{"class":324,"line":371},[1290,1294,1298,1302,1306,1310,1314,1318,1322,1326],{"type":16,"tag":322,"props":1291,"children":1292},{"style":339},[1293],{"type":22,"value":1256},{"type":16,"tag":322,"props":1295,"children":1296},{"style":365},[1297],{"type":22,"value":499},{"type":16,"tag":322,"props":1299,"children":1300},{"style":349},[1301],{"type":22,"value":504},{"type":16,"tag":322,"props":1303,"children":1304},{"style":365},[1305],{"type":22,"value":509},{"type":16,"tag":322,"props":1307,"children":1308},{"style":349},[1309],{"type":22,"value":514},{"type":16,"tag":322,"props":1311,"children":1312},{"style":365},[1313],{"type":22,"value":509},{"type":16,"tag":322,"props":1315,"children":1316},{"style":349},[1317],{"type":22,"value":523},{"type":16,"tag":322,"props":1319,"children":1320},{"style":365},[1321],{"type":22,"value":528},{"type":16,"tag":322,"props":1323,"children":1324},{"style":339},[1325],{"type":22,"value":533},{"type":16,"tag":322,"props":1327,"children":1328},{"style":365},[1329],{"type":22,"value":1330}," mod;\n",{"type":16,"tag":322,"props":1332,"children":1333},{"class":324,"line":401},[1334,1339,1343],{"type":16,"tag":322,"props":1335,"children":1336},{"style":365},[1337],{"type":22,"value":1338},"  console.",{"type":16,"tag":322,"props":1340,"children":1341},{"style":414},[1342],{"type":22,"value":576},{"type":16,"tag":322,"props":1344,"children":1345},{"style":365},[1346],{"type":22,"value":581},{"type":16,"tag":322,"props":1348,"children":1349},{"class":324,"line":425},[1350,1354,1358],{"type":16,"tag":322,"props":1351,"children":1352},{"style":365},[1353],{"type":22,"value":1338},{"type":16,"tag":322,"props":1355,"children":1356},{"style":414},[1357],{"type":22,"value":576},{"type":16,"tag":322,"props":1359,"children":1360},{"style":365},[1361],{"type":22,"value":597},{"type":16,"tag":322,"props":1363,"children":1364},{"class":324,"line":443},[1365,1369,1373,1377,1381],{"type":16,"tag":322,"props":1366,"children":1367},{"style":365},[1368],{"type":22,"value":1338},{"type":16,"tag":322,"props":1370,"children":1371},{"style":414},[1372],{"type":22,"value":576},{"type":16,"tag":322,"props":1374,"children":1375},{"style":365},[1376],{"type":22,"value":543},{"type":16,"tag":322,"props":1378,"children":1379},{"style":414},[1380],{"type":22,"value":523},{"type":16,"tag":322,"props":1382,"children":1383},{"style":365},[1384],{"type":22,"value":621},{"type":16,"tag":322,"props":1386,"children":1388},{"class":324,"line":1387},7,[1389],{"type":16,"tag":322,"props":1390,"children":1391},{"style":365},[1392],{"type":22,"value":449},{"type":16,"tag":322,"props":1394,"children":1396},{"class":324,"line":1395},8,[1397],{"type":16,"tag":322,"props":1398,"children":1399},{"emptyLinePlaceholder":560},[1400],{"type":22,"value":563},{"type":16,"tag":322,"props":1402,"children":1404},{"class":324,"line":1403},9,[1405,1410],{"type":16,"tag":322,"props":1406,"children":1407},{"style":414},[1408],{"type":22,"value":1409},"main",{"type":16,"tag":322,"props":1411,"children":1412},{"style":365},[1413],{"type":22,"value":1414},"();\n",{"type":16,"tag":288,"props":1416,"children":1417},{"start":401},[1418],{"type":16,"tag":59,"props":1419,"children":1420},{},[1421],{"type":22,"value":1422},"成功输出：",{"type":16,"tag":312,"props":1424,"children":1426},{"className":639,"code":1425,"language":641,"meta":7,"style":7},"1\n2\n3\n",[1427],{"type":16,"tag":30,"props":1428,"children":1429},{"__ignoreMap":7},[1430,1438,1446],{"type":16,"tag":322,"props":1431,"children":1432},{"class":324,"line":325},[1433],{"type":16,"tag":322,"props":1434,"children":1435},{"style":414},[1436],{"type":22,"value":1437},"1\n",{"type":16,"tag":322,"props":1439,"children":1440},{"class":324,"line":335},[1441],{"type":16,"tag":322,"props":1442,"children":1443},{"style":414},[1444],{"type":22,"value":1445},"2\n",{"type":16,"tag":322,"props":1447,"children":1448},{"class":324,"line":371},[1449],{"type":16,"tag":322,"props":1450,"children":1451},{"style":414},[1452],{"type":22,"value":1453},"3\n",{"type":16,"tag":24,"props":1455,"children":1456},{},[1457,1459,1465],{"type":22,"value":1458},"第二种：在文件同级或者父级目录加一个",{"type":16,"tag":30,"props":1460,"children":1462},{"className":1461},[],[1463],{"type":22,"value":1464},"package.json",{"type":22,"value":1466},"文件，并且加上\"type\"字段，值为\"module\"。",{"type":16,"tag":24,"props":1468,"children":1469},{},[1470,1472,1477,1478,1483],{"type":22,"value":1471},"为了让",{"type":16,"tag":30,"props":1473,"children":1475},{"className":1474},[],[1476],{"type":22,"value":470},{"type":22,"value":70},{"type":16,"tag":30,"props":1479,"children":1481},{"className":1480},[],[1482],{"type":22,"value":308},{"type":22,"value":1484},"分别识别成正确的规范。我们改造成下图的结构：",{"type":16,"tag":24,"props":1486,"children":1487},{},[1488],{"type":16,"tag":741,"props":1489,"children":1492},{"alt":1490,"src":1491},"Pasted image 20230605180856","https://johnhom-img.oss-cn-guangzhou.aliyuncs.com/images/Pasted%20image%2020230605180856.png",[],{"type":16,"tag":24,"props":1494,"children":1495},{},[1496,1498,1504,1506,1511,1513,1518],{"type":22,"value":1497},"其中",{"type":16,"tag":30,"props":1499,"children":1501},{"className":1500},[],[1502],{"type":22,"value":1503},"lib/package.json",{"type":22,"value":1505},"的文件内容如下，这样",{"type":16,"tag":30,"props":1507,"children":1509},{"className":1508},[],[1510],{"type":22,"value":308},{"type":22,"value":1512},"就会被识别成",{"type":16,"tag":30,"props":1514,"children":1516},{"className":1515},[],[1517],{"type":22,"value":51},{"type":22,"value":1519},"模块。",{"type":16,"tag":312,"props":1521,"children":1525},{"className":1522,"code":1523,"language":1524,"meta":7,"style":7},"language-json shiki shiki-themes github-dark","// lib/package.json\n{\n  \"type\": \"module\"\n}\n","json",[1526],{"type":16,"tag":30,"props":1527,"children":1528},{"__ignoreMap":7},[1529,1537,1545,1563],{"type":16,"tag":322,"props":1530,"children":1531},{"class":324,"line":325},[1532],{"type":16,"tag":322,"props":1533,"children":1534},{"style":329},[1535],{"type":22,"value":1536},"// lib/package.json\n",{"type":16,"tag":322,"props":1538,"children":1539},{"class":324,"line":335},[1540],{"type":16,"tag":322,"props":1541,"children":1542},{"style":365},[1543],{"type":22,"value":1544},"{\n",{"type":16,"tag":322,"props":1546,"children":1547},{"class":324,"line":371},[1548,1553,1558],{"type":16,"tag":322,"props":1549,"children":1550},{"style":349},[1551],{"type":22,"value":1552},"  \"type\"",{"type":16,"tag":322,"props":1554,"children":1555},{"style":365},[1556],{"type":22,"value":1557},": ",{"type":16,"tag":322,"props":1559,"children":1560},{"style":546},[1561],{"type":22,"value":1562},"\"module\"\n",{"type":16,"tag":322,"props":1564,"children":1565},{"class":324,"line":401},[1566],{"type":16,"tag":322,"props":1567,"children":1568},{"style":365},[1569],{"type":22,"value":449},{"type":16,"tag":24,"props":1571,"children":1572},{},[1573,1575,1580,1582,1587],{"type":22,"value":1574},"然后",{"type":16,"tag":30,"props":1576,"children":1578},{"className":1577},[],[1579],{"type":22,"value":470},{"type":22,"value":1581},"文件导入",{"type":16,"tag":30,"props":1583,"children":1585},{"className":1584},[],[1586],{"type":22,"value":308},{"type":22,"value":1588},"我们可以改写成：",{"type":16,"tag":312,"props":1590,"children":1592},{"className":314,"code":1591,"language":316,"meta":7,"style":7},"// cjs.js\nasync function main() {\n  // 这里改成导入./lib/esm.js 注意看后缀是 .js\n  const mod = await import('./lib/esm.js');\n  const { a, b, foo } = mod;\n  console.log(a);\n  console.log(b);\n  console.log(foo());\n}\n\nmain();\n",[1593],{"type":16,"tag":30,"props":1594,"children":1595},{"__ignoreMap":7},[1596,1603,1622,1630,1666,1709,1724,1739,1762,1769,1777],{"type":16,"tag":322,"props":1597,"children":1598},{"class":324,"line":325},[1599],{"type":16,"tag":322,"props":1600,"children":1601},{"style":329},[1602],{"type":22,"value":486},{"type":16,"tag":322,"props":1604,"children":1605},{"class":324,"line":335},[1606,1610,1614,1618],{"type":16,"tag":322,"props":1607,"children":1608},{"style":339},[1609],{"type":22,"value":1234},{"type":16,"tag":322,"props":1611,"children":1612},{"style":339},[1613],{"type":22,"value":411},{"type":16,"tag":322,"props":1615,"children":1616},{"style":414},[1617],{"type":22,"value":1243},{"type":16,"tag":322,"props":1619,"children":1620},{"style":365},[1621],{"type":22,"value":1248},{"type":16,"tag":322,"props":1623,"children":1624},{"class":324,"line":371},[1625],{"type":16,"tag":322,"props":1626,"children":1627},{"style":329},[1628],{"type":22,"value":1629},"  // 这里改成导入./lib/esm.js 注意看后缀是 .js\n",{"type":16,"tag":322,"props":1631,"children":1632},{"class":324,"line":401},[1633,1637,1641,1645,1649,1653,1657,1662],{"type":16,"tag":322,"props":1634,"children":1635},{"style":339},[1636],{"type":22,"value":1256},{"type":16,"tag":322,"props":1638,"children":1639},{"style":349},[1640],{"type":22,"value":1261},{"type":16,"tag":322,"props":1642,"children":1643},{"style":339},[1644],{"type":22,"value":357},{"type":16,"tag":322,"props":1646,"children":1647},{"style":339},[1648],{"type":22,"value":1270},{"type":16,"tag":322,"props":1650,"children":1651},{"style":339},[1652],{"type":22,"value":1134},{"type":16,"tag":322,"props":1654,"children":1655},{"style":365},[1656],{"type":22,"value":543},{"type":16,"tag":322,"props":1658,"children":1659},{"style":546},[1660],{"type":22,"value":1661},"'./lib/esm.js'",{"type":16,"tag":322,"props":1663,"children":1664},{"style":365},[1665],{"type":22,"value":919},{"type":16,"tag":322,"props":1667,"children":1668},{"class":324,"line":425},[1669,1673,1677,1681,1685,1689,1693,1697,1701,1705],{"type":16,"tag":322,"props":1670,"children":1671},{"style":339},[1672],{"type":22,"value":1256},{"type":16,"tag":322,"props":1674,"children":1675},{"style":365},[1676],{"type":22,"value":499},{"type":16,"tag":322,"props":1678,"children":1679},{"style":349},[1680],{"type":22,"value":504},{"type":16,"tag":322,"props":1682,"children":1683},{"style":365},[1684],{"type":22,"value":509},{"type":16,"tag":322,"props":1686,"children":1687},{"style":349},[1688],{"type":22,"value":514},{"type":16,"tag":322,"props":1690,"children":1691},{"style":365},[1692],{"type":22,"value":509},{"type":16,"tag":322,"props":1694,"children":1695},{"style":349},[1696],{"type":22,"value":523},{"type":16,"tag":322,"props":1698,"children":1699},{"style":365},[1700],{"type":22,"value":528},{"type":16,"tag":322,"props":1702,"children":1703},{"style":339},[1704],{"type":22,"value":533},{"type":16,"tag":322,"props":1706,"children":1707},{"style":365},[1708],{"type":22,"value":1330},{"type":16,"tag":322,"props":1710,"children":1711},{"class":324,"line":443},[1712,1716,1720],{"type":16,"tag":322,"props":1713,"children":1714},{"style":365},[1715],{"type":22,"value":1338},{"type":16,"tag":322,"props":1717,"children":1718},{"style":414},[1719],{"type":22,"value":576},{"type":16,"tag":322,"props":1721,"children":1722},{"style":365},[1723],{"type":22,"value":581},{"type":16,"tag":322,"props":1725,"children":1726},{"class":324,"line":1387},[1727,1731,1735],{"type":16,"tag":322,"props":1728,"children":1729},{"style":365},[1730],{"type":22,"value":1338},{"type":16,"tag":322,"props":1732,"children":1733},{"style":414},[1734],{"type":22,"value":576},{"type":16,"tag":322,"props":1736,"children":1737},{"style":365},[1738],{"type":22,"value":597},{"type":16,"tag":322,"props":1740,"children":1741},{"class":324,"line":1395},[1742,1746,1750,1754,1758],{"type":16,"tag":322,"props":1743,"children":1744},{"style":365},[1745],{"type":22,"value":1338},{"type":16,"tag":322,"props":1747,"children":1748},{"style":414},[1749],{"type":22,"value":576},{"type":16,"tag":322,"props":1751,"children":1752},{"style":365},[1753],{"type":22,"value":543},{"type":16,"tag":322,"props":1755,"children":1756},{"style":414},[1757],{"type":22,"value":523},{"type":16,"tag":322,"props":1759,"children":1760},{"style":365},[1761],{"type":22,"value":621},{"type":16,"tag":322,"props":1763,"children":1764},{"class":324,"line":1403},[1765],{"type":16,"tag":322,"props":1766,"children":1767},{"style":365},[1768],{"type":22,"value":449},{"type":16,"tag":322,"props":1770,"children":1772},{"class":324,"line":1771},10,[1773],{"type":16,"tag":322,"props":1774,"children":1775},{"emptyLinePlaceholder":560},[1776],{"type":22,"value":563},{"type":16,"tag":322,"props":1778,"children":1780},{"class":324,"line":1779},11,[1781,1785],{"type":16,"tag":322,"props":1782,"children":1783},{"style":414},[1784],{"type":22,"value":1409},{"type":16,"tag":322,"props":1786,"children":1787},{"style":365},[1788],{"type":22,"value":1414},{"type":16,"tag":24,"props":1790,"children":1791},{},[1792,1794,1800],{"type":22,"value":1793},"最后运行命令：",{"type":16,"tag":30,"props":1795,"children":1797},{"className":1796},[],[1798],{"type":22,"value":1799},"node ./cjs.js",{"type":22,"value":1801},"，成功！！！",{"type":16,"tag":312,"props":1803,"children":1804},{"className":639,"code":1425,"language":641,"meta":7,"style":7},[1805],{"type":16,"tag":30,"props":1806,"children":1807},{"__ignoreMap":7},[1808,1815,1822],{"type":16,"tag":322,"props":1809,"children":1810},{"class":324,"line":325},[1811],{"type":16,"tag":322,"props":1812,"children":1813},{"style":414},[1814],{"type":22,"value":1437},{"type":16,"tag":322,"props":1816,"children":1817},{"class":324,"line":335},[1818],{"type":16,"tag":322,"props":1819,"children":1820},{"style":414},[1821],{"type":22,"value":1445},{"type":16,"tag":322,"props":1823,"children":1824},{"class":324,"line":371},[1825],{"type":16,"tag":322,"props":1826,"children":1827},{"style":414},[1828],{"type":22,"value":1453},{"type":16,"tag":24,"props":1830,"children":1831},{},[1832,1834,1839,1841,1846],{"type":22,"value":1833},"经过以上的实验，我们了解到Node.js的底层机制已经支持",{"type":16,"tag":30,"props":1835,"children":1837},{"className":1836},[],[1838],{"type":22,"value":43},{"type":22,"value":1840},"模块导入",{"type":16,"tag":30,"props":1842,"children":1844},{"className":1843},[],[1845],{"type":22,"value":51},{"type":22,"value":1847},"模块，不过需要注意以下的几个点：",{"type":16,"tag":55,"props":1849,"children":1850},{},[1851,1894],{"type":16,"tag":59,"props":1852,"children":1853},{},[1854,1856,1862,1864,1869,1871,1877,1879,1884,1886,1892],{"type":22,"value":1855},"根据",{"type":16,"tag":30,"props":1857,"children":1859},{"className":1858},[],[1860],{"type":22,"value":1861},"Determining Module System",{"type":22,"value":1863},"机制,需要修改",{"type":16,"tag":30,"props":1865,"children":1867},{"className":1866},[],[1868],{"type":22,"value":51},{"type":22,"value":1870},"模块的文件后缀名为",{"type":16,"tag":30,"props":1872,"children":1874},{"className":1873},[],[1875],{"type":22,"value":1876},".mjs",{"type":22,"value":1878},"或者通过",{"type":16,"tag":30,"props":1880,"children":1882},{"className":1881},[],[1883],{"type":22,"value":1464},{"type":22,"value":1885},"加上",{"type":16,"tag":30,"props":1887,"children":1889},{"className":1888},[],[1890],{"type":22,"value":1891},"\"type\": \"module\"",{"type":22,"value":1893},"字段。",{"type":16,"tag":59,"props":1895,"children":1896},{},[1897,1902,1904,1909,1911,1916],{"type":16,"tag":30,"props":1898,"children":1900},{"className":1899},[],[1901],{"type":22,"value":43},{"type":22,"value":1903},"只能通过",{"type":16,"tag":30,"props":1905,"children":1907},{"className":1906},[],[1908],{"type":22,"value":1203},{"type":22,"value":1910},"函数的方式导入",{"type":16,"tag":30,"props":1912,"children":1914},{"className":1913},[],[1915],{"type":22,"value":51},{"type":22,"value":1519},{"type":16,"tag":281,"props":1918,"children":1920},{"id":1919},"esm导入cjs模块",[1921],{"type":22,"value":1922},"ESM导入CJS模块",{"type":16,"tag":24,"props":1924,"children":1925},{},[1926,1927,1932,1933,1938,1940,1945,1946,1951,1953,1958],{"type":22,"value":229},{"type":16,"tag":30,"props":1928,"children":1930},{"className":1929},[],[1931],{"type":22,"value":51},{"type":22,"value":236},{"type":16,"tag":30,"props":1934,"children":1936},{"className":1935},[],[1937],{"type":22,"value":242},{"type":22,"value":1939},"，在此之前，想要在node中使用",{"type":16,"tag":30,"props":1941,"children":1943},{"className":1942},[],[1944],{"type":22,"value":51},{"type":22,"value":251},{"type":16,"tag":30,"props":1947,"children":1949},{"className":1948},[],[1950],{"type":22,"value":257},{"type":22,"value":1952},"参数。在",{"type":16,"tag":30,"props":1954,"children":1956},{"className":1955},[],[1957],{"type":22,"value":242},{"type":22,"value":266},{"type":16,"tag":24,"props":1960,"children":1961},{},[1962],{"type":22,"value":1963},"首先新建一个文件夹，结构如下：",{"type":16,"tag":24,"props":1965,"children":1966},{},[1967],{"type":16,"tag":741,"props":1968,"children":1971},{"alt":1969,"src":1970},"Pasted image 20230605182410","https://johnhom-img.oss-cn-guangzhou.aliyuncs.com/images/Pasted%20image%2020230605182410.png",[],{"type":16,"tag":288,"props":1973,"children":1974},{},[1975],{"type":16,"tag":59,"props":1976,"children":1977},{},[1978,1980,1985,1987,1993],{"type":22,"value":1979},"编辑根目录下的",{"type":16,"tag":30,"props":1981,"children":1983},{"className":1982},[],[1984],{"type":22,"value":1464},{"type":22,"value":1986},"文件，加上",{"type":16,"tag":30,"props":1988,"children":1990},{"className":1989},[],[1991],{"type":22,"value":1992},"type",{"type":22,"value":1994},"字段，值为\"module\"，如下所示：",{"type":16,"tag":312,"props":1996,"children":1998},{"className":1522,"code":1997,"language":1524,"meta":7,"style":7},"// package.json\n{\n  ...,\n  \"type\": \"module\",\n  ...,\n}\n",[1999],{"type":16,"tag":30,"props":2000,"children":2001},{"__ignoreMap":7},[2002,2010,2017,2026,2047,2054],{"type":16,"tag":322,"props":2003,"children":2004},{"class":324,"line":325},[2005],{"type":16,"tag":322,"props":2006,"children":2007},{"style":329},[2008],{"type":22,"value":2009},"// package.json\n",{"type":16,"tag":322,"props":2011,"children":2012},{"class":324,"line":335},[2013],{"type":16,"tag":322,"props":2014,"children":2015},{"style":365},[2016],{"type":22,"value":1544},{"type":16,"tag":322,"props":2018,"children":2019},{"class":324,"line":371},[2020],{"type":16,"tag":322,"props":2021,"children":2023},{"style":2022},"--shiki-default:#FDAEB7;--shiki-default-font-style:italic",[2024],{"type":22,"value":2025},"  ...,\n",{"type":16,"tag":322,"props":2027,"children":2028},{"class":324,"line":401},[2029,2033,2037,2042],{"type":16,"tag":322,"props":2030,"children":2031},{"style":349},[2032],{"type":22,"value":1552},{"type":16,"tag":322,"props":2034,"children":2035},{"style":365},[2036],{"type":22,"value":1557},{"type":16,"tag":322,"props":2038,"children":2039},{"style":546},[2040],{"type":22,"value":2041},"\"module\"",{"type":16,"tag":322,"props":2043,"children":2044},{"style":365},[2045],{"type":22,"value":2046},",\n",{"type":16,"tag":322,"props":2048,"children":2049},{"class":324,"line":425},[2050],{"type":16,"tag":322,"props":2051,"children":2052},{"style":2022},[2053],{"type":22,"value":2025},{"type":16,"tag":322,"props":2055,"children":2056},{"class":324,"line":443},[2057],{"type":16,"tag":322,"props":2058,"children":2059},{"style":365},[2060],{"type":22,"value":449},{"type":16,"tag":24,"props":2062,"children":2063},{},[2064,2066,2071,2073,2078],{"type":22,"value":2065},"这样",{"type":16,"tag":30,"props":2067,"children":2069},{"className":2068},[],[2070],{"type":22,"value":308},{"type":22,"value":2072},"就会被当做",{"type":16,"tag":30,"props":2074,"children":2076},{"className":2075},[],[2077],{"type":22,"value":51},{"type":22,"value":2079},"模块处理。",{"type":16,"tag":288,"props":2081,"children":2082},{"start":335},[2083],{"type":16,"tag":59,"props":2084,"children":2085},{},[2086,2088,2093],{"type":22,"value":2087},"编辑",{"type":16,"tag":30,"props":2089,"children":2091},{"className":2090},[],[2092],{"type":22,"value":1503},{"type":22,"value":2094},"，内容如下：",{"type":16,"tag":312,"props":2096,"children":2098},{"className":1522,"code":2097,"language":1524,"meta":7,"style":7},"// lib/package.json\n{\n    // 或者可以加上\"type\": \"commonjs\"\n}\n",[2099],{"type":16,"tag":30,"props":2100,"children":2101},{"__ignoreMap":7},[2102,2109,2116,2124],{"type":16,"tag":322,"props":2103,"children":2104},{"class":324,"line":325},[2105],{"type":16,"tag":322,"props":2106,"children":2107},{"style":329},[2108],{"type":22,"value":1536},{"type":16,"tag":322,"props":2110,"children":2111},{"class":324,"line":335},[2112],{"type":16,"tag":322,"props":2113,"children":2114},{"style":365},[2115],{"type":22,"value":1544},{"type":16,"tag":322,"props":2117,"children":2118},{"class":324,"line":371},[2119],{"type":16,"tag":322,"props":2120,"children":2121},{"style":329},[2122],{"type":22,"value":2123},"    // 或者可以加上\"type\": \"commonjs\"\n",{"type":16,"tag":322,"props":2125,"children":2126},{"class":324,"line":401},[2127],{"type":16,"tag":322,"props":2128,"children":2129},{"style":365},[2130],{"type":22,"value":449},{"type":16,"tag":288,"props":2132,"children":2133},{"start":371},[2134],{"type":16,"tag":59,"props":2135,"children":2136},{},[2137,2142,2143,2148],{"type":16,"tag":30,"props":2138,"children":2140},{"className":2139},[],[2141],{"type":22,"value":308},{"type":22,"value":70},{"type":16,"tag":30,"props":2144,"children":2146},{"className":2145},[],[2147],{"type":22,"value":470},{"type":22,"value":2149},"文件内容分别为：",{"type":16,"tag":312,"props":2151,"children":2153},{"className":314,"code":2152,"language":316,"meta":7,"style":7},"// ./lib/cjs.js\nmodule.exports = {\n  a: 1,\n  b: 2,\n  foo: function () {\n    return 3\n  }\n}\n\n// esm.js\nimport pkg from './lib/cjs.js'\n\nconst { a, b, foo} = pkg;\n\nconsole.log(a);\nconsole.log(b);\nconsole.log(foo());\n\n",[2154],{"type":16,"tag":30,"props":2155,"children":2156},{"__ignoreMap":7},[2157,2165,2192,2209,2226,2247,2260,2268,2275,2282,2289,2311,2319,2365,2373,2389,2405],{"type":16,"tag":322,"props":2158,"children":2159},{"class":324,"line":325},[2160],{"type":16,"tag":322,"props":2161,"children":2162},{"style":329},[2163],{"type":22,"value":2164},"// ./lib/cjs.js\n",{"type":16,"tag":322,"props":2166,"children":2167},{"class":324,"line":335},[2168,2173,2178,2183,2187],{"type":16,"tag":322,"props":2169,"children":2170},{"style":349},[2171],{"type":22,"value":2172},"module",{"type":16,"tag":322,"props":2174,"children":2175},{"style":365},[2176],{"type":22,"value":2177},".",{"type":16,"tag":322,"props":2179,"children":2180},{"style":349},[2181],{"type":22,"value":2182},"exports",{"type":16,"tag":322,"props":2184,"children":2185},{"style":339},[2186],{"type":22,"value":357},{"type":16,"tag":322,"props":2188,"children":2189},{"style":365},[2190],{"type":22,"value":2191}," {\n",{"type":16,"tag":322,"props":2193,"children":2194},{"class":324,"line":371},[2195,2200,2205],{"type":16,"tag":322,"props":2196,"children":2197},{"style":365},[2198],{"type":22,"value":2199},"  a: ",{"type":16,"tag":322,"props":2201,"children":2202},{"style":349},[2203],{"type":22,"value":2204},"1",{"type":16,"tag":322,"props":2206,"children":2207},{"style":365},[2208],{"type":22,"value":2046},{"type":16,"tag":322,"props":2210,"children":2211},{"class":324,"line":401},[2212,2217,2222],{"type":16,"tag":322,"props":2213,"children":2214},{"style":365},[2215],{"type":22,"value":2216},"  b: ",{"type":16,"tag":322,"props":2218,"children":2219},{"style":349},[2220],{"type":22,"value":2221},"2",{"type":16,"tag":322,"props":2223,"children":2224},{"style":365},[2225],{"type":22,"value":2046},{"type":16,"tag":322,"props":2227,"children":2228},{"class":324,"line":425},[2229,2234,2238,2243],{"type":16,"tag":322,"props":2230,"children":2231},{"style":414},[2232],{"type":22,"value":2233},"  foo",{"type":16,"tag":322,"props":2235,"children":2236},{"style":365},[2237],{"type":22,"value":1557},{"type":16,"tag":322,"props":2239,"children":2240},{"style":339},[2241],{"type":22,"value":2242},"function",{"type":16,"tag":322,"props":2244,"children":2245},{"style":365},[2246],{"type":22,"value":422},{"type":16,"tag":322,"props":2248,"children":2249},{"class":324,"line":443},[2250,2255],{"type":16,"tag":322,"props":2251,"children":2252},{"style":339},[2253],{"type":22,"value":2254},"    return",{"type":16,"tag":322,"props":2256,"children":2257},{"style":349},[2258],{"type":22,"value":2259}," 3\n",{"type":16,"tag":322,"props":2261,"children":2262},{"class":324,"line":1387},[2263],{"type":16,"tag":322,"props":2264,"children":2265},{"style":365},[2266],{"type":22,"value":2267},"  }\n",{"type":16,"tag":322,"props":2269,"children":2270},{"class":324,"line":1395},[2271],{"type":16,"tag":322,"props":2272,"children":2273},{"style":365},[2274],{"type":22,"value":449},{"type":16,"tag":322,"props":2276,"children":2277},{"class":324,"line":1403},[2278],{"type":16,"tag":322,"props":2279,"children":2280},{"emptyLinePlaceholder":560},[2281],{"type":22,"value":563},{"type":16,"tag":322,"props":2283,"children":2284},{"class":324,"line":1771},[2285],{"type":16,"tag":322,"props":2286,"children":2287},{"style":329},[2288],{"type":22,"value":332},{"type":16,"tag":322,"props":2290,"children":2291},{"class":324,"line":1779},[2292,2296,2301,2306],{"type":16,"tag":322,"props":2293,"children":2294},{"style":339},[2295],{"type":22,"value":204},{"type":16,"tag":322,"props":2297,"children":2298},{"style":365},[2299],{"type":22,"value":2300}," pkg ",{"type":16,"tag":322,"props":2302,"children":2303},{"style":339},[2304],{"type":22,"value":2305},"from",{"type":16,"tag":322,"props":2307,"children":2308},{"style":546},[2309],{"type":22,"value":2310}," './lib/cjs.js'\n",{"type":16,"tag":322,"props":2312,"children":2314},{"class":324,"line":2313},12,[2315],{"type":16,"tag":322,"props":2316,"children":2317},{"emptyLinePlaceholder":560},[2318],{"type":22,"value":563},{"type":16,"tag":322,"props":2320,"children":2322},{"class":324,"line":2321},13,[2323,2327,2331,2335,2339,2343,2347,2351,2356,2360],{"type":16,"tag":322,"props":2324,"children":2325},{"style":339},[2326],{"type":22,"value":494},{"type":16,"tag":322,"props":2328,"children":2329},{"style":365},[2330],{"type":22,"value":499},{"type":16,"tag":322,"props":2332,"children":2333},{"style":349},[2334],{"type":22,"value":504},{"type":16,"tag":322,"props":2336,"children":2337},{"style":365},[2338],{"type":22,"value":509},{"type":16,"tag":322,"props":2340,"children":2341},{"style":349},[2342],{"type":22,"value":514},{"type":16,"tag":322,"props":2344,"children":2345},{"style":365},[2346],{"type":22,"value":509},{"type":16,"tag":322,"props":2348,"children":2349},{"style":349},[2350],{"type":22,"value":523},{"type":16,"tag":322,"props":2352,"children":2353},{"style":365},[2354],{"type":22,"value":2355},"} ",{"type":16,"tag":322,"props":2357,"children":2358},{"style":339},[2359],{"type":22,"value":533},{"type":16,"tag":322,"props":2361,"children":2362},{"style":365},[2363],{"type":22,"value":2364}," pkg;\n",{"type":16,"tag":322,"props":2366,"children":2368},{"class":324,"line":2367},14,[2369],{"type":16,"tag":322,"props":2370,"children":2371},{"emptyLinePlaceholder":560},[2372],{"type":22,"value":563},{"type":16,"tag":322,"props":2374,"children":2376},{"class":324,"line":2375},15,[2377,2381,2385],{"type":16,"tag":322,"props":2378,"children":2379},{"style":365},[2380],{"type":22,"value":571},{"type":16,"tag":322,"props":2382,"children":2383},{"style":414},[2384],{"type":22,"value":576},{"type":16,"tag":322,"props":2386,"children":2387},{"style":365},[2388],{"type":22,"value":581},{"type":16,"tag":322,"props":2390,"children":2392},{"class":324,"line":2391},16,[2393,2397,2401],{"type":16,"tag":322,"props":2394,"children":2395},{"style":365},[2396],{"type":22,"value":571},{"type":16,"tag":322,"props":2398,"children":2399},{"style":414},[2400],{"type":22,"value":576},{"type":16,"tag":322,"props":2402,"children":2403},{"style":365},[2404],{"type":22,"value":597},{"type":16,"tag":322,"props":2406,"children":2408},{"class":324,"line":2407},17,[2409,2413,2417,2421,2425],{"type":16,"tag":322,"props":2410,"children":2411},{"style":365},[2412],{"type":22,"value":571},{"type":16,"tag":322,"props":2414,"children":2415},{"style":414},[2416],{"type":22,"value":576},{"type":16,"tag":322,"props":2418,"children":2419},{"style":365},[2420],{"type":22,"value":543},{"type":16,"tag":322,"props":2422,"children":2423},{"style":414},[2424],{"type":22,"value":523},{"type":16,"tag":322,"props":2426,"children":2427},{"style":365},[2428],{"type":22,"value":621},{"type":16,"tag":288,"props":2430,"children":2431},{"start":401},[2432],{"type":16,"tag":59,"props":2433,"children":2434},{},[2435,2436,2442],{"type":22,"value":629},{"type":16,"tag":30,"props":2437,"children":2439},{"className":2438},[],[2440],{"type":22,"value":2441},"node esm.js",{"type":22,"value":2443},"，输出了以下信息：",{"type":16,"tag":312,"props":2445,"children":2446},{"className":639,"code":1425,"language":641,"meta":7,"style":7},[2447],{"type":16,"tag":30,"props":2448,"children":2449},{"__ignoreMap":7},[2450,2457,2464],{"type":16,"tag":322,"props":2451,"children":2452},{"class":324,"line":325},[2453],{"type":16,"tag":322,"props":2454,"children":2455},{"style":414},[2456],{"type":22,"value":1437},{"type":16,"tag":322,"props":2458,"children":2459},{"class":324,"line":335},[2460],{"type":16,"tag":322,"props":2461,"children":2462},{"style":414},[2463],{"type":22,"value":1445},{"type":16,"tag":322,"props":2465,"children":2466},{"class":324,"line":371},[2467],{"type":16,"tag":322,"props":2468,"children":2469},{"style":414},[2470],{"type":22,"value":1453},{"type":16,"tag":24,"props":2472,"children":2473},{},[2474,2479,2481,2486],{"type":16,"tag":30,"props":2475,"children":2477},{"className":2476},[],[2478],{"type":22,"value":51},{"type":22,"value":2480},"成功引入",{"type":16,"tag":30,"props":2482,"children":2484},{"className":2483},[],[2485],{"type":22,"value":43},{"type":22,"value":2487},"模块!!!",{"type":16,"tag":24,"props":2489,"children":2490},{},[2491,2493,2498,2500,2505],{"type":22,"value":2492},"在Node.js中",{"type":16,"tag":30,"props":2494,"children":2496},{"className":2495},[],[2497],{"type":22,"value":51},{"type":22,"value":2499},"模块是支持引入",{"type":16,"tag":30,"props":2501,"children":2503},{"className":2502},[],[2504],{"type":22,"value":43},{"type":22,"value":2506},"模块的，但是注意以下几点：",{"type":16,"tag":55,"props":2508,"children":2509},{},[2510,2556],{"type":16,"tag":59,"props":2511,"children":2512},{},[2513,2515,2520,2522,2527,2529,2534,2535,2541,2543,2548,2549,2555],{"type":22,"value":2514},"为了让Node.js正确识别这是一个",{"type":16,"tag":30,"props":2516,"children":2518},{"className":2517},[],[2519],{"type":22,"value":43},{"type":22,"value":2521},"模块，根据",{"type":16,"tag":30,"props":2523,"children":2525},{"className":2524},[],[2526],{"type":22,"value":1861},{"type":22,"value":2528},"机制，需要修改",{"type":16,"tag":30,"props":2530,"children":2532},{"className":2531},[],[2533],{"type":22,"value":51},{"type":22,"value":1870},{"type":16,"tag":30,"props":2536,"children":2538},{"className":2537},[],[2539],{"type":22,"value":2540},".cjs",{"type":22,"value":2542},"，或者通过同级或者最近父级文件夹下的",{"type":16,"tag":30,"props":2544,"children":2546},{"className":2545},[],[2547],{"type":22,"value":1464},{"type":22,"value":1885},{"type":16,"tag":30,"props":2550,"children":2552},{"className":2551},[],[2553],{"type":22,"value":2554},"\"type\": \"commonjs\"",{"type":22,"value":1893},{"type":16,"tag":59,"props":2557,"children":2558},{},[2559,2561,2566,2568,2573,2575,2580,2581,2587],{"type":22,"value":2560},"转换时，",{"type":16,"tag":30,"props":2562,"children":2564},{"className":2563},[],[2565],{"type":22,"value":43},{"type":22,"value":2567},"模块的",{"type":16,"tag":30,"props":2569,"children":2571},{"className":2570},[],[2572],{"type":22,"value":115},{"type":22,"value":2574}," 与 ",{"type":16,"tag":30,"props":2576,"children":2578},{"className":2577},[],[2579],{"type":22,"value":51},{"type":22,"value":2567},{"type":16,"tag":30,"props":2582,"children":2584},{"className":2583},[],[2585],{"type":22,"value":2586},"export default",{"type":22,"value":2588},"对应。",{"type":16,"tag":17,"props":2590,"children":2592},{"id":2591},"总结",[2593],{"type":22,"value":2591},{"type":16,"tag":24,"props":2595,"children":2596},{},[2597,2599,2604,2605,2610,2612,2618],{"type":22,"value":2598},"经过以上的章节，我们了解到",{"type":16,"tag":30,"props":2600,"children":2602},{"className":2601},[],[2603],{"type":22,"value":43},{"type":22,"value":70},{"type":16,"tag":30,"props":2606,"children":2608},{"className":2607},[],[2609],{"type":22,"value":51},{"type":22,"value":2611},"模块各自的特点，也知道了Node.js的",{"type":16,"tag":504,"props":2613,"children":2616},{"href":2614,"rel":2615,"title":767},"https://link.juejin.cn/?target=https%3A%2F%2Fnodejs.org%2Fdocs%2Flatest-v14.x%2Fapi%2Fpackages.html%23packages_determining_module_system",[769],[2617],{"type":22,"value":772},{"type":22,"value":2619},"机制时是如何识别代码属于哪种模块，再通过不同的loader去转换代码。",{"type":16,"tag":24,"props":2621,"children":2622},{},[2623,2625,2630],{"type":22,"value":2624},"当你需要封装一些类库，引入不同规范依赖的时候也能够游刃有余地处理，也可以配合一些打包工具例如",{"type":16,"tag":30,"props":2626,"children":2628},{"className":2627},[],[2629],{"type":22,"value":35},{"type":22,"value":2631},"的使用。",{"type":16,"tag":24,"props":2633,"children":2634},{},[2635,2637,2642,2644,2650,2652,2658,2660,2665,2667,2672],{"type":22,"value":2636},"原本两种模块规范是分别用在不同的端，但是由于",{"type":16,"tag":30,"props":2638,"children":2640},{"className":2639},[],[2641],{"type":22,"value":51},{"type":22,"value":2643},"规范的异步加载优势，天生支持",{"type":16,"tag":30,"props":2645,"children":2647},{"className":2646},[],[2648],{"type":22,"value":2649},"Tree Shaking",{"type":22,"value":2651},"，以及各种JavaScript打包工具的流行，例如",{"type":16,"tag":30,"props":2653,"children":2655},{"className":2654},[],[2656],{"type":22,"value":2657},"Webpack",{"type":22,"value":2659},"，",{"type":16,"tag":30,"props":2661,"children":2663},{"className":2662},[],[2664],{"type":22,"value":35},{"type":22,"value":2666},"等等，越来越多的开发者在封装各类工具库时使用",{"type":16,"tag":30,"props":2668,"children":2670},{"className":2669},[],[2671],{"type":22,"value":51},{"type":22,"value":165},{"type":16,"tag":24,"props":2674,"children":2675},{},[2676,2678,2683,2685,2690,2692,2697,2699,2704],{"type":22,"value":2677},"后面我将会写一篇文章讲解使用",{"type":16,"tag":30,"props":2679,"children":2681},{"className":2680},[],[2682],{"type":22,"value":35},{"type":22,"value":2684},"工具的简单使用，来解决打包成",{"type":16,"tag":30,"props":2686,"children":2688},{"className":2687},[],[2689],{"type":22,"value":43},{"type":22,"value":2691},"规范时处理",{"type":16,"tag":30,"props":2693,"children":2695},{"className":2694},[],[2696],{"type":22,"value":51},{"type":22,"value":2698},"。不过也许在不远的将来，Node.js默认使用",{"type":16,"tag":30,"props":2700,"children":2702},{"className":2701},[],[2703],{"type":22,"value":51},{"type":22,"value":2705},"规范执行js代码也说不定。",{"type":16,"tag":24,"props":2707,"children":2708},{},[2709],{"type":22,"value":2710},"感谢你阅读到这里，如有发现文章中存在错误的地方也请指正。",{"type":16,"tag":2712,"props":2713,"children":2714},"style",{},[2715],{"type":22,"value":2716},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":7,"searchDepth":335,"depth":335,"links":2718},[2719,2720,2721,2725],{"id":19,"depth":335,"text":19},{"id":96,"depth":335,"text":99},{"id":216,"depth":335,"text":219,"children":2722},[2723,2724],{"id":283,"depth":371,"text":286},{"id":1919,"depth":371,"text":1922},{"id":2591,"depth":335,"text":2591},"markdown","content:articles:20240323.md","content","articles/20240323.md","md",1772793492649]