Commonjs和Esmodule

一、写在前面
commonjs和esmodule是目前前端主要的模块化方案，下面将具体总结一下，以及两者之间的不同之处。
二、commonjs
2.1

commonjs也叫cjs,在node中每一个js文件都是一个单独的模块,这个模块中包含CommonJS的规范的核心变量: exports， module.exports, require,exports和module.exports可以负责对模块中的内容进行导出。require函数可以帮助我们导入其他模块（自定义模块，系统模块，第三方库）。

2.2、exports和module.exports之间的区别

1、每一个模块都是一个module模块，也就是module。
2、node中导出的不是exports,而是module.exports。
3、也就是说exports和module.exports本来指向的是同一个引
用地址，但是真正导入的是module.exports,所以当我们手动更改
exports = {},这样就会报错，我们只能改属性。

2.3、require的引入规则

1、如果存在核心模块（path, url）等，可以直接引入即可。
2、如果使用./x或者../x以及/x等来引入的话，首先会先找到相应目录下面的x文件，没有找x.js,x.json,x.node,还没有找到就去找./x/index.js, ./x/index.json,./x/index.node文件，如果都不存在，则报错。
3、如果为第三方库，则按照类似于这种规则进行查找。
/*
[
  'D:\\web前端开发\\javascript高级\\二十五\\一、require的查找规则\\node_modules',
  'D:\\web前端开发\\javascript高级\\二十五\\node_modules',
  'D:\\web前端开发\\javascript高级\\node_modules',
  'D:\\web前端开发\\node_modules',
  'D:\\node_modules'
]
*/
4、require在进行加载模块的时候，后执行一遍里面的代码，但是当该模块中多次引入该模块，则require只会执行一次，因为存在缓存(module中存在loaded函数)。

2.5、加载顺序

//main.js
console.log('main')
require("./aaa")
require('./bbb')
//aaa.js
console.log('aaa')
require('./ccc')
//bbb.js
console.log('bbb')
require('./ccc')
require('./eee')
//ccc.js
console.log('ccc')
require('./ddd')``
//ddd.js
console.log('ddd')
require('./eee')
//eee.js
console.log('eee')
//运行结果是
main
aaa
bbb
ccc
ddd
eee
bbb
//一些包加载一次，就不会进行加载了

2.6、commonjs的缺点

1、commonjs加载是同步的，所以必须等到相应的模块加载完毕，
在会执行后续代码，在node环境中使用，没有什么问题，因为node
的js文件都是本地的。
2、如果要是在浏览器中执行，因为浏览器中都是从远程服务器上请
求到的，同步势必会引起一些卡顿。
3、但是在webpack中可以使用commonjs是因为webpack可以对其
进行打包处理。

三、esmodule
3.1、基本使用

1、在浏览器上使用esmodule必须加上type = 'module'
2、必须需要开启服务器(live server)
3、在js中引入文件的时候，必须要加上'.js'.

3.2、三中导出方式

//1、第一种导出方式
export const name = 'dl'
export const age = 20
//2、第二种导出方式（集体导出）
const name = '董礼'
const age = 20
function sum(num1, num2) {
	return num1 + num2
}
export {  //注意：这里不是对象，这里必须这样写
  name, 
  age,
  sum
}
//三、第三种导出方式，起别名
const name = 'dl'
const age = 20
export {
	name as FName,
	age as FAge
}

//三种导入方式
//第一种导入方式
import {
	name,
	age,
	sum
} from './foo.js'
//二、第二种导入方式，起别名
import { name as Fname, age as FAage } from './foo.js'
//三、第三种导入方式
import * as foo from './foo.js'

//default默认导出
const foo = 'foo value'
export default foo

//默认导出二
export {
  name,
  age,
  foo as default
} 

//import函数
//为什么要有import函数
因为在使用import xx from 'xx'的时候，不能将其写在逻辑代码中。
if(true) {
	import xx from 'xxx'
}
esmodule在被js引擎解析的时候，就必须知道他的依赖关系，但是
一些请款下，我们确确实实希望动态来加载一个模块。所以我们可以
使用import()函数来实现异步加载，浏览器调用另一个线程进行下
载，然后不会阻塞js线程。import()函数返回的是一个promise
函数，所以在拿到结果的时候需要使用.then来获取相应的值，
import.meta:es11中新增的一个属性，可以拿到当前文件的url
地址。

四、两者之间的区别

4.1、commonjs是对模块的浅拷贝，esmodule是对模块的引用。
4.2、import的接口是read-only（只读状态），不能修改其变量
值。即不能修改变量的指针指向，但是可以改变变量内部的指针指
向，可以对commonjs对重新赋值，但是esmodule赋值会编译报错。