背景
作为一个刚入职不久的菜鸡，我一直备受领导关注。这几天代码评审，领导问我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规范： http://javascript.ruanyifeng.com/nodejs/module.html
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'
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 用于导出模块的默认值，每个模块只能有一个默认导出。
