概念的区别:
CommonJS 和 ES Module 都是 javascript中用来导入导出模块的。
- 导入导出方法的不同:
- 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 是静态加载,即模块的依赖关系在编译时确定