理解区分module.exports、exports、export、export default

最近组内有一些刚毕业的小伙伴老是搞不清楚项目开发的时候，自己写了js模块该怎么引用，项目里有用module.exports的，有用exports的，有用export的，还有export default。甚至出现，我这样也可以，那样也可以。这里简单的叙说一下。

在之前我也没有深入的去研究这些，只是照葫芦画瓢的去模仿，去套用框架内的写法。后来看了nodejs后，特地去了解了使用的前因后果。在日常前端或者node的开发中，特别是node，模块思想非常的明显，模块化开发不仅可以提高代码的复用率，还有利于模块和项目的维护，所以非常必要的去了解这些。

本文就记录一下 CommonJS模块规范 和 ES6模块规范，因为node.js用的就是CommonJS规范，而我们日常的前端开发大都是ES6规范

CommonJS模块规范

CommonJS的核心思想是通过require方法来同步加载依赖的其他模块，通过module.exports到处需要暴露的接口。根据这个规范，每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。

module.exports

// utils.js
let token = '123456'
let username = function (name) {
    return `name：${name}` 
}
// 通过module.exports将token与username暴露出去
module.exports = {
    token,
    username
}

// index.js
 let utils = require('./utils') // 通过require引入utils
 console.log(utils.token) // 12345
 console.log(utils.username('admin')) // name：admin

exports

为了方便，Node为每个模块提供一个exports变量，指向module.exports。这等同在每个模块头部，有一行这样的命令。

let exports = module.exports

需要注意的是，由于exports = module.exports，所以模块输出的时候如果使用module.exports = xxx的话，相当于覆盖了指向，会导致错误

let token = '123456'
// 错误写法
exports = {
    token
}
// 正确写法
exports.token = token

ES6模块规范

ES6使用export 和 import来导出、导入模块。

export

// utils.js
export const token = '123456'
export function getToken () {
    return '123456'
}
// 或者
const token = '123456'
function getToken () {
    return '123456'
}
export {
    token,
    getToken
}
// 导出的几种方式：
import { token , getToken } from './utils' // 导入多个导出
import * as utils from 'utils' // 作为命名空间导入整个模块
console.log(token) // 123234
console.log(getToken ()) // 123456

export default

用法基本同export

// utils.js
const token = '123456'
export default token // export也可以这样写，但是export defaul不可以直接export default const token = '123456'，
export default function getToken () {
    return '123456'
}
// 或者
const token = '123456'
function getToken () {
    return '123456'
}
export default {
    token,
    getToken
}
// 导出的几种方式：
import { token , getToken } from './utils' // 导入多个导出
import * as utils from 'utils' // 作为命名空间导入整个模块
console.log(token) // 123234
console.log(getToken ()) // 123456