module.exports、exports和export、export default的区别，import和require的区别

在vue及其他模块化开发中，经常会用到这些输出和引用的语句，那么，怎么在合适的时候用合适的语句呢，怎么区分它们呢？

一、理论区别

首先，module.exports和exports是属于 CommonJS 模块规范，export和export default是属于ES6语法。require属于 CommonJS 模块规范，import属于ES6语法。

一般情况：
module.exports和exports导出模块，用require引入模块。
export和export default导出模块，import导入模块。

1.module.exports、exports的区别

• 对于node执行的每一个js文件，都会自动创建一个module模块对象，如同一个封闭的函数一样，把一个函数封闭起来，外部怎样才能去引用呢？就是要这个模块主动暴露出来一个接口，即exports和module.exports，module对象会创建一个叫exports的属性，初始化的值是 {} module.exports = {};
• exports只是module.exports的一个引用，当exports改变的时候，module.exports也会改变，但是当给module.exports赋值的时候，exports不会改变。真正暴露出去的是module.exports对象！（即当给module.exports赋值后，exports所有的赋值均失效）

var func1 = function() {
   console.log("func1");
};
var func2 = function() {
   console.log("func2");
};
module.exports = {
   function1: func1
};
exports.function1 = func1;
exports.function2 = func2;
console.log(exports);
console.log(module.exports); //只有func1函数

• exports只能点数据，不能等于；module.exports能点能等于
  exports只能使用.语法向外暴露内部变量 例 exports.xxx=xxx
  module.exports既可以通过点语法，也可以直接赋值一个对象 例 module.exports.xxx=xxx
  module.exports=xxx

2.export、export default的区别

export是es6引出的语法，用于导出模块中的变量，对象，函数，类。对应的导入关键字是import。

二者的区别有以下几点：

• export default在一个模块中只能有一个，当然也可以没有。export在一个模块中可以有多个。
• export default的对象、变量、函数、类，可以没有名字。export的必须有名字。
• export default对应的import和export有所区别

3.import、require的区别

import是ES6语法，与export对应。但是很多浏览器还不支持，最终都会Es5 – 浏览器支持的CommonJS语法
require是CommonJS规范

• require 是赋值过程并且是运行时才执行， import 是解构过程并且是编译时执行。require可以理解为一个全局方法。而import必须写在文件的顶部。

• require的性能相对于import稍低，因为require是在运行时才引入模块并且还赋值给某个变量，而import只需要依据import中的接口在编译时引入指定模块所以性能稍高

• import 语法比较灵活，可以导入模块中的所有导出内容或者部分导出内容

二、用法区别

1.四种暴露模块数据的方法

var func1 = function() {
  console.log("func1");
};
var func2 = function() {
   console.log("func2");
};
//1.module.exports
module.exports = {
   function1: func1
};
module.exports.function2 = func2;
//2.exports
exports.function1 = func1;
exports.function2 = func2;
//3.export
export const function1 = function() {
    console.log("func1");
};
export const function2 = function() {
    console.log("func2");
};
//4.export default { //类似 module.exports = {}
  function1: func1,
  function2: func2
}

2.三种获取模块数据的方法

针对module.exports、exports、export三种暴露方式，以下任意一种方法都能获取到

//1.require
var functions = require("./fun.js"); //引入一个包含所有暴露属性的对象
console.log(functions)
functions.function1();
functions.function2();
//2.import
import {function1,function2} from './fun.js'; //单个引入暴露属性
function1()
function2()
//3.import
import * as functions from './fun'; //获取到一个包含所有暴露属性的对象
functions.function1();
functions.function2();

3.export default暴露和获取数据的方式，和module.exports的差别

export default暴露的是个default对象，一般用export default暴露，就用import获取

//暴露方式
var func1 = function() {
  console.log("func1");
};
var func2 = function() {
  console.log("func2");
};
export default { //类似 module.exports = {}
  function1: func1,
  function2: func2
}
//获取方式
import fun from './fun.js'
//import {function1} from './fun.js';//module.exports可以用，export default不能用
fun.function1();

var function1 = require("./fun.js");
function1.default.function1()

import * as functions from './fun';
functions.default.function1()