module.exports 和 exports,export 和export default的区别

module.exports和exports

module变量代表当前模块。这个变量是一个对象，module对象会创建一个叫exports的属性，这个属性的默认值是一个空的对象：

module.exports用法

exports的方法和属性都可以被module.exports代替

1	console.log(module.exports); // {}

使用方法

data.json

{
  "browsersConfig": {
    "nodes": [{
      "nodeID": "node",
      "connectionType": "remote",
      "sessionMode": "node",
      "maxConcurrentSessions": 1,
      "networkSimulator": false
    }],
    "browsers": [{
      "nodeID": "node",
      "browserID": "browserUser",
      "pages": [{
        "pageID": "user"
      }],
      "enableBackgroundLog": false
    }]
  }
}

导入：

export.ts

1
2
3

var config = require('./data.json')
console.log(config.browsersConfig);
console.log(config);

或者如下方法：

data.js

module.exports.browsersConfig={
    "nodes": [{
        "nodeID": "node",
        "connectionType": "remote",
        "sessionMode": "node",
        "maxConcurrentSessions": 1,
        "networkSimulator": false
    }],
    "browsers": [{
        "nodeID": "node",
        "browserID": "browserUser",
        "pages": [{
        "pageID": "user"
        }],
        "enableBackgroundLog": false
    }]
}

或者如下方法：

data.js

exports.browsersConfig={
    "nodes": [{
        "nodeID": "node",
        "connectionType": "remote",
        "sessionMode": "node",
        "maxConcurrentSessions": 1,
        "networkSimulator": false
    }],
    "browsers": [{
        "nodeID": "node",
        "browserID": "browserUser",
        "pages": [{
        "pageID": "user"
        }],
        "enableBackgroundLog": false
    }]
}

exports并不能代替module.exports

exports只是给module.exports添加属性和方法

test.js

1
2
3

exports.name = 'a';
exports.happy = function(console.log('happy'));
console.log(module.exports);  //{ name: 'a', happy: [Function] }

从上面结果看， module.exports就是require返回的对象，我们再用代码验证下

index.js

var obj = require('./test.js');
console.log(obj);
/* 运行结果：
 { name: 'a', happy: [Function] }
 { name: 'a', happy: [Function] }
*/

返回的数据类型不同

module.exports 方法还可以单独返回一个数据类型，而 exports 只能返回一个 object 对象。
当我们需要返回一个数组、字符串、数字等的类型时，就必须使用 module.exports。
module.exports才是真正的接口，exports只不过是它的一个辅助工具。　最终返回给调用的是module.exports而不是exports。所有的exports收集到的属性和方法，都赋值给了Module.exports。当然，这有个前提，就是module.exports本身不具备任何属性和方法。如果，module.exports已经具备一些属性和方法，那么exports收集来的信息将被忽略。请看下例：

test.js

exports.a = function(){
    console.log('a')
}

module.exports = {a: 2}
exports.a = 1

index.js

1 2	var obj = require('./test'); console.log(obj.a); //2

说明：exports在module.exports 被改变后，失效。

export_default

使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。但是，用户肯定希望快速上手，未必愿意阅读文档，去了解模块有哪些属性和方法。为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出

export-defaul.js

1
2
3

export default function () {
    console.log('foo');
}

上面代码是一个模块文件export-default.js，它的默认输出是一个函数。

其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。

import-defaul.js

1 2	import customName from './export-default'; customName(); // 'foo'

上面代码的import命令，可以用任意名称指向export-default.js输出的方法，这时就不需要知道原模块输出的函数名。需要注意的是，这时import命令后面，不使用大括号。export default命令用在非匿名函数前，也是可以的。

export-defaul.js

export default function foo() {
  console.log('foo');
}

// 或者写成

function foo() {
  console.log('foo');
}

export default foo;

export default 与 export 区别

export与export default均可用于导出常量、函数、文件、模块等
你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用
在一个文件或模块中，export、import可以有多个，export default仅有一个
通过export方式导出，在导入时要加{ }，export default则不需要

1.export

a.js

export const str = "blablabla~";
export function log(sth) { 
  return sth;
}

对应的导入方式：

b.js

1	import { str, log } from 'a'; //也可以分开写两次，导入的时候带花括号

2.export default

a.js

1 2	const str = "blablabla~"; export default str;

对应的导入方式：

b.js

1	import str from 'a'; //导入的时候没有花括号

使用export default命令，为模块指定默认输出，这样就不需要知道所要加载模块的变量名
$$