關于module.exports和exports的區別，我已經在前一篇文章講過，傳送門。
在es5中，用module.exports和exports導出模塊，用require引入模塊。
es6新增export和export default導出模塊，import導入模塊。
一、在es6中的兩種基本用法
新建兩個文件：a.js, b.js。a.js用于導出模塊，b.js用于導入模塊。兩個文件放在同一目錄下。
- 第一種用法
export default導出：
//a.js
const Programmer = {name: 'UncleFirefly',age:25}
export default Programmer
export default導出對應的導入：
//b.js
import Programmer from './a.js'
- 第二種用法
export導出：
//a.js
const uncle = {name: 'UncleFirefly',age:25}
const aunt = {name: 'AuntFirefly',age:25}
export {uncle, aunt}
export default導出對應的導入：
//b.js
import {uncle, aunt} from './a.js'
二、區別
可以在a.js中打印出module，通過打印的內容找到4種導出模塊的區別。
exports和module.exports的區別
查看exports和module.exports的區別請移步至我的另一篇文章：點我移步。export和export default的區別
//a.js
const Programmer = {name: 'UncleFirefly',age:25}
export default Programmer
console.log(module)
/*
//打印結果
{exports: {default:{age:25,name:'UncleFirefly'}, hot:{...}}
*/
//a.js
const uncle = {name: 'UncleFirefly',age:25}
const aunt = {name: 'AuntFirefly',age:25}
export {uncle, aunt}
/*
//打印結果
{exports: {aunt:{age:25,name:'AuntFirefly'},uncle:{age:25,name:'UncleFirefly'}, hot:{...}}
*/
從打印可以看出:
-
導出時
-
export相當于把對象添加到module的exports中。 -
export default相當于把對象添加到module的exports中，并且對象的key叫default。
-
-
導入時：
不帶
{}的導入
本質上就是導入exports中的default屬性（注：如果default屬性不存在，則導入exports對象）。帶
{}的導入
本質上按照屬性key值導入exports中對應的屬性值。
三、小tips
一般來說，module.exports、exports與require對應。也就是用module.exports、exports導出的模塊，則用require導入。（不是絕對，如果代碼支持es6，也可以用import引入）。
