模块的的加载和导出

前言

首先要承认自己又偷懒了，这次又没按时更新。主要原因还是懒，不过一定要努力学习啊。回到正题，目前正在学习react，在做项目的时候，对require，import有些晕了，搞不清楚，所以今天就研究一下。

import require区别

node的重要思想之一就是模块化，node遵循CommonJs规范。而在ES6出现之前，都是import/export来实现node模块化的加载。ES6出现之后，由于ES6发布的module并没有直接采用CommonJS，甚至连require都没有采用，所以require仍然只是node的一个私有的全局方法，module.exports也只是node私有的一个全局变量属性。

babel项目出现后，babel 将还未被宿主环境（各浏览器、Node.js）直接支持的 ES6 Module 编译为 ES5 的 CommonJS —— 也就是 require/exports 这种写法。所以说目前你编写的 import/export 最终都是编译require/exports 来执行的。

import和require还有一些小的差别

1.调用时间

require是运行时调用，所以require理论上可以运用在代码的任何地方
import是编译时调用，所以必须放在文件开头

2.形式不一样

require/exports 的用法只有以下三种简单的写法：

const fs = require('fs')
exports.fs = fs
module.exports = fs

import/export 的写法就多种多样：

import fs from 'fs'
import {default as fs} from 'fs'
import * as fs from 'fs'
import {readFile} from 'fs'
import {readFile as read} from 'fs'
import fs, {readFile} from 'fs'

export default fs
export const fs
export function readFile
export {readFile, read}
export * from 'fs'

导出模块

首先是一个基本问题

module.exports和exports是属于CommonJS模块规范！
export和export default是属于ES6语法
module.exports和exports的区别与联系

node采用的是CommonJs规范，根据这个规范，每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。

CommonJS规范规定，每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。

代码：
```
var x = 5;
var addX = function (value) {
  return value + x;
};
module.exports.x = x;
module.exports.addX = addX;
```
上面代码通过module.exports输出变量x和函数addX
```
var example = require('./example.js');

console.log(example.x); // 5
console.log(example.addX(1)); // 6
```
exports变量是指向module.exports，加载模块实际是加载该模块的module.exports。这等同在每个模块头部，有一行这样的命令。
```
var exports = module.exports;
```
于是我们可以直接在 exports 对象上添加方法，表示对外输出的接口，如同在module.exports上添加一样。注意，不能直接将exports变量指向一个值，因为这样等于切断了exports与module.exports的联系。
export和export default的区别与联系

模块功能主要由：export和import构成。export导出模块的对外接口，import命令导入其他模块暴露的接口。

export其实和export default就是写法上面有点差别，一个是导出一个个单独接口，一个是默认导出一个整体接口。使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。这里就有一个简单写法不用去知道有哪些具体的暴露接口名，就用export default命令，为模块指定默认输出。
代码：
export：
```
//demo1.js
export const str = 'hello world'

export function f(a){
    return a+1
}
```
导入：
```
    //demo2.js
    import { str, f } from 'demo1' //也可以分开写两次，导入的时候带花括号
```
export default：
```
		//demo1.js
		export default const str = 'hello world'
```
导出:
```
		//demo2.js
		import str from 'demo1' //导入的时候没有花括号
```

最后

这几天有点松懈，没有按时完成计划，所以决定在多写一篇博客。另外此文有不足之处还请大家多多评论交流，作者小白，请大家包容。

本文引用了多篇网上博客，如有侵权，请私信或评论。

https://www.cnblogs.com/Nutrient-rich/p/7047877.html
https://segmentfault.com/a/1190000010472916