メインコンテンツにスキップ

Metro

React Nativeは、JavaScriptコードとアセットをビルドするためにMetroを使用します。

Metroの設定​

Metroの設定オプションは、プロジェクトのmetro.config.jsファイルでカスタマイズできます。これは次のいずれかをエクスポートできます。

  • Metroの内部設定のデフォルトの上にマージされるオブジェクト（推奨）。
  • 関数。これはMetroの内部設定のデフォルトとともに呼び出され、最終的な設定オブジェクトを返す必要があります。
ヒント

利用可能なすべての設定オプションのドキュメントについては、Metro WebサイトのMetroの設定を参照してください。

React Nativeでは、Metroの設定は、@react-native/metro-configまたは@expo/metro-configのいずれかを拡張する必要があります。これらのパッケージには、React Nativeアプリをビルドして実行するために必要な必須のデフォルトが含まれています。

以下は、React Nativeテンプレートプロジェクトのデフォルトのmetro.config.jsファイルです。

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

/**
 * Metro configuration
 * https://metrobundler.dev/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

カスタマイズしたいMetroオプションは、configオブジェクト内で行うことができます。

詳細設定：設定関数の使用​

設定関数をエクスポートすると、最終的な設定を自分で管理することにオプトインすることになります。Metroは内部デフォルトを適用しません。このパターンは、Metroから基本のデフォルト設定オブジェクトを読み取る必要がある場合や、オプションを動的に設定する場合に役立ちます。

情報

@react-native/metro-config 0.72.1以降、完全なデフォルト設定にアクセスするために設定関数を使用する必要はなくなりました。以下のヒントセクションを参照してください。

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

module.exports = function (baseConfig) {
  const defaultConfig = mergeConfig(baseConfig, getDefaultConfig(__dirname));
  const {resolver: {assetExts, sourceExts}} = defaultConfig;

  return mergeConfig(
    defaultConfig,
    {
      resolver: {
        assetExts: assetExts.filter(ext => ext !== 'svg'),
        sourceExts: [...sourceExts, 'svg'],
      },
    },
  );
};
ヒント

設定関数の使用は、高度なユースケース向けです。たとえば、sourceExtsをカスタマイズする場合など、上記よりも簡単な方法は、@react-native/metro-configからこれらのデフォルトを読み取ることです。

代替案

const defaultConfig = getDefaultConfig(__dirname);

const config = {
  resolver: {
    sourceExts: [...defaultConfig.resolver.sourceExts, 'svg'],
  },
};

module.exports = mergeConfig(defaultConfig, config);

ただし！、これらの設定値を上書きする場合は、コピーして編集することをお勧めします。設定ファイルの真実のソースを配置します。

✅ 推奨

const config = {
  resolver: {
    sourceExts: ['js', 'ts', 'tsx', 'svg'],
  },
};

Metroの詳細​