公升級到Babel 7的經驗

2021-09-13 11:13:05 字數 2303 閱讀 5256

babel的最新版本babel 7 已經在henry zhu的不斷努力下發布了,他真的是全身心地投入到了babel的開發中,而babel對於前端界的貢獻也是有目共睹,沒有這個神奇的編譯器,前端界要落地es6語法恐怕還要再等十年。

最近我在給自己團隊的ui元件庫公升級到babel 7,沒有想象中那麼難,但也有一些需要注意的問題,這裡分享一些公升級的體會和經驗。

babel 7的改動還是不少的,乙個比較大的改動在於移除了之前的stage-x外掛程式,根據官方部落格的解釋,stage-x外掛程式原本是對應於ecma script提案中的不同階段,每個階段有不同特性,而stage-x外掛程式事實上就是集合這個階段中幾種特性轉譯的外掛程式,比如我們最經常看到的babel-preset-stage-0,其實就是這樣的:

module.exports = ;
每個stage外掛程式都會包含下一階段的所有外掛程式,這就導致大家為了能用上大多數特性,紛紛採用了babel-preset-stage-0,react專案中,我們最經常看到的babelrc配置是這樣的:

然而,提案一直在變,如今是stage 0的特性,可能之後就進入到了stage 1,也可能之後直接被否決拋棄掉,並不會進入到es規範中。那麼babel是不是應該更新這些stage外掛程式呢?如果更新了,現階段大量前端專案、npm庫都在使用這個stage外掛程式,會不會突然發現就編譯不了某個特性了呢?

到底應該遵循規範,還是應該遷就老專案做相容呢?
最後babel團隊做出來的決定是,廢棄掉stage-x外掛程式!這不僅僅是關乎上面這個問題,由於大家已經習慣了stage的配置,對於其中封裝的各個特性早已不再關心,廢除掉stage-x外掛程式,開發者就得加上自己需要的外掛程式,每個外掛程式對應乙個提案中的特性,這樣專案中的配置也能更清晰。

另外,之前的命名也由@babel/plugin-transform-改為@babel/plugin-proposal-,就是為了強調這只是乙個提案中的特性,並不能確保它會出現在下一代的es規範中。

babel-preset-env已經發布了一段時間,它相比es2015可以更加靈活地配置,babel 7宣布廢棄babel-preset-es201x而採用新的env外掛程式也是理所當然,這個外掛程式的配置不再贅述,可以參考官方文件

為了讓你更方便的公升級到babel 7,官方提供了乙個工具babel-upgrade,對於已有的專案,只需要執行這樣一行命令就可以了:

npx babel-upgrade --write --install
但是這就是為什麼我先寫了前面這兩節的原因,這個工具的本質其實就是把之前的es2015換成envstage-x換成各種proposal-***,並且加上了@babel作為新的babel 7生態統一使用的scope。如果之前的專案使用了stage-x外掛程式,就會多出大量的外掛程式,其實這裡面大部分外掛程式都是無需使用的,你可以根據專案中用到的特性適當刪減。

事實上,我最後專案中只使用了乙個外掛程式,babelrc配置如下:

],"@babel/preset-react"

],"plugins": ["@babel/proposal-class-properties"]

}

這個外掛程式在react專案中十分常用,因為我們經常需要將react元件類中的方法的this繫結到元件本身,如果不用箭頭函式,我們就需要使用bind將函式乙個個繫結好,但如果可以使用箭頭函式在class欄位中直接繫結的話,就非常方便了,即:

class bork 

}

這樣,箭頭函式被當作成class的屬性來看待,this也不會指向undefined

這個特性就需要babel-plugin-transform-class-properties來轉譯,這個外掛程式在原來是包含在stage-2裡面的,現在,就需要單獨引入。

當然其實這裡最好是引入@babel/plugin-proposal-class-properties,更加符合規範。

這個是屬於class field提案。

babel jest不支援babel7的解決方案

jest本身不支援es6語法,需要使用babel jest外掛程式進行轉換 babel jest不支援babel7版本 所以jest執行會報錯,後來在網上找到了解決方案 babel core 7.0.0 bridge.0外掛程式 yarn add dev babel core 7.0.0 bridg...

通達OA 公升級到2015後的幾點經驗感受

前些天趕個週末把oa公升級到了2015,雖然沒有緊跟通達的步伐,但也差的不多,畢竟新版本出來後還有一段時間需要完善和使用者的意見反饋和調整。畢竟每天用這個系統的人很多,所以我們一般都不會趕在第一時間進行公升級。2015版本只支援ie8及以上的版本,或者可以用火狐等瀏覽器,原有的xp系統可能會問題多一...

如何從xp公升級到WIN7

沒自己測試過,僅供參考。windows7剛出來不久,已經關注很長時間了,感覺很人性化,現在我們大多數人用的基本還是用的xp系統,其實從xp到win7也不是很難的問題。del c bootsect.exe 意為刪除c bootsect.exe檔案 del c bootmgr 意為刪除c bootmgr...