背景
公司项目需要裁切功能，基于第三方图片裁切组件vue-cropper(0.4.0版本),封装了图片裁切组件(picture-cut)(放在公司内部组件库，仅限于公司内部使用)
在vue-cropper从0.4.0更新到0.4.4后，picture-cut组件使用裁切功能时报错
vue-cropper0.4.0的index.js文件导出方式如下
var vueCropper = require('./vue-cropper')
module.exports = vueCroppervue-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的源码
原文地址：https://www.cnblogs.com/HYZhou2018/p/11159271.html