export、export default 、module.exports详解

Posted 2023-03-26

参考技术A

javascript没有模块体系,无法将大程序分拆成互相依赖的小文件,再用简单的方法将它们拼装起来.为了解决这个问题,ES6推出了export和export default.

export和export default是es6提出来的,它在编译时就完成模块加载,export命令可以出现在模块的任何位置,只要处于模块顶层即可,如果处于块级作用域就会报错,import也是如此.

从上面图片我们可以看出export后面必须跟变量名和值,可以直接声明或写在一个对象中,都会以键值对的形式导出数据.

以上五种写法都可以,export default后面只能跟值.
总结:export后面必须有变量名和值,导出的数据是键值对形式,而export default后面只能是值,因为它已经有变量名default

require和module.exports是CommonJS规范,它是在运行时加载,就是说运行时才能得到这个对象,module.exports后面跟的值和export default一样

以上五种写法都可以

module.export可以用import来引入,后面可以跟大括号或不跟,跟的话相当于解构赋值,不跟就是整体引入,export也可以用require来引入.require(\'path.js\')或import(\'path.js\')都表示执行这个模块,不会返回值.

export一般导出方法,引入的时候使用大括号按需引入你需要的方法,export default导出对象或数组,比如接口api对象,routes路由数组,但是引入的时候会整体引入,module.exports一般导出对象,可以用import或require整体引入或按需引入,这样子比较灵活,所以module.exports和import使用的场景也挺多的,import只能写在js文件顶部,但是require可以写在任何地方,所以要根据场景不同使用不同方法.

总结:export后面跟变量名和值,import后面是或* as 变量名,export default后面跟值,import后面没有,module.exports后面和export default一样都是值,require后面有表示解构赋值,没有表示整体引入,import和require都可以引入export和module.exports,import只能写在js文件顶部,但是require可以写在任何地方.CommonJS模块输出是一个值的拷贝，ES6模块输出是值的引用.CommonJS模块是运行时加载，ES6模块是编译时输出接口.