理解区分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