背景

公司專案需要裁切功能，基於第三方圖片裁切元件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 = 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的原始碼