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コマンドを実行するためのラッパーになっているだけです。）

なので、実質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を利用する場合は、非常に便利であるため、ぜひ、導入してみてください。