require与import及exports与export的区别与使用

在这里我们要讨论的模块是node.js中使用的CommonJS规范与es6中的模块的不同。

写得有些乱，先记录下来吧。

一、CommonJS规范

CommonJS规范规定，每个模块内部，有一个module对象{}代表当前模块。它的exports属性（即module.exports）是对外的接口。

加载某个模块，其实是加载该模块的module.exports属性。
exports是module.exports的一个引用，是辅助module.exports添加内容的，exports指向的是module.exports，
这等同在每个模块头部，有一行这样的命令。
var exports = module.exports;

因此，我们可以直接使用exports.xxx="..."

注意，不能直接将exports变量指向一个值，因为这样等于切断了exports与module.exports的联系。

那么，我们什么时候用exports？什么时候用module.exports呢？

当一个模块需要导出特定类型的单个成员的时候，比如数组，方法等，这个时候必须使用module.exports方法，而exports只能是返回一个object对象。

require用于导入module.exports输出的模块内容，它是node的一个私有的全局方法，属于同步加载。基于AMD规范。node.js是基于CommonJS规范的。AMD与CommonJS在使用上很相似。

二、es6模块

ES6 的模块不是对象，而是通过 export 命令输出的代码。我们在node中使用babel支持ES6，也仅仅是将ES6转码为ES5再执行，目前在node中使用import，会被转码成require。

import是es6中的语法标准，与其对应的是export；

require与import都用于导入模块。

两者的不同如下：

模块的加载时间不同：

require是运行时加载，import是编译时加载。因此，require可以写在代码的任意位置，而import需要写在文件的最顶端。

模块的本质：

require是赋值过程，它相当于module.exports的传送门，module.exports后面的内容是什么，require的结果就是什么，对象、数字、字符串、函数……再把require的结果赋值给某个变量。

使用方法如下：

模块输出：
a.js:
module.exports={
    a:function(){
      ......
    },
url:"我是一串链接"
}
模块导入：
b.js:
var obj = require('./a);
obj.a();
console.log(obj.url);

若需要使用require加载es6默认导出(export default mycomponent)的模块，则需要使用require('...').default。主要原因为：node中处理es6模块时，加载导出的模块格式为：

{
 default:mycomponent
}

import是解构过程，ES6 的模块不是对象，而是通过 export 命令输出的代码。我们在node中使用babel支持ES6，也仅仅是将ES6转码为ES5再执行，目前在node中使用import，会被转码成require。

使用import，需要了解export的相关知识。

export 语句用于从模块中导出函数、对象或原始值，以便其他程序可以通过import语句使用它们。

无论是否声明严格模式，导出的模块都处于严格模式。

有两种不同的导出方式，命名导出和默认导出。每一个模块中可以定义多个命名导出，但是只允许有一个默认导出。

命名导出：导入时要使用相同的名称。

a.js中：
//导出之前声明的方法
export { myFunction }; 

// 导出一个常量
export const foo = Math.sqrt(9);//返回一个数的平方根

//导出一个变量
// 写法一
export var m = 1;

// 写法二
var m = 1;
export {m};

// 写法三
var n = 1;
export {n as m};


//在其他脚本中导入：
b.js中：
import {myFunction,foo,m} from "./a";
console.log(myFunction());
console.log(foo);//输出3

默认导出：导入默认导出时，导入名不需要与导出时的名字一致。

a.js中：
//导出函数
export default function() {}
//导出类
export default class A{......}
注：上述两个默认导出不能同时出现在一个文件里

b.js中导入：
import funM from './a';
import A from './a';

 

注意，不能使用 var、let 或 const 用于导出默认值 export default。

因此，若要导出变量，写法如下：

var a=1;//先声明变量

export default a;

下面的这种写法是错误的：export default var a=1。

本质上，a.js文件的export default输出一个叫做default的变量，然后系统允许你为它取任意名字。

因此，关于export default:

export default function (){}

等效于：

var function a(){...}

export {a as default}

导入时：

import a from './x';
等效于：
import {default as a} from './x';

export语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。与commonjs不同
注意，import命令具有提升效果，会提升到整个模块的头部，首先执行。因为import是编译时执行的

ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量,即“编译时加载”或者静态加载。
CommonJS 和 AMD 模块，都只能在运行时确定这些东西，即"运行时加载"。