【前端技能分享】浅谈require与import的区别。

import和require到底有什么区别？

相信很多人在开发过程中以及面试过程中经常会遇到这个问题，今天我们从多方面来简单总结一下他们之间的区别。

1、定义

        require 属于 CommonJs的模块化语法规范

        import  属于 Es模块化语法规范

2、用法

        require属于动态引入，也就是说，只有当代码执行到时，才能去引入相应的模块。
import被设计为静态引入，因为其只能在文件顶部引入依赖，且在代码编译阶段就执行了引入模块的操作。（正是因为这样的设计，代码在编译阶段就能够确定模块之间的依赖关系，同时，在使用webpack等工具打包时，更有利于模块之间依赖图的构建，从而对代码进行tree Shaking等一系列的操作）。

3、原理

        require导入的是对导出值的拷贝，commonJs定义require第一次导入模块时，会根据文件名进行cache缓存，之后多次导入该模块，只要require.cache没有发生改变，都将得到完全相同的结果。

demo.js

        import 导入的是对导出值的引用，也就是说，当模块内导出的值发生改变时，import导入的结果也会发生改变。

demo.js

index.vue

延申

   demo.js

经实验证明，当我们require的是普通js文件时，require同import一样导入的是对导出值的引用，它会受js文件内部值的改变而改变。

有任何​疑问可加本人微信或进群讨论，谢谢。