持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第14天，点击查看活动详情
前情提要
对于require和import两个关键字应该都很熟悉了，毕竟在项目中也是非常常见的东西。依稀记得，在2017年写小程序的时候，还有React的时候，需要导入文件，比如图片，一般会使用require关键字来导入。但是随着ES6的普及，es6的import模块化逐渐成为了主流。
那么在这个改变的过程中，到底发生了什么事情呢？
require的使用方式
- 用于在当前模块中加载别的模块，使用的时候还需要引入对应模块的地址即可，相对的路径，绝对的路径都可以。
- require是AMD模块化规范的引入方式。
- require属于运行时执行，也就意味着你可以在代码的任何地方引入它。也不一定非要把它赋值给某个变量。
- require的本质是赋值，module.exports后面返回的什么，那么require就赋值什么
- 对于module.exports返回的基本数据类型，require会进行深拷贝，而返回的如果是引用数据类型，那么require只会进行浅拷贝。
- reuqire在Nodejs中最为常用。
import的使用方式
- import属于es6的模块化，本质是解构。
- import不会在将整个模块运行之后赋值给某个对戏那个，而是只会选择import的接口：export进行编译，性能上有所以提升。
- import属于编译时运行，也就意味着通过import导入的模块必须写在代码的最顶部。
- import目前浏览器还没有兼容，需要通过babel进行转译，而转译最终也是转译成requeir的方式。
- import大多使用在前端模块化的开发中使用。
import内卷的过程
- 由上面可以看出import无法进行运行时编译，这也就限制了import使用频率。但是import又岂甘落人之后，于是import()运行时编译边应运而生。
- 对于import()的使用大家也都不陌生，前端项目中使用路由懒加载时便使用import()进行加载对应的路由组件。
总结
综上所述，二者的区别是：
- 运行的时间不同：import是静态编译时运行，而require是在运行时执行，运行完导入模块的所有代码后返回module。exports返回的数据。
- 注：之后的import()同样是运行时执行
- 本质不同：import的本质是解构，而require的本质是赋值。
- 浏览器的兼容性不同：import目前只能通过babel转译成ES5的代码。而require原生支持。
- 使用环境不同：import大多在前端开发的环境中，而require大多在Nodejs环境中。
