babel版本變化 - 簡單理解


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
  • 差不多先這些


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM