babel版本變化
現在大部分使用babel的項目都是用的babel7.x了,但是還是需要去了解一下babel每個版本的一個重大變化,本篇主要是簡單來記錄下我了解的babel幾個版本的重大變化
babel5.x
我看官網babel5已經沒有了,,,但是在我了解的過程中,有好多博客都說有babel5,,,差不多就是說babel5就是一個全家桶,類似於vue-cli那樣的東西,包括各種包和插件,babel5大概就是讓你通過一次安裝,盡可能的可以達到所有你想要的東西。
babel6.x
babel5升級到babel6最主要的原因可能就是之前都讓大家一次npm就把所有的東西都安裝了,但是有的東西是不需要的,導致包的體積很大,所有babel6就把一些包和插件都拆了出來可以去獨立安裝,我的猜測是這樣的。。。
babel6的改變:
- 把之前的一次性安裝拆成了一些核心安裝包:babel-core、babel-cli、babel-polyfill等等。。。
- 插件化,根據自己的需求去手動的添加plugin,這點我覺得可以,一切都講究個按需加載嘛;
- 可以使用.babelrc 文件來配置babel,方便自定義的配置,難道說babel5只能在package.json中配置?知道的大佬可以給我評論下0.0
- 添加了預設preset,這個預設在我學到的時候再細說,聽說很牛逼;
- babel5可以直接把require的轉成import,babel6就不行,如果用了require需要加上.default才可以,不過我覺得直接改成import就好了,這一條我是有的說的,因為我,,,夢到過(卡姆說的),有次我也遇到了這個問題,引入的一個第三方包里面有用require,我的解決方案是引入了一個叫@babel/plugin-transform-modules-commonjs插件就把require編譯成import了;
- 差不多了,babel6先了解這么多,還想了解的可以去babel官網看看。
babel7.x
來了來了,最牛逼的babel7
- 安裝包都使用npm的scope包@balbel/xxx,不會再出現和別的包名沖突;
- 所有階段預設state-x均已棄用,使用plugin代替,官網也有一個升級方案,可以安裝babel-upgrade包,它會把你之前有用過的stage-x自動換成對應的plugin,我沒用過,有需求的可以去看看
https://github.com/babel/babel/blob/master/packages/babel-preset-stage-0/README.md
- 更強大的env
- 之前有的插件是帶着類似於es2015這樣的(等等),比如@babel/plugin-transform-es2015-classes,現在直接寫@babel/plugin-transform-classes就可以
- 有些包被刪了,比如babel-core/register.js,應直接用@babel/register
- 差不多先這些