本文轉自：https://www.cnblogs.com/shichangchun/p/10495987.html
在模塊化開發過程中經常遇到模塊的導出導入。涉及到 require 、export、module.exports、exports這些關鍵詞。但是其中究竟有什么區別。自己還真的經常弄糊塗。
索性自己好好縷一縷。
首先呢，總體上區分兩大規范 CommonJS模塊規范和ES6模塊規范
require: node 和 es6 都支持的引入
export / import : 只有es6 支持的導出引入
module.exports / exports: 只有 node 支持的導出
Node里面的模塊系統遵循的是CommonJS規范。
CommonJS定義的模塊分為: 模塊標識(module)、模塊定義(exports) 、模塊引用(require)
=================== CommonJS模塊規范中 module.exports / exports / require===========================
為了方便，Node為每個模塊提供一個exports變量，指向module.exports。這等同在每個模塊頭部，有一行這樣的命令。
var exports = module.exports;
具體的可參考測試代碼
新建utils.js
console.log('1=', module.exports); // 結果為：{}
console.log('2=', exports); // 結果為：{}
exports.a = 200; // 由於默認 exports=module.exports 故此時把module.exports的值也改變了 {a : 200}
console.log('3=', module.exports) // {a : 200}
console.log('4=', exports) // {a : 200}
exports = '我不在指向module'
console.log('5=', module.exports) // {a : 200}
console.log('6=', exports) // 我不在指向module
新建test.js引入utils.js
var util = require('./utils')
console.log('test=', util) // { a: 200 }
從上面可以看出，其實require導出的內容是module.exports的指向的內存塊內容，並不是exports的。
簡而言之，區分他們之間的區別就是 exports 只是 module.exports的引用，輔助后者添加內容用的。
好多建議盡量都用 module.exports 導出，然后用require導入。
示例代碼
hello.js
!function(){
module.exports = function(name,age,money) {
this.name = name;
this.age = age;
this.money = money;
this.say = function() {
console.log('我的名字叫：'+this.name+'，我今年'+this.age+'歲，月薪為：'+this.money+'元；')
}
};
}()
hello2.js
module.exports = function(name,age,money) {
this.name = name;
this.age = age;
this.money = money;
this.say = function() {
console.log('我的名字叫：'+this.name+'，我今年'+this.age+'歲，月薪為：'+this.money+'元；')
}
};
hello3.js
function sayDog () {
console.log('i am dog')
}
function sayCat () {
console.log('i am cat')
}
exports.sayDog = sayDog
exports.sayCat = sayCat
index.js
var Hello = require('./hello');
var hello = new Hello('jone','28','10000')
hello.say();
var Hello2 = require('./hello2');
var hello2 = new Hello2('hello2','28','10000')
hello2.say();
var h3 = require('./hello3')
h3.sayDog()
h3.sayCat()
輸入結果如下
=================== ES6規范 import / export / export default ===========================
不同於CommonJS，ES6使用 export 和 import 來導出、導入模塊。
在我們的項目中 使用場景如api的封裝。
/*
* 幫助文檔查詢api
* @Author: shichangchun
* @Date: 2018年8月30日14:22:15
*/
import fetch from '@/util/fetch'
/**
* 查詢文章 add 2018-10-19
*/
export const getArticleByPath = (data) => {
return fetch({
url: '/api/help/contentTxtByPath',
method: 'GET',
params: data
})
}
/**
* 查詢目錄 add 2018-10-19
*/
export const getMuneByPath = (data) => {
return fetch({
url: '/api/help/contentNewByPath',
method: 'GET',
params: data
})
}
/**
* 首頁查詢
* @param data
*/
export const getHelpList = (data) => {
return fetch({
url: '/api/help/catalogByPath',
method: 'GET',
params: data
})
}
在組件中引用
需要特別注意的是，export命令規定的是對外的接口，必須與模塊內部的變量建立一一對應關系,即import{ '對應名稱1'，'對應名稱2'} from ’api‘。
使用export default命令，為模塊指定默認輸出。
另外：
## export與export default均可用於導出常量、函數、文件、模塊等
## 在一個文件或模塊中，export、import可以有多個，export default僅有一個
## 通過export方式導出，在導入時要加{ }，export default則不需要
## export能直接導出變量表達式，export default不行。