1. 前提
(1)commonjs (简称 cjs ):就是指 commonjs 的模块规范,node 中用的是这个规范
(2)es module (简称 esm):是指 es6 的模块规范,node 中是不支持这个的,所以一般需要babel 转译
关于babel可以参考我的这篇文章
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 的区别
- cjs
- 动态语法,导入导出可以写在判断里,运行时加载
- 同步加载
- 在处理循环依赖时会导致一种"半完成"状态,其中被导入的模块对象是部分填充的。【可以处理循环依赖】
- 使用 require 导入
- 使用 exports.xxx = / module.exports = 导出
- this 指当前模块
- 模块输出是一个值的拷贝【重点】
- webpack 不支持 cjs 的tree-shaking
- esm
- 静态语法,只能写在顶层,编译时输出接口
- 支持异步加载,提供静态分析和优化,可以直接在浏览器中使用
- 允许循环依赖,但会将被导入的模块当作未定义的空对象,直到真正加载完成【可以处理循环依赖】
- 使用 export xx 导出
- 使用 import 导入
- this 是 undefined
- 模块输出是值的引用【重点】
- webpack 支持 esm 的 tree-shaking