Webpack/Babel根據其範圍改變了如何將數據分配給foreach循環中的變量 - 爲什麼？

Question

我已經構建了一個簡單的React組件。考慮這個代碼：

var myTempColor = {}; 
Object.keys(artistListing).sort().forEach((song, index) => { 
    myTempColor["color"] = stringToColor(artistName + song); 
    //use myTempColor variable to apply styling to an element 
}); 

stringToColor是一個全局聲明的函數。通常情況下，我希望這段代碼能夠工作，但webpack之後的結果是artistListing中的所有歌曲都被賦予相同的顏色。 artistName中的變化（這是父組件傳遞的道具）會更改顏色，但歌曲變量中的變化似乎被忽略。現在，如果我將代碼更改爲：

Object.keys(artistListing).sort().forEach((song, index) => { 
    var myTempColor = {}; 
    myTempColor["color"] = stringToColor(artistName + song); 
    //use myTempColor variable to apply styling to an element 
}); 

一切都按預期工作。所以看起來，通過在循環內部聲明變量，webpack被阻止進行某種形式的優化，導致不希望的行爲。

我的問題是什麼類型的優化導致這些類型的錯誤？在使用Webpack時還有其他類似的缺陷要注意嗎？作爲一個不熟悉他的javascript的人，我真的很好奇這裏隱藏着什麼。

Answer 1

的Babel homepage提供transpiler正確的，在瀏覽器中，這裏是輸出爲您的2個代碼片段（使用ES2015和反應預置）：

"use strict"; 

var myTempColor = {}; 
Object.keys(artistListing).sort().forEach(function (song, index) { 
    myTempColor["color"] = stringToColor(artistName + song); 
    //use myTempColor variable to apply styling to an element 
}); 

和

"use strict"; 

Object.keys(artistListing).sort().forEach(function (song, index) { 
    var myTempColor = {}; 
    myTempColor["color"] = stringToColor(artistName + song); 
    //use myTempColor variable to apply styling to an element 
}); 

至於的WebPack ，您沒有包含任何webpack配置，也沒有顯示如何在您的代碼庫中導入/導出模塊，因此如果您提供更多詳細信息，我將更新答案，因此沒有什麼可以幫助調試問題。

也就是說，除非您明確配置它，否則Webpack不太可能優化了您的代碼。