最近項(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)配置解析可以看下這篇文章,更好理解):
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動安全 [無線安全]玩轉(zhuǎn)無線電——不安全的藍(lán)牙鎖 2017-07-26
- 消息隊(duì)列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】 2017-07-26
- 詞向量-LRWE模型-更好地識別反義詞同義詞 2017-07-26
- 從棧不平衡問題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實(shí)現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解 2017-07-26
- 阿里移動安全 Android端惡意鎖屏勒索應(yīng)用分析 2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來看看(二) 2017-07-26