【我不熟悉的javascript】commonjs和commonjs2的区别，module.exports和exports的关系

1. 前提

（1）commonjs (简称 cjs )：就是指 commonjs 的模块规范，node 中用的是这个规范

（2）es module (简称 esm)：是指 es6 的模块规范，node 中是不支持这个的，所以一般需要babel 转译

关于babel可以参考我的这篇文章

【前端工程化】babel到底是个什么，了解babel的功能, 了解core-js_我有一棵树的博客-CSDN博客babel到底是个什么，了解babel的功能https://blog.csdn.net/qq_17335549/article/details/126978888

2. 两种 cjs 的区别:  导出模块的方法不同

commonjs 

使用：exports.xxx = xxx

commonjs2

使用：module.exports = xxx

commonjs2 的这种写法用的比较多，所以以后尽量用这种，毕竟人家是 v2 版本

但其实，commonjs2 是 node 对 commonjs 规范的一个实现，node 改造了 commonjs 规范

Node的模块实现

Node在实现中，并非完全按照规范实现，而是对模块规范进行了一定的取舍，同时也增加了少许自身需要的特性。 ——《深入浅出nodejs》

3. module.exports 和 exports 的关系：

module.exports 和 exports 指向同一个对象，所以

（1）不要直接改动 exports 的值，会断开引用链接，但是可以像 commonjs 中的写法一样给exports 增加变量（比如：exports.xxxx = xxx）

（2）commonjs2 的写法就好很多了，可以直接给 module.exports 赋值

许多初学者都曾经纠结过为何存在exports的情况下，还存在 module.exports，理想情况下，只需要赋值给exports即可

exports = function () {
    //
}
'
运行
运行

但是通常都会得到一个失败的结果，其原因在于，exports 对象是通过形参的方式传入的，直接赋值形参会改变形参的引用，但并不能改变作用域外的值

如果要达到 require 引入一个类的效果，请赋值给 module.exports 对象，这个迂回的方案不改变形参的引用

——《深入浅出nodejs》

 参考

commonjs vs commonjs2 | cocoo前端笔记https://www.css3.io/commonjs-vs-commonjs2.html

4. commonjs 和 esm 的区别

1. cjs
   1. 动态语法，导入导出可以写在判断里，运行时加载
   2. 同步加载
   3. 在处理循环依赖时会导致一种"半完成"状态，其中被导入的模块对象是部分填充的。【可以处理循环依赖】
   4. 使用 require 导入
   5. 使用 exports.xxx = / module.exports = 导出
   6. this 指当前模块
   7. 模块输出是一个值的拷贝【重点】
   8. webpack 不支持 cjs 的tree-shaking
2. esm 
   1. 静态语法，只能写在顶层，编译时输出接口
   2. 支持异步加载，提供静态分析和优化，可以直接在浏览器中使用
   3. 允许循环依赖，但会将被导入的模块当作未定义的空对象，直到真正加载完成【可以处理循环依赖】
   4. 使用 export xx 导出
   5. 使用 import 导入
   6. this 是 undefined
   7. 模块输出是值的引用【重点】
   8. webpack 支持 esm 的 tree-shaking