【混淆系列】一问（module.exports、exports、export都是导出，有何区别（））【混淆系列】一问：module.exp

大家好，我是猫小白，本文是前端混淆知识点第一问，全文阅读大约需要3分钟。

我想大家在日常工作中做了很多项目，敲了很多代码，但是有时候很多基础的知识点是非常模糊的，或者说是处于混淆、搞不清楚的状态，当然包括我在内。

【混淆系列】一问（module.exports、exports、export都是导出，有何区别（））

文章图片

现在一个项目的周期很短，借用我们老板的一句话（应该不会被看到吧）:

客户大多数都不知道自己想要什么啥子，你只有搞快点（周五我要看，没问题涩）做出来给他体验一哈，他才知道自己应该要啥子东西

。所以为了赶进度，大部分工作都是在ctrl+c+ctrl+v。以至于很多基础知识都会淡忘甚至忽略，可是往往出问题的地方都是因为这些小细节。

所以我想写一个【混淆系列】，在我自己学习的过程中，把前端开发过程中容易搞混淆，或者容易记错的一些知识点整理分享出来给大家，大家在评论区可以留言自己容易混淆的知识点，一起进步一起学习。

好让我们开始【混淆系类】第一问：
module.exports、exports、export有什么区别？这三个东西其实是两个概念的区分：
先来看一个表格：

规范名称	导出关键词	导入关键词	重命名变量	集体导出
commonjs	module.exports / exports	require	{A ：B }	不支持
esm	export	import	as	* as xxx

这样看其实还是挺清晰的，不同规范使用的关键词和特性不同而已，我们在使用这些关键词的时候区分自己是什么环境下写的代码。

nodejs（webpack，babel）->commonjs,
浏览器（vue的script标签或 html 中带type="module"的script标签中）-> esm。

module.exports、exports是一伙的，他们都是基于commonjs规范来的。
export是基于es6的esm(ECMA Script Modules)规范来的。

commonjs规范:

CommonJS 规范是为了解决 JavaScript 的作用域问题而定义的模块形式，可以使每个模块它自身的命名空间中执行。该规范的主要内容是，模块必须通过 module.exports 导出对外的变量或接口，通过 require() 来导入其他模块的输出到当前模块作用域中。

列子：

// moduleA.js module.exports.double = function( value ){ return value * 2; }

// moduleB.js var { double } = require('./moduleA'); var res = double(4); console.log(res) //8

为了方便，某些情况下module.exports可以简写为exports。其实一开始exports就是module.exports的引用。

module.exports===exports //true

所以上面的moduleA.js ,可以这样省略掉module

// moduleA.js exports.double = function (value) { return value * 2; }

// moduleB.js var { double } = require('./moduleA'); var res = double(4); console.log(res) //8

当 module.exports后面跟着赋值语句时，不能省略module.，为什么？我们接着看
一开始 module.exports全等于 exports 我们可以看成在文件开头有这样的代码：

module.exports = {}; //方便理解一开始是空对象 let exports = module.exports; console.log(module.exports===exports)//true

所以在exports对象{}上添加任何的新属性，其实就是在module.exports上添加属性，因为我们知道node中对象也是引用类型的。
如：

exports.double = function (value) { return value * 2; }exports.PAI = 3.1415926535897932384626 //233，我可以背这么多位~ exports.add = function (a, b) { return a + b; }

危！给exports赋值就不行了

module.exports = {}; //方便理解一开始是空对象 let exports = module.exports; //给exports 赋值会切断和 module.exports 的联系//这样不要这样做~！ exports = { name: 'zhangsan' } //或这样不要这样做~！ exports = function name(a) {} //或这样不要这样做~！ exports = 3.1415926535897932384626 console.log(module.exports); // 打印：{} 回到初始{}值 console.log(exports); // 打印：3.1415926535897932384626console.log(module.exports === exports); //false 你走的独木桥我走我的阳关道已经莫得关系了

如果要使用赋值来导出，可以这样导出一个对象：

// moduleA.js module.exports = { name:'法外狂徒张三', age:'19', wife:'隔壁小红' }// moduleB.js let { name, wife } = require('./moduleA'); console.log(name,age) //法外狂徒张三隔壁小红

这样module.exports就能保证获取到值。
【【混淆系列】一问（module.exports、exports、export都是导出，有何区别（））】如何重命名
commonjs中重命名导出的变量用( ：)符号：

let { name, wife：girlfriend } = require('./moduleA');

esm（ECMA Script Modules）规范现在来说我们在编写vue或者react项目中熟悉的es6 module规范。

esm 是将 javascript 程序拆分成多个单独模块，并能按需导入的标准。和webpack，babel不同的是，esm 是 javascript 的标准功能，在浏览器端和 nodejs 中都已得到实现。使用 esm 的好处是浏览器可以最优化加载模块，比使用库更有效率。通过import, export语法实现模块变量的导入和导出
划重点：commonjs中使用require 和 modelue.exports实现模块的导入导出，esm 使用 import, export导入导出。

esm的export支持：let、var、const、function、class等
以下都是正确的导出方式：

var person = { name: '猫小白', text: a, } export { person, } export function showAge() { console.log(person.age); } export let city = '成都' export const PAI = '3.141592653'

注意：export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。

// 错误1 export 3.14; // 错误2 var api = 3.14; export api;

这俩种写法都是错误的，因为export后面直接跟了一个具体的，外部无法通过一个特定的标识（变量）来获取这个值。

export default 默认导出和commonjs规范先进一点的是 esm 提供了一种默认导出的方式。export default后面可以直接跟随：变量、具体值、function、calss。

//正确 let a = '张三'; export default a //正确 export default 3.14export default function (a) { return a * a } //正确 let sum = function (a, b) { return a + b } export default sum //正确 function calc(a, b) { return a + b } export default calc

如何重命名
ESM中提供了as关键词对导出的变量重命名，防止变量名重复。