最近項(xiàng)目由react0.14.X升級到react 15版本,因?yàn)閞eact15還是做了一些相對大一點(diǎn)的更新的(詳情可以參考一下我的另一篇文章關(guān)于react15的一點(diǎn)總結(jié)),相對;來說react升級之后但react問題并不太多。但是react相應(yīng)的配置,例如babel,react-hot-loader等相也做了一些升級。放到一起來說問題還是多一點(diǎn)的。這里把遇到的一些問題和注意點(diǎn)拿出來給大家分享一下,能避免的坑還是要盡量繞開的不是。

一、首先react15的包分成了react和react-dom兩部分分別打包,所以用到react-dom的地方,導(dǎo)入的位置就要換掉了。如下面圖示:

二、react,babel是環(huán)環(huán)相扣的。升級了react之后升級babel是在所難免的過程了,

注意升級的順序,babel->babel-*其他相關(guān)項(xiàng)->babel-core。原有相關(guān)依賴項(xiàng)不先行升級的話對babel-core的是有版本要求的,會導(dǎo)致升級失敗。

三、升級babel之后,原有babel5的寫法已經(jīng)被廢棄,所以會報錯:

ReferenceError: [BABEL] XXXX.jsx: Unknown option: stage(或loose)

babel6只支持presets和plugins兩個屬性了。babel 最新版本babel6的相關(guān)配置解析可以看下這篇文章。此外,如果少引用了某個插件。會有類似下面的報錯:

Module build failed: SyntaxError: index.js: Unexpected token 四、如果你用到了react-hot-loader實(shí)現(xiàn)熱加載的話,會遇見下面的錯誤: 
Cannot resolve module 'react/lib/ReactMount' switch to react-hot-loader 3.x!

剛才提到的相應(yīng)配置也要升級,這是比較麻煩的一點(diǎn)。所以react-hot-loader要升級到3.X,不過我發(fā)現(xiàn)npm上最新的版本竟然也是beta版,希望不會有其他變動。

五、僅僅是把react-hot-loader升級到3.X還不算完,升級完之后react-hot-loader的用法也要有相應(yīng)改變。此時會有下面的錯誤:

不能像原來一樣在webpack中直接加載react-hot-loader:

需要從webpack中移除react-hot loader。.barbelrc中增加plugins屬性:react-hot-loader/babel。此處問題比較多,大致應(yīng)該裝以下預(yù)設(shè)和插件(babel 最新版本babel6的相關(guān)配置解析可以看下這篇文章,更好理解):

延伸閱讀

學(xué)習(xí)是年輕人改變自己的最好方式-Java培訓(xùn),做最負(fù)責(zé)任的教育,學(xué)習(xí)改變命運(yùn),軟件學(xué)習(xí),再就業(yè),大學(xué)生如何就業(yè),幫大學(xué)生找到好工作,lphotoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)學(xué)習(xí)是年輕人改變自己的最好方式