背景

作为一个刚入职不久的菜鸡，我一直备受领导关注。这几天代码评审，领导问我module.exports、exports、export都有啥区别，怎么用。

仔细一想，我就好像都见过，但具体用途我还有点分不清。

我支支吾吾的说不都是导出模块引入模块的么，领导就diss我，这么基础的东西你都搞不明白，代码能写好？

我没敢顶嘴，先忍着，我先去学习吧！

模块规范简介

module.exports、exports、export的区别主要在于他们遵循的规范不同。

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

ES6出来以后，前端也支持模块的导入与导出了，因此，此时前端的模块规范就变成了esm。

再一个，不同规范不仅使用的关键词和特性不同，使用环境也不同：

nodejs中（webpack，babel）我们使用commonjs，浏览器中（vue的script标签 或 html 中带type="module"的script标签中）我们使用** esm**。

简单来说，平时开发都是基于esm规范，使用import语法，只有在脚手架的vue.config.js或者vite.config.js中使用commonjs。实际上，vite.config.js中也可以使用esm

commonjs规范

💡 commonjs规范： javascript.ruanyifeng.com/nodejs/modu…

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

列子：

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

var { double } = require('./moduleA');
var res = double(4);

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

module.exports===exports //true

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

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

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

ECMAScript 规范

esm是es6语法，这个经常使用，必选会！

export 和 export default

ECMAScript主要特点是静态解析模块依赖，并且支持异步加载。

export:

-   export 语句用于导出模块中的多个变量、函数或类。导出的内容可以在其他模块中通过 import 语句导入。
-   适用于导出多个命名的变量或函数。

// a.js
export const hello = () => {
  console.log('hello');
};

export const fuck = () => {
  console.log('fuck');
};

// b.js
import { hello, fuck } from './a';
foo(); // 输出 'hello'
bar(); // 输出 'fuck'

2. export default:

   • export default 语句用于导出模块的默认值。每个模块只能有一个默认导出。
   • 导入时可以使用任何名字。

// a.js
const a = () => {
  console.log('woo');
};

export default foo;

// b.js
import myFunction from './a';
myFunction(); // 输出 'woo'

总结

CommonJS 规范:

-   使用 module.exports 和 exports 进行模块导出。
-   主要用于 Node.js 环境。
-   模块导入使用 require 语句。
-   module.exports 是实际导出对象，可以导出任何类型的值。
-   exports 是 module.exports 的别名，适用于添加多个导出属性或方法。

ECMAScript（ES6）规范:

-   使用 export 和 export default 进行模块导出。
-   适用于现代 JavaScript 环境，包括浏览器和 Node.js（通过支持 ES6 模块的运行时）。
-   模块导入使用 import 语句。
-   export 用于导出多个命名的变量、函数或类。
-   export default 用于导出模块的默认值，每个模块只能有一个默认导出。