proxy遇到lagacy browser的小坑

前言

還記得前幾天我用signal包了react用的vue hook套件嗎？才講完沒試過兩天就出事了

不過好里加在不是什麼大包，事情是這樣的

內文

有個Android 8 chrome 70 webview的用戶(簡單說就是android的webview)回報資料顯示有問題，我看這版本起碼也是七八年前的產品，但照道理來說都已經支援Proxy了怎麼可能會出什麼大錯，再track bug的過程中發現，我寫的資料陣列被過濾掉了

const buildPaymentDataByCType = (paymentConfig) => {

// payment is proxy object

const payment = initData.withdrawList.find((x) => x.CType === paymentConfig.C_TYPE)

    // console.log(payment) // exists

return

{

... payment,

// ellipsis

},

)

}

const normalWayPlatforms = computed(() =>

[

buildPaymentDataByCType(ORDER_PAYMENT.BANK),

].filter((x) => x.Name)

)

console.log(normalWayPlatforms.length) // 0？？

我在console.log(payment)都是有東西的，理論上應該都要找得到相對應物件，但為什麼會被filter掉，所以我試著不要filter直接在console.log出來，發現問題出在{...x}擴展運算子並沒有生效！！

難道是老舊瀏覽器不支援這ES6語法？所以我又隨便寫了一個

const a = { a: "a" }

console.log({ ...a })

發現這樣寫是正常的，所以應該只是因為Proxy，所以多了一層，然後擴展運算子當時還不支援擴展Proxy，94這麽簡單。那這樣要怎麼搞定呢？

我嘗試一下Object.assign還是可以把Proxy擴展出來，所以就改成這樣

const buildPaymentDataByCType = (paymentConfig) => {

const payment = initData.withdrawList.find((x) => x.CType === paymentConfig.C_TYPE)

return Object.assign(

{

// ellipsis

},

payment

)

}

ＯＫ打玩收工

後記

過程中我有嘗試用lagacy plugin把程式碼轉成es5但似乎都沒有成功，vite似乎不希望程式碼可以編譯到es6以下，總之vite還是有他不方便的地方啊，祝大家都可以準時下班～