commonjs 与 ES Module 的区别以及它们的导出导入写法

 概念的区别： 

---

 CommonJS 和 ES Module 都是 javascript中用来导入导出模块的。

1. 导入导出方法的不同：

• CommonJS 使用 require() 导入模块，使用 module.exports 导出模块
• ES Module 使用 import 导入模块，使用 export 导出模块

commonjs导入导出：

// commonjs - a.js 导出
const statusTextConvert = value => {
  let data = {
    0: '待机中',
    1: '运行中',
  }
  return data[value]
}

module.exports = {
  statusTextConvert
}

// commonjs - b.js 导入
const { statusTextConvert } = require('../utils/util')
console.log(statusTextConvert(1))

ES Module导入导出：

// ES Module - a.js 导出
export const a = 'hello'

// ES Module b.js 导入
import { a } from '../utils/util'
console.log(a)

还有一种 export default：

• 导出：export 语句可以导出多个变量、函数或类，而 export default 语句只能导出一个变量、函数或类
• 导入：export 导出的变量、函数或类需要使用 {} 来进行解构导入，而使用 export default 导出的变量、函数或类可以直接导入

// a.js 导出
const a = 'hello'
export default a

// b.js 导入
import a from '../utils/util'
console.log(a)

  加载方式不同： 

---

• CommonJS 是动态加载，即模块的依赖关系在运行时确定
• ES Modules 是静态加载，即模块的依赖关系在编译时确定

摘自：静态加载与动态加载的区别_动态加载和静态加载的区别_m0_59795537的博客-CSDN博客