JavaScript 編譯器 Babel 7 升級筆記

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

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

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

• 不支援和維護 Node 0.10、0.12、4、5 版本
• 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 install 或 npm install 一次

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

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

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

除了更新依賴套件之外，例如像是 .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

• 🔗 Babel 7 Released
• 🔗 費時近 2 年，JavaScript 編譯器 Babel 7 登場