「Babel 8 Release Plan」を眺める #JavaScript

次のBabelのメジャーバージョンである8の計画がここで見られる。数が多いので一部を取り上げる。

概要

リリース予定は2020年初め
過去2回のメジャーバージョンに比べ移行は簡単になる
バージョン8.0.0は破壊的変更のみ
同じ日にマイナーバージョンで破壊的でない変更がリリースされる

初期化されてないクラスのフィールドを消さない (TypeScript/Flow)

class Foo { x: string }

といった型のみが宣言されたフィールドが今までは

class Foo {}

と消されていたのが

class Foo { x }

となり、実行時にundefinedで初期化されるようになる。VueやMobxなどで、オブジェクトのキーをすべて初期化しなきゃいけないケースで楽になりそう。

console.logすると違いがわかる

Flow, TypeScriptそれぞれの言語の機能としてフィールドを消すように明示すると今までの動作を維持できる。

// Flow
class A {
  foo: string; // 消えない
  /*:: bar: number */ // 消える
}

// TypeScript (3.7)
class A {
  foo: string; // 消えない
  declare bar: number; // 消える
}

`import()`からSystemJSへの変換で`@babel/plugin-proposal-dynamic-import`を必須にする

SystemJSに変換していない場合関係ない

JSXでの不正なカンマ演算子をエラーにする

以下のようなコードが今まで許されていたのがパースエラーになる

[<div>{3, 1}</div>, <div foo={hoge, fuga} />]

既に以下のようなコードに修正できる

[<div>{(3, 1)}</div>, <div foo={{hoge, fuga}} />]

TypeScriptで変換した場合既にエラーになる (https://stackoverflow.com/questions/52139174/comma-operator-in-typescript-jsx-expressions)

そもそもカンマ演算子を使うことがまれだが、<div foo={hoge, fuga}/>のような書き方は間違えてやってしまいそう

JSXのSpread PropertyをObject Spreadに変換する

[<div {...props} />]

といった書き方がObject.assignなどになっていたのが、Object Spread ({foo: 1, ...props}) の構文に変換されるようになる。

7.7.0で追加されたuseSpreadオプションで同じ動作になるが、8からデフォルトになる。

Nodeの必須バージョンが10.9以上に

Nodeの8.xが2019年末で終了するため。10.xのLTSは10.13から。

`@babel/core`へのPeer Dependencyが`^8.0.0`になる

すべての@babel/*パッケージを8に上げれば影響はない

「Babel 8 Release Plan」を眺める

概要