module.exports和export详解

概念：module.exports和exports是属于commonJs规范，export和export default是ES6模块规范。

(一) commonJs:

exports 等于 module.exports，相当于在js文件头部，有一个module对象，module.exports = exports；
exports是一个对象，所以可以exports多个值

// 暴露.js
exports.fn1;
exports.fn2;
exports.fn3;
// 引用.js
var fns = require('暴露.js');
fns.fn1(); ...
// 相当于
exports = {fn1,fn2,fn3}
// 相当于 
modules.exports = {fn1, fn2,fn3}

*以webapck举例*
// 暴露.js
module.exports = {
    context: path.resolve(__dirname, '../'),
    entry: {
        app: ['babel-polyfill', './src/main.js']
    },
    output: {},
    resolve: {
        extensions: ['.js', '.vue', '.json', '.scss', '.less'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
            '@': resolve('src'),
            'styles': resolve('src/assets/styles'),
            'images': resolve('src/assets/images'),
            'components': resolve('src/components')
        }
    },
    module: {}
};
// 引用.js
const configs = require('../config');

1、对于要导出的属性，可以简单直接挂到exports对象上

exports.name = function() {

    console.log('My name is Lemmy Kilmister');

};

2、对于类，为了直接使导出的内容作为类的构造器可以让调用者使用new操作符创建实例对象，应该把构造函数挂到module.exports对象上，不要和导出属性值混在一起

// 暴露.js
module.exports = function(name, age) {

    this.name = name;

    this.age = age;

    this.about = function() {

        console.log(this.name +' is '+ this.age +' years old');

    };

};

var A = require('暴露.js'); var a = newA(name, age);

module.exports 初始值为一个空对象 {}

exports 是指向的 module.exports 的引用

require() 返回的是 module.exports 而不是 exports

也就是: exports = module.exports = {}, exports和module.exports都指向一个引用地址{}，如果exports.name = 'xxx'，那module.exports = {name:'xxx'}，引用对象改变，两者又是同时指向一个对象，所以都改变了。

(二) ES6规范

1：每一个模块只加载一次， 每一个JS只执行一次， 如果下次再去加载同目录下同文件，直接从内存中读取。 一个模块就是一个单例，或者说就是一个对象；

2：每一个模块内声明的变量都是局部变量， 不会污染全局作用域；

3：模块内部的变量或者函数可以通过export导出；

4：一个模块可以导入别的模块

es6有多种写法：

(1)、export { xx, xx}与import {xx, xx} from '../../xxx.js'

// 暴露.js
let name = 'xiaoming';
let age = 18;
export {name, age}
// 引用.js
import {name, age} from '暴露.js'；

(2)、在export接口的时候， 我们可以使用 XX as YY， 把导出的接口名字改了， 比如：** fn1(实际export) as SayHi（别名） **， 把这些接口名字改成不看文档就知道干什么的：在引用文件这样用 import {SayHi} from '../../xx.js';

// 暴露.js
let fn1 = function() {console.log('sayHi')};
export { fn1 as sayHi };
// 引用.js
import { sayHi } from '暴露.js'

(3)、直接在export的地方定义导出的函数，或者变量：export const foo = xxx; 引用 import { foo } from '../../xx'

// 举个vue组件懒加载的例子
export const Index = () => import('@modules/index/index');

(4)、export default导出,这种导出的方式不需要知道变量的名字， 相当于是匿名的；

// 如果一个js模块文件就只有一个功能， 那么就可以使用export default导出
// 暴露.js
export default {
  name: 'xiaoming'，
  age: 18
}; 
// 引用.js
import person from '暴露.js'

(6)、通配符导入

// 暴露.js
export fn1;
export fn2;
export fn3;
// 引用.js
import * as fns from '暴露.js';

在import的时候可以使用通配符*导入外部的模块：
import * as xxx from ‘xxx’: 会将若干export导出的内容组合成一个对象返回；
import xxx from ‘xxx’：（export default Din）只会导出这个默认的对象作为一个对象;
以上。