CommonJs和es6的Module的区别

历史上，js一直没有模块(module)体系，无法将一个项目拆分成多个模块文件。

正对这一情况，社区出现了一些统一的规范：CommonJs和AMD，前者是针对服务端的js，也就是nodejs。

后者是针对浏览器的。ES6在语言标准层面上，实现了模块功能，而且实现也比较简单。

完全可以取代CommonJs和AMD。达成前后端js的模块风格统一。

不过目前还未完全达到这一目的。nodejs目前主流还是采用CommonJS规范。

不过在v13.2版本，nodejs已经实现了ES6模块语法，还未正式替换，在考察阶段。

v13.2版本将js文件以 .mjs结尾，nodejs将它视为ES6模块。

以 .cjs结尾则视为CommonJS模块。

也可以在包的package.json文件中增加 "type": "module"信息。

nodejs则将整个包都视为ES6模块来加载运行。

区别：

1. 两者的模块导入导出语法不同，commonjs是module.exports，exports导出，require导入；ES6则是export导出，import导入。
2. commonjs是运行时加载模块，ES6是在静态编译期间就确定模块的依赖。
3. ES6在编译期间会将所有import提升到顶部，commonjs不会提升require。
4. commonjs导出的是一个值拷贝，会对加载结果进行缓存，一旦内部再修改这个值，则不会同步到外部。ES6是导出的一个引用，内部修改可以同步到外部。
5. 两者的循环导入的实现原理不同，commonjs是当模块遇到循环加载时，返回的是当前已经执行的部分的值，而不是代码全部执行后的值，两者可能会有差异。所以，输入变量的时候，必须非常小心。ES6 模块是动态引用，如果使用import从一个模块加载变量（即import foo from 'foo'），那些变量不会被缓存，而是成为一个指向被加载模块的引用，需要开发者自己保证，真正取值的时候能够取到值。
6. commonjs中顶层的this指向这个模块本身，而ES6中顶层this指向undefined。
7. 然后就是commonjs中的一些顶层变量在ES6中不再存在：

arguments
require
module
exports
__filename
__dirname

转发自：https://blog.csdn.net/weixin_41763571/article/details/119679412

作者: Bill 本文地址: http://biaoblog.cn/info?id=1669195047252

版权声明: 本文为原创文章，版权归 biaoblog 个人博客 所有，欢迎分享本文，转载请保留出处，谢谢！