首先需要学习一下 esm 和 commonjs 的区别,其中一条关于导出值我们可以手动验证一下,先记住结论
- esm 导出的是值的引用
- 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 !!!!