Help us understand the problem. What is going on with this article?

monorepo内のReact Nativeのバージョンをアップグレードするのに苦労した話

More than 1 year has passed since last update.

概要

とあるプロジェクトで使っているReact-Nativeで作成されたアプリにて、React-Nativeのバージョンを0.55.4から0.57.1に変更する中で詰まった事について書く。

なお、当プロジェクトはlernaを用いたmonorepoを活用しており、React-nativeのプロジェクトはそのmonorepoの一つである。

react-native initで作成されたプロジェクトの為、Expoは使用していない。

React Nativeのバージョンが上がる際の変更点

React Nativeのバージョンが上がると、主に以下の変更が行われる。
太字が今回の変更で特徴的だった箇所である。

  • build.gradleinfo.plistなど、各ネイティブアプリのビルドに必要なファイルの変更
  • react等の使用しているdependenciesのバージョンの変更
  • RN0.56.0にてBabelのバージョンが6から7に変更
  • RN0.57.0にて、rn-cli.configで使用されるmetro bundlerの書き方が変更

各変更に対してどの様なアプローチをとったかを記載する。

build.gradle等の変更

React-nativeのバージョン上げで変更されたファイルを楽に変更する手段として
react-native-git-upgradeが存在する。

しかし!

monorepo上で他のmonorepoのpackagesに依存している場合、失敗してしまう。
(2018/12/10現在、別の理由でRN57以降では使用できない)

なので、rn-diff-purgeというレポジトリ上で記載されている各アップグレードの差分をみて手動でファイルの変更を加えていた。

info.plist等、手動で変えていくには辛いものがあったが作業自体は時間がかかるのみで難しくはなかった

react等のdependencyの更新

package.jsonを更新してlerna bootstrapでpackageの更新を行った

Babelのバージョンを6から7に変更

Babel6から7への変更でpackage名に大幅な変更が加わった

babel-coreから@babel/coreへの変更や、
babel-preset-envから@babel/preset-envへの変更である

また、Babel7になるにあたってpreset-stage-系列が廃止されたので、必要なpluginを探して取ってくる必要があった。

加えて、RN0.57ではreact-native用のpresetの名前がreact-native-presetからmetro-react-native-babel-presetへ変更された。

rn-cli.configのフォーマットが変更された

monorepoでreact-nativeを使っていて、packages内に他にreact-nativeへ依存しているpackageがある場合metro bundlerでエラーが発生してしまう。
そのため、rn-cli.configにて重複するreact-nativeをblacklistに入れるようmetro bundlerを設定する必要がある。

その他、react-nativeでtypescriptを使用する際にもこの設定が必要となる。

RN0.57から、このrn-cli.configの書き方が変更された。
設定方法はmetroの公式サイトに記載されている。

また、RN0.57が使っているmetroはblacklistへのパスが少し変更されている。
だが、あまりドキュメントが豊富とは言えないので、trial and errorで試していく必要があった。

rn-cli.config.js
const blacklist = require('metro-config/src/defaults/blacklist')

metro-with-symlinksというrn-cli.config生成用のツールがある事をあとになって知った。使ってはいない。

まとめ

react-nativeのprojectをmonorepoで管理していると、monorepo特有の詰まり方等があって少し苦労した。

最後に

 本記事は We Are JavaScripters!【執筆初心者歓迎】 Advent Calendar 2018 (https://adventar.org/calendars/2972) の 12/10 担当分の記事です。

WeJS2周年おめでとうございます!

Naturalclar
アメリカ人です。日本語もまあわかります。 JSをよく触る 今は主にReactとReact-Native CureAppでエンジニアしてます
https://naturalclar.dev
cureapp
「治療アプリ」という診療現場における新しい疾患治療ツールを開発するプログラム医療機器ベンチャーです。
https://cureapp.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした