サイト名変更・お引越しのお知らせ

【iOS/Android】ReactNativeでよく使うキャッシュ削除系コマンド一覧

ReactNative

ReactNativeの開発の中で、頻繁に使うキャッシュ削除コマンドをまとめます。

全体を先にみたい方はまとめ部分までスキップ

モグモグさん

キャッシュを削除することで、直ることもあるので

何か予期せぬ動きをしたら、まずはキャッシュを削除

ワンライナーで削除

それぞれのキャッシュを紹介・解説する前に、ワンライナーでキャッシュを削除するコマンドです。

バージョンは、下記を想定しています。

  • npm 6.0以上
  • ReactNative 0.50以上

モグモグさん

実行してもおかしな挙動をする場合は、この後紹介する個別のコマンドを実行してみてね。

注意

npx react-native startで立ち上げている方は、コマンド最後のnpm start もしくは yarn startの部分を

npx react-native start –reset-cacheに書き換えてください。

npm向け

$ watchman watch-del-all && rm -rf node_modules/ && npm cache clean && npm install && npm start --reset-cache

yarn向け

$ watchman watch-del-all && rm -rf node_modules/ && yarn cache clean && yarn install && yarn start --reset-cache

共通

iOS/Android共通で使うコマンドを紹介します。

watchmanのキャッシュを削除

$ watchman watch-del-all

補足

watchmanとはFacebookが作成しているオープンソースで、

ReactNativeでもつかわれています。

ファイルの変更を検知し、リビルドするなどの役割を担っています。

node_modulesを削除

$ rm -rf node_modules

npm or yarnのキャッシュ削除

// npm
$ npm cache clean

// yarn
$ yarn cache clean

metro bundlerをrestart

// npm
$ npm start --reset-cache

// yarn
$ yarn start --reset-cache

// npx react-native
$ npx react-native start --reset-cache

iOS

続いて、iOSのキャッシュ系コマンドを紹介します。

ビルドを削除

$ rm -rf ios/build

Podsのキャッシュを削除

// ios/で実行
$ pod deintegrate && pod cache clean --all

Podsを削除

$ rm -rf ios/Pods

Xcodeのキャッシュを削除

$ rm -rf ~/Library/Developer/Xcode/DerivedData

補足

上記のディレクトリの削除は、

容量の圧迫を防止するのにも有効です。

プロジェクト単体でキャッシュを削除したい場合は、Xcodeから「Clean Build Folder」を実行でもOK!

Android

最後に、Androidに関するコマンドの紹介です。

ビルドを削除

$ rm -rf android/app/build

Gradleのキャッシュを削除

$ rm -rf  ~/.gradle/caches/

プロジェクトのキャッシュをクリーン

// android/で実行
$ ./gradlew cleanBuildCache

まとめ

ReactNativeの開発でよく使うキャッシュのコマンドをまとめました。

モグモグさん

個別ではなく全体を羅列したので、こちらの方が使いやすい方はどうぞ!

## 共通
- watchmanのキャッシュを削除
$ watchman watch-del-all

- node_modulesを削除
$ rm -rf node_modules

- npm or yarnのキャッシュ削除
// npm
$ npm cache clean

// yarn
$ yarn cache clean

- metro bundlerをrestart
// npm
$ npm start --reset-cache

// yarn
$ yarn start --reset-cache

// npx react-native
$ npx react-native start --reset-cache

## iOS
- ビルドを削除
$ rm -rf ios/build

- Podsのキャッシュを削除
// ios/で実行
$ pod deintegrate && pod cache clean --all

- Podsを削除
$ rm -rf ios/Pods

- Xcodeのキャッシュを削除
$ rm -rf ~/Library/Developer/Xcode/DerivedData

## Android
- ビルドを削除
$ rm -rf android/app/build

- Gradleのキャッシュを削除
$ rm -rf  ~/.gradle/caches/

- プロジェクトのキャッシュをクリーン
// android/で実行
$ ./gradlew cleanBuildCache