关于common.js里面的module.exports与es6的export default的思考总结

背景

公司项目需要裁切功能，基于第三方图片裁切组件vue-cropper(0.4.0版本),封装了图片裁切组件(picture-cut)(放在公司内部组件库，仅限于公司内部使用)

在vue-cropper从0.4.0更新到0.4.4后，picture-cut组件使用裁切功能时报错

[Vue warn]:Failed to mount component:template or render function not defined

vue-cropper0.4.0的index.js文件导出方式如下

var vueCropper = require('./vue-cropper')

module.exports = vueCropper

vue-cropper0.4.4的index.js文件导出方式如下

import VueCropper from './vue-cropper'

const install = function(Vue) {

Vue.component('VueCropper', VueCropper);

}

#istanbul ignore if

if (typeof window !== 'undefined' && window.Vue) {

install(window.Vue);

}

export { VueCropper }

export default {

version: '0.4.4',

install,

VueCropper

}

vue-cropper0.4.0的导入方式如下

import vueCropper from 'vue-cropper'

vue-cropper0.4.4的导入方式如下

import {VueCropper} from 'vue-cropper'

所以在picture-cut组件里引用vue-cropper组件的方式要修改成下面的方式才不报错

import {VueCropper} from 'vue-cropper'

问题：0.4.0和0.4.4区别有哪些，为什么要这样使用？

回答：

区别一 0.4.0使用的是common.js的module.exports导出方式，0.4.4使用的是es6的export default导出方式

区别二 0.4.4增加了install函数，感觉这样做是为了可以在vue的入口文件main.js里面导入，使用use()的方式全局使用

为什么要修改导出方式，不修改导出方式也可以实现导出install函数，在main.js里面导入，使用use()的方式全局使用

针对这个问题，查看了下element-ui的导出方式，发现element-ui的导出方式是module.exports方式且有install函数

查看了ele-vue(公司的组件库)的导出方式，发现之前使用的是

module.exports.default = module.exports = ...(代码中这行注释了)

现在使用的是

export default=...

咨询得知当时使用common.js的module.exports方式导出组件时报错，最后使用es6的export default方式导出

但是elemnet-ui组件库使用的就是common.js的module.exports方式导出,且可以正常使用

查阅资料得知

common.js的语法是运行在node环境的，我们使用的element-ui是在node_modules文件里的，这里面有node环境的，所以使用module.exports的方式导出，在项目中使用不报错

而我们的组件库ele-vue不是在node_modules文件里面，没有node环境，那么在examples文件里面引用module.exports的方式导出的组件时会报错

针对上面的解释做如下的验证

在ele-vue组件里使用module.exports的方式导出(先不管报错)，在项目中使用，发现是正常使用的，那就验证了上面的结论

知道了上面的区别后解决了在项目中调试ele-vue组件的问题

思路如下：

1.在ele-vue组件库里面有两个导出组件的出口，index.js和pack.js

index.js使用的是common.js的module.exports方式导出，webpack入口文件是index.js，出口是dist/hbh-widget.min.js

pack.js用的是es6的export default方式导出组件，在examples文件里的main.js里面引入的的是pack.js

2.在项目调试hbh-widget组件时，将node_modules/@widget/package.json 里面main字段修改为src/pack.js

之后在node_modules/@widget/里面修改相应的组件，改好后在商户中心直接预览效果，成功后记得更新hbh-widget的源码