module.exports 与 export default 的使用区别

日常开发中经常会遇到需要把写好的js模块导出供外部文件使用的场景。

module.exports 与 export default 是两种常用的导出方式。两者之间有什么区别呢？

const utils = {
   isNumber: (arg) => {
       return Object.prototype.toString.call(arg) === '[object Number]'
     }
}

// 导出给外部使用，2中方式二选一均可

// 导出方式1
module.exports = utils

// 导出方式2
export default utils

module.exports 与 export default 在使用上的区别

在.vue文件中进行引用。

通过module.exports导出的引用方式：

<script>
   // 可以通过函数解构的方式引入
   import utils, { isNumber } from './utils'
   
   export default {
       mounted(){
           this.$nextTick(function(){
               console.log(isNumber(123)) // true
               console.log(utils.isNumber(123)) // true
           })
       }
   }
</script>

通过export default导出的引用方式：

<script>
   // 只能以这种方式引入 
   import utils from './utils'
   
   export default {
       mounted(){
           this.$nextTick(function(){
               console.log(utils.isNumber(123)) // true
           })
       }
   }
</script>

通过export default导出的如果以下面方式引入，将会报错：

<script>
   // 将会报错
   import { isNumber } from './utils'
   
   export default {
       mounted(){
           this.$nextTick(function(){
               console.log(isNumber(123)) // [system] TypeError: (0 , _utils.moneyFormat) is not a function
           })
       }
   }
</script>

总结

通过对比发现，module.exports比export default在引用方式上更加方便。而且module.exports在一定程度上可以达到按需引入目的。在使用上，个人倾向于通过module.exports导出模块。

如果不正确的地方，欢迎小伙伴们多多指教。