ES6模块和commonjs模块有什么不同
历史
JavaScript生态现在有两种模块化方案,一种是ES6模块,简称ESM;另一种是CommonJS模块,简称CJS。平时也会看到很多说ESM怎么样,巴拉巴拉的,说的就是ES6模块。
CommonJS早期就是为Node.js而产生的,因为有Node.js时,ES6还没有呢。CommonJS模块系统与ES6模块系统并不兼容。
CommonJS主要使用require()
和module.exports
来引入和导出各种值。
ES6主要使用import
和export
来引入和导出各种值。
它们采用不同的加载方案。从 Node.js v13.2 版本开始,Node.js 已经默认打开了 ES6 模块支持。
注意:我们这里讨论的是Node.js应用,不是我们使用webpack编译的前端应用,像vue-cli或者create-react-app创建的前端应用
Node.js 要求 ES6 模块采用.mjs
后缀文件名。如果不希望将后缀名改成.mjs
,可以在项目的package.json
文件中,指定type
字段为module
。
{ "type": "module" } 复制代码
当我们设置了这个字段后,项目内的JS脚本就会以ES6模块的方式解析运行
$ node my-app.js 复制代码
如果我们还想用CommonJS 模块,那么就要将JS文件后缀改为.cjs
。或者将上面package.json
文件中的type
字段改成commonjs
,然后JS脚本会被解析成CommonJS 模块。
注意:ES6模块和CommonJS 模块尽量不要混用,在一个项目中要么全部使用ES6模块,要么使用CommonJS 模块,因为require不能引入ES6模块,import也不能引入CommonJS 模块。
区别
介绍完之后,我们来说说他们的区别:
CommonJS的
require
语法是同步的,所以就导致了CommonJS模块规范只适合用在服务端,而ES6模块无论是在浏览器端还是服务端都是可以使用的,但是在服务端中,还需要遵循一些特殊的规则才能使用 ;CommonJS 模块输出的是一个值的拷贝,而ES6 模块输出的是值的引用;
CommonJS 模块是运行时加载,而ES6 模块是编译时输出接口,使得对JS的模块进行静态分析成为了可能;
关于模块顶层的
this
指向问题,在CommonJS顶层,this
指向当前模块;而在ES6模块中,this
指向undefined
;
作者:小帅的编程笔记
链接:https://juejin.cn/post/7031566682418216997