背景
公司項目需要裁切功能，基於第三方圖片裁切組件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的源碼