mqyqingfeng/frontend-interview-question-and-answer

[字节跳动] common.js 和 es6 中模块引入的区别?

mqyqingfeng opened this issue · 2 comments

[字节跳动] common.js 和 es6 中模块引入的区别?

common.js:

  • require()生成一个对象,只会加载一次,会被缓存,这个对象是module.exports属性的一个拷贝。模块内部的变化相互不反映。可以实现条件加载

  • 在服务端运行时同步阻塞加载,在浏览器中需要提前编译打包

esm

  • 编译时加载,代码静态解析阶段就会生成,所以不能实现条件加载(使用import()函数可以实现)

  • 模块输出的是一个引用,并且不会缓存值,模块内部的变化会相互反应

花名胜枫:

CommonJs是一种模块规范,最初被应用于node.js,成为nodejs的模块规范。运行在浏览器端的js由于也缺少类似的规范,在es6出来之前,前端也实现了一套相同的模块规范(例如:AMD),用来对前端模块进行管理。自es6起,引入了一套新的es6 module规范,在语言标准的层面上实现了模块功能,而且实现得相当简单,有望成为浏览器和服务器通用的模块解决方案。但目前浏览器对ES6 Module兼容还不太好,我们平时在webpack中使用的export&import,会经过babel转换为CommonJS规范。在使用上的差别主要有:
(1)CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。
(2)CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。
(3)CommonJs是单个值导出,ES6 Module可以导出多个
(4)CommonJs是动态语法可以写在判断里,ES6 Module静态语法只能写在顶层
(5)CommonJs的 this 是当前模块,ES6 Module的 this 是 undefined