窓を作っては壊していた人のブログ

この謎のブログタイトルの由来を知るものはもういないだろう

RxJS v5 -> v6への移行で詰まったことメモ

約2週間ぐらい前にRxJSのv6がリリースされました.

rxjs/CHANGELOG.md at master · ReactiveX/rxjs · GitHub

C#ユーザの方はSystem.Reactiveのnamespaceを使っておけば取り合えず大丈夫みたいな大変幸せな世界で生活することが出来るのですが,今回のRxJSはnamespaceが割とバージョンで変わります.

このnamespace周りが移行作業を難しくするものです. やっていきましょう.

とりあえずMIGRATION.mdのRxJS v5.x to v6 Update Guideを進めればいい感じに済みます.

ある程度古いプロジェクトでいろんな個所に修正箇所が分散している状態の場合rxjs-tslintを使うことで自動的に修正を行うことが出来ます. 修正内容としてはimportの修正ぐらいに留まってしまうので,自分で頑張って直しましょう.

そこまでは出来るんです. Update Guideに則って修正したにも関わらず,環境によってはrxjs-compatをパッケージから除外するとビルドが通らなくなるという現象が起こります.

私はここに非常に悩まされたのですが,原因としては簡単で一般的に使われてる便利メソッドを全部一気にimportするみたいなハックとして使われている import rxjs/Rx

この一文がすべての元凶になります. 他のimportの仕方をしてもたいていrxjs-tslintがいい感じに直してくれますが,こういうのに対しては無意味でした.

まとめ

  1. RxJS v5.x to v6 Update Guideに則って進める
  2. rxjs-compat入れたり,rxjs-tslintを入れたりして修正を進めてまずは最低限動くように
  3. rxjs-compatへの依存を断ち切るために新しい記法を採用する
  4. rxjs-tslintでエラーがないか確認
  5. import 'rxjs/Rx' をしているとビルドは通らないけどrsjs-tslintは問題なく進むので注意

さあv7の準備もしないとな...