commonJs和es6的区别

commonJs 示例

// 导入
const valid = require('./utils/index')
console.log(valid.isEmail('8738365456@199.com'))

// 导出sayHi方法，exports变量指向module.exports
exports.sayHi = function (user) {
	console.log('hi,'+ user)
}

exports.exports = {} // 表示当前模块对外输出的接口，其他文件加载该模块，就是读取module.exports。

1
2
3
4
5
6
7
8
9
10
11

es6 示例

// 导入
import {isEmail, isMobile} from './utils/index'

// 导出
export function sayHi = (user) => {
    console.log('hi,'+ user)
}

export default = {} // 默认导出，一个js模块里面只能有一个
1
2
3
4
5
6
7
8
9

• CommonJS 模块输出的是一个值的拷贝, 引入后使用不会受到原文件的影响，ES6 模块输出的是值的引用。
• CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。
• CommonJs 是单个值导出，ES6 Module可以导出多个(解构)。
• CommonJs 是动态语法（require）可以写在判断里，ES6 Module 静态语法(import)只能写在顶层。
• CommonJs是同步加载的，一般在服务端使用，如果在浏览器使用需要使用browserify等编译工具；es6的import可以按需加载。

好文参考：

1. https://blog.csdn.net/weixin_33275327/article/details/89176902
2. https://segmentfault.com/a/1190000023349541