JavaScript 編譯器 Babel 7 升級筆記

September 1, 2018

Photo by Worldvectorlogo

前陣子 JavaScript 的編譯器 Babel 正式釋出了新版本 - Babel 7

簡單來說,Babel 可以讓你方便的使用 ECMAScript 的新語法,編譯過後可以向後兼容,在許多開源專案上都可以看到它的身影。這次的升級當中會到許多 Breaking Change(重大改變),其中最先會遇到的就是 scoped package 的問題,目前 Babel 7 所有的 package 名稱都是由 @babel/x 這樣的形式,前綴 @babel 意思是代表是 Babel 這個組織。

這次升級主要的幾個重點:

  • 不支援和維護 Node 0.100.1245 版本
  • Scoped Packages
    • babel-cli -> @babel/cli
  • 移除年度的 preset
    • babel-preset-es2015,可以透過 babel-preset-env 作為替代
  • TC39 提案的 plugin 由 proposal 取代 transform
    • @babel/plugin-transform-class-properties -> @babel/plugin-proposal-class-properties
  • 速度的提升
  • TC39 Proposal 的支援
  • TypeScript 的支援
  • JSX Fragment 的支援

Babel 提供一個更新的 package 讓你可以方便地快速升級 Scoped Package - babel-upgrade,目前這個專案還在進行中,還有部分的 TODO 還沒完成,不過還是可以嘗試一下,使用方式非常地簡單,透過 npx 來安裝升級 package.json 內的依賴套件:

$ npx babel-upgrade --write --install

⚠️ 注意!這只是幫你更新 package.json 的依賴套件版本,你還需再 yarn installnpm install 一次

實際範例 - react-gh-like-diff

我以自己開發的 react-gh-like-diff package 作為範例:

screenshot-2018-09-11-11.07.31

上圖是透過 babel-upgrade 所做的更新,不包含 babel 以外的其它套件

screenshot-2018-09-11-11.13.08

除了更新依賴套件之外,例如像是 .babelrc 的設定也需要一併做更新。

若是使用 jest 作為測試工具,請記得還要再額外安裝 babel-jest,否則你可能在跑測試時會遇到類似以下的錯誤訊息:

Requires Babel "^7.0.0-0", but was loaded with "6.26.0".If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version.Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babel.

以上,希望大家可以升級順利!

Reference