概念：module.exports和exports是屬于commonJs規(guī)范，export和export default是ES6模塊規(guī)范。

(一) commonJs:

exports 等于 module.exports，相當(dāng)于在js文件頭部，有一個(gè)module對象，module.exports = exports；
exports是一個(gè)對象，所以可以exports多個(gè)值

// 暴露.js
exports.fn1;
exports.fn2;
exports.fn3;
// 引用.js
var fns = require('暴露.js');
fns.fn1(); ...
// 相當(dāng)于
exports = {fn1,fn2,fn3}
// 相當(dāng)于 
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、對于要導(dǎo)出的屬性，可以簡單直接掛到exports對象上

exports.name = function() {

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

};

2、對于類，為了直接使導(dǎo)出的內(nèi)容作為類的構(gòu)造器可以讓調(diào)用者使用new操作符創(chuàng)建實(shí)例對象，應(yīng)該把構(gòu)造函數(shù)掛到module.exports對象上，不要和導(dǎo)出屬性值混在一起

// 暴露.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 初始值為一個(gè)空對象 {}

exports 是指向的 module.exports 的引用

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

也就是: exports = module.exports = {}, exports和module.exports都指向一個(gè)引用地址{}，如果exports.name = 'xxx'，那module.exports = {name:'xxx'}，引用對象改變，兩者又是同時(shí)指向一個(gè)對象，所以都改變了。

(二) ES6規(guī)范

1：每一個(gè)模塊只加載一次， 每一個(gè)JS只執(zhí)行一次， 如果下次再去加載同目錄下同文件，直接從內(nèi)存中讀取。 一個(gè)模塊就是一個(gè)單例，或者說就是一個(gè)對象；

2：每一個(gè)模塊內(nèi)聲明的變量都是局部變量， 不會污染全局作用域；

3：模塊內(nèi)部的變量或者函數(shù)可以通過export導(dǎo)出；

4：一個(gè)模塊可以導(dǎo)入別的模塊

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接口的時(shí)候， 我們可以使用 XX as YY， 把導(dǎo)出的接口名字改了， 比如：** fn1(實(shí)際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的地方定義導(dǎo)出的函數(shù)，或者變量：export const foo = xxx; 引用 import { foo } from '../../xx'

// 舉個(gè)vue組件懶加載的例子
export const Index = () => import('@modules/index/index');

(4)、export default導(dǎo)出,這種導(dǎo)出的方式不需要知道變量的名字， 相當(dāng)于是匿名的；

// 如果一個(gè)js模塊文件就只有一個(gè)功能， 那么就可以使用export default導(dǎo)出
// 暴露.js
export default {
  name: 'xiaoming'，
  age: 18
}; 
// 引用.js
import person from '暴露.js'

(6)、通配符導(dǎo)入

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

在import的時(shí)候可以使用通配符*導(dǎo)入外部的模塊：
import * as xxx from ‘xxx’: 會將若干export導(dǎo)出的內(nèi)容組合成一個(gè)對象返回；
import xxx from ‘xxx’：（export default Din）只會導(dǎo)出這個(gè)默認(rèn)的對象作為一個(gè)對象;
以上。