面试：require 和 import 的区别？

CommonJS和ES6模块有什么区别？

require 和 import 在日常的开发过程中是经常使用的已经模块引入的方式，但是这两者的区别有很多人还是没搞明白，通常在一个项目中，我们基本上不用去关系这些，直接去使用，但是这两种方式的区别是什么呢？接下来看下面的代码…

commonjs的用法
1.首先创建一个index.js的文件

// lib.js
let counter = 3;
const incCounter = ()=>{
  counter++
}

module.exports = {
  counter,
  incCounter
}

2.再次创建一个main.js,使用commonjs的方式导入

// main.js
var index= require('./index');
console.log(index)
console.log(index.counter);  // 3
index.incCounter();
console.log(index.counter); // 3

结果分析： 在mian.js文件中更改变量的值，通过 require 引入 index的变量，拿到的值始终是初始化的值，相当于值的绑定。
esmodule的用法

//index.js
export let counter = 3;
export function incCounter () {
  counter++;
}

// main.js
import { counter, incCounter } from './index.js'

console.log(counter);  //3 
incCounter()
console.log(counter)  //4 

结果分析：通过 import 引入 counter的变量，在源文件中修改变量的值后，引入拿到的变量值也会改变，相当于引用。

总结

1、导入require 导出 exports/module.exports 是 CommonJS 的标准，通常适用范围如 Node.js。
2、import/export 是 ES6 的标准，通常适用范围如 Vue、React。
3、commonjs 输出的是一个值的拷贝，而es6输出的是值的引用。
4、 import 是引用，所以你修改 import 的值也会影响，而import 导入的名字则是按 const 的规则来处理的，import() 是支持动态加载的。
5、 require 相当于值的绑定，无法修改源文件的基本数据类型，所以基本类型的值 与 原始文件无关， 但引用类型会影响，引用类型相当于浅拷贝。