commonJs和es6的区别

commonJs 示例

// 导入
const valid = require('./utils/index')
console.log(valid.isEmail('[email protected]'))

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

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

es6 示例

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

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

export default = {} // 默认导出,一个js模块里面只能有一个
  • 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

你可能感兴趣的:(es6,javascript,前端)