exports与module.exports的区别，以及export与export.defult的区别

在 JS 模块化编程的模块引入上, 主要有两种方式：

• CommonJS 模块标准
• ES6 moduel 特性

1. CommonJS

模块引入：require()

模块导出：exports 或者 module.exports

exports 与 module.exports 区别

1.1 exports 方式：

a.js（导出）:

const name = 'cedric' 

exports.name = name  

b.js（引入）：

const a = require('./a.js')
console.log(a)      // { name: 'cedric' }


// 或者
// const { name } = require('./a.js')
// console.log(name)      // 'cedric'

1.2 module.exports 方式：

• 方式一（不推荐）：

a.js（导出）:

const name = 'cedric' 

module.exports = name

b.js（引入）：

const name = require('./a.js')

console.log(name)     // 'cedric' 

• 方式二（推荐）：

a.js（导出）:

const name = 'cedric' 

module.exports = {
    name
}

b.js（引入）：

const a = require('./a.js')
console.log(a)     // { name: 'cedric' }


// 或者
// const { name } = require('./a.js')
// console.log(name)      // 'cedric'

1.3 注意：

• exports 返回的是模块函数，module.exports 返回的是模块对象本身，返回的是一个类
• CommonJS 方式普遍用于node中模块的编写
• 一个模块文件中可以有多个exports输出，但只能有一个module.exports输出

1.4 当有多个变量或函数需要输出时：

---

使用 exports

a.js:

const name = 'cedric'
const age = 18

function fun () {
    console.log('abc')
}

exports.name = name
exports.age = age
exports.fun = fun

b.js:

const a = require('./a.js')

a.fun()  // abc
console.log(a)   // { name: 'cedric', age: 18, fun: [Function: fun] }

---

使用 module.exports

a.js:

const name = 'cedric'
const age = 18

function fun () {
    console.log('abc')
} 

module.exports = {
    name,
    age,
    fun,
}

b.js:

const a = require('./a.js')

a.fun()  // abc
console.log(a)   // { name: 'cedric', age: 18, fun: [Function: fun] }

2. ES6 moduel

• 模块引入：import
• 模块导出：export 或者 export default

2.1 注意

• 在一个文件或模块中，export可以有多个，export default 只能向外暴露一次
• 通过export方式导出，在导入时要加{ }，export default则不需要
• Node 不支持 ES6 moduel 特性，解决方法是用 babel 编译

export与export.defult的区别

2.2 export

a.js（导出）：

export const name = 'cedric'

export function fun () {
    console.log('abc')
} 

导入：

import { name, fun } from './a'

console.log(name) // cedric
console.log(fun)  // fun: [Function: fun]
fun()             // abc

2.3 export default

a.js（导出）：

function fun () {
    console.log('abc')
}

export default fun

// 或者：
// export default function fun () {
//     console.log('abc')
// }

导入：

import fun from './a'
 
console.log(fun)  // fun: [Function: fun]
fun()             // abc

关于export default 中的 default

实际上，a.js 文件的 export default 输出一个叫做 default 的变量，所以，当import的模块引入 a.js 时，系统允许你为它取任意变量名。所以，如下一般会使用方式：

a.js（导出）：

export default () => {
    console.log('abc')
}

导入：

import 任意名称 from './a'
 
console.log(任意名称)  // () => { console.log('abc'); }
任意名称()             // abc