mqyqingfeng/frontend-interview-question-and-answer

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

mqyqingfeng opened this issue · 2 comments

mqyqingfeng commented
[字节跳动] common.js 和 es6 中模块引入的区别？
ed1son67 commented

common.js：

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

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

esm

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

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

rootsli commented

花名胜枫：

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

  • 👍1