import与require有什么区别（ES6模块和CommomJS模块的区别）

不知道你在学习别人的代码时，有没有遇见过这样的代码
const a = require(fileName).default

这里为什么没有用import？

首先我们需要了解一下，import和require的功能是什么，他们又有什么区别。

Common JS

• 最初是为node.js作为服务端设计的版本
• 每个文件拥有独立的作用域
• 通过module.exports导出模块中的内容，导出是一个模块向外暴露自己的唯一方式。
• 通过require进行模块的导入，如果导入的模块是第一次被加载，这时会先执行该模块中的代码，然后再导出执行后的内容，如果模块曾经被加载过，则直接导出第一次加载时执行后的内容，相当是一个静态值了。

ES6模块

• 每个文件作为一个模块，每个模块有独立的作用与
• 通过 export 导出
  • 命名导出：export {a,b,c}，export { variable1 as name1, variable2 as name2, …, nameN }
  • 默认导出：export default a，默认导出只能导出一个对象
    -通过import 导入，默认导出的变量导入时可以随意命名，命名导出方式导入时必须名称必须一致，可以使用 as 重新命名。

区别

Common JS对模块依赖的解决时动态的，而ES6模块时静态的。

模块导入时，CommodJS是值拷贝，而ES6则是只读的动态映射。

动态：模块的依赖关系建立在代码运行阶段
静态：模块的依赖关系建立在代码编译阶段

export default 语法糖

default 关键字，说白了，就是别名(as)的语法糖

导出

export default function() {
}
// 等效于：
function a() {
};
export {a as default};
1
2
3
4
5
6

导入

import a from './d';
// 等效于：
import {default as a} from './d';
1
2
3

上文提到过，export 关键字是导出一个对象，对象内存在一个属性(我们要暴露的)，export default 则是 export 语法糖，import 一个export default 暴露出来的模块包含了解构赋值的步骤，所以在node中使用require去请求一个export default的模块需要我们通过.语法去取出对象中的属性(因为require没有解构赋值)，清晰明了。

在看最开始的代码const a = require(fileName).default
这样就显得非常清晰，我们 module.exports 的是啥，require 的就是啥。

但export default包装了一层语法糖，让我们看得不甚清晰：

const a = 'helloworld';
export default a;
1
2

其实导出的是

{
  "default": a
}
1
2
3

而并非 a 这个变量，这就是我为什么之前要强调语法糖了，如果你将 export default 还原为

const a = 'helloworld';
export {a as default}
1
2

那整个逻辑就十分清晰明了～