4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

LeveragesAdvent Calendar 2018

Day 5

haulを使ったReact Native Appのビルド方法

Last updated at Posted at 2018-12-04

haul is 何

haulはwebpackを利用したreact native用のモジュールバンドラとデバッグ環境を拡張したツールです。

Metro Bundlerと何が違うの?

Metro Bundlerは、babelのみでモジュールバンドルを行なっているために色々な制限がつきます(だいたいbabelプラグインでできる範囲と同じ制約になります)。haulは webpackを利用しているので、typescriptの全制限を解除して使用することができる他、様々なassetsもjsの中に織り込むことができたりします。他にはtreeshakingによるbundleサイズを削減するなどのwebpackの特徴をほぼそのまま使用できます。特にresolveオプションなどは便利なので、アセットを再利用したい時に有用です。

使うために

haul.config.jsという設定ファイルを使います。設定ファイルはほぼwebpack 全ての設定が有効です。

設定はこちらを参考にします。
仕組みは簡単で、androidの場合は、bundle先のファイルパスの指定をhaul用に、Xcodeでは、build Phaseを見ればわかる通りjsのバンドルをhaul-cliでバンドル処理を施した後、その後のipaのビルド処理をreact-native-cliのビルドコマンドに投げているだけです。(react-native-xcode.shのビルドコマンドも実際はxcodebuildコマンドを実行するためのラッパーになっているだけです。)

スクリーンショット 2018-11-25 19.38.18.png

なので、実質haulが担保している役割はmetroで行われているdebug用サーバをwebpack-devserverに向けていることと、buildの処理を metroからhaulに委譲しているだけで、nativeビルドに関与している処理は部分的であるため、シームレスにメトロとの交換が可能です。

buildについて

設定は以上です。次にデバッグ中のreact-nativeの起動はreact-nativeコマンドではなくhaulコマンドになります。

haul --platform ios or android

でmetroではなくhaulサーバが起動するので、この状態でreact-native startを実行します。

リリースビルドは普通のreact-native-cliと同様にreact-native run-ios --configuration Releaseなどのコマンドでおこないます。このコマンドによってipaまたはapkにbundleされたjsが組み込まれるようになります。(これらのコマンドはビルドスキーマを参照してビルド設定に合わせてビルドしているだけなので、実際はおのおのフェーズでbundleしたjsを組み込むフェーズが定義されているからです)

React Nativeでhaulを使う利点

基本的にTypescriptの恩恵をフルに受けるためとwebpackの設定に慣れている人が拡張性を高く利用するために導入するのでが良いでしょう。Expoなどで完結できるアプリやjs onlyアプリで開発する場合、あまりメリットはありません。ただ、Typescriptを利用する場合は、非常に便利であるため、ぜひ、導入してみてください。

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?