commonjs与ES module之间的区别

简单记录自己学习的点点滴滴， 一定要有产出，才会进步，有错误的地方还望大佬指出

commonjs与ES module之间的相同点都是为了解决：

1. 避免一个文件过于臃肿，将不同的功能可以抽离出去，然后再引入这个功能模块；
2. 可以很清晰的看出文件所依赖的文件模块，有利于代码的维护
3. 而且还可以避免变量的全局污染

commonjs与ES module之间的不同点：

1.commonjs 是使用require引入，使用module.exports导出 是动态的加载导入的，导入的值是拷贝的

src/common/index.js--在src目录下新建index.js文件，导出如下对象
module.exports={
    name:'xuanxuan',
    age:2
}

src/common/main.js---在同目录下新建main.js文件，导入：
const data=require('./index')
console.log(data)

打印的结果如下--node main.js命令执行main.js文件 
PS C:\Users\guoyuxun\Desktop\webpack-study\webpack-vue2\src\common> node main.js
{ name: 'xuanxuan', age: 2 }

2.ex6 module是import引入 export(单个导出) 或者export default(默认导出)，是静态导入的

src/esmodule/index.js--在src目录下新建index.js文件，导出如下内容
//单个导出
export const name='xuanxuan'
// 默认导出
const personData={
   sex:'男',
   age:2
}
export default personData


src/esmodule/main.js---在同目录下新建main.js文件，导入：
// 引入
import personData,{name} from './index.js'
console.log(name,personData)

打印的结果如下--node main.js命令执行main.js文件 
PS C:\Users\guoyuxun\Desktop\webpack-study\webpack-vue2\src\esmodule> node main.js
xuanxuan { sex: '男', age: 2 }

总结：感觉commonjs与es module出现的原因就是为了代码能够模块化，使代码更有结构和条理，提高代码的可读性和可维护性