用代码验证,esm 导出的是值的引用,commonjs导出的是值的拷贝

本文解释了ESM(模块系统)和CommonJS在导出值方面的区别:ESM导出的是值的引用,而CommonJS导出的是值的拷贝。通过Vite和Webpack示例,展示了如何通过实践验证这一理论。面试时遇到此类问题时,记住这个关键点很重要。
摘要由CSDN通过智能技术生成

首先需要学习一下 esm 和 commonjs 的区别,其中一条关于导出值我们可以手动验证一下,先记住结论

  1. esm 导出的是值的引用
  2. commonjs导出的是值的拷贝

没错我又遇到这个问题了,面试官先问我 commonjs 和 esm 有啥区别?

然后问如果 commonjs 导出一个模块,在模块内部改变一个值,模块外部的值会改变吗,我一脸懵逼?难道不是一样的么?然后又问 esm 的呢?【正确答案是commonjs 不会改变,esm 会改变】

显而易见,他想得到的区别的答案之一肯定有【导出值】的区别。很遗憾我没有答出来。

esm 导出的是值的引用

可以使用这个项目中的 vite 目录验证这个问题,因为 vite 是默认支持 esm的,增加几个文件用于测试

1. 增加一个模块文件导出一个数组

2. 增加两个 test 文件

分别引用上面的模块,然后其中一个改变数组的值,具体请看代码

3. 进入 vite 文件夹

运行 npm run dev

commonjs 导出的是值的拷贝

同样,可以使用这个项目中的 webpack 目录验证这个问题,因为 webpack 是支持 commonjs 的【当然也可以支持esm,只不过我这个现成的项目只支持 commonjs】,增加几个文件用于测试。

步骤和上面一样,具体请看代码,不再赘述!

运行 cd webpack 和  npm run dev

总之牢记这两句话,【esm 导出的是值的引用,commonjs导出的是值的拷贝】问你 esm 和 cjs 的区别,这个是必答的!

上面的代码都在这个分支

别老收藏不看啊!点进去给我的仓库点点 star !!!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值