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

Metro

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

Metroの設定​

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

  • オブジェクト（推奨）：Metroの内部設定のデフォルト値にマージされます。
  • 関数：Metroの内部設定のデフォルト値とともに呼び出され、最終的な設定オブジェクトを返すべきです。
ヒント

利用可能なすべての設定オプションについては、MetroウェブサイトのMetroの設定をご覧ください。

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

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

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から、完全なデフォルト設定にアクセスするために設定関数を使用する必要はなくなりました。以下のヒントセクションを参照してください。

js
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からこれらのデフォルト値を読み込むことです。

代替案

js
const defaultConfig = getDefaultConfig(__dirname);

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

module.exports = mergeConfig(defaultConfig, config);

しかし！、これらの設定値をオーバーライドする際には、コピーして編集することをお勧めします — これにより、信頼できる情報源が設定ファイル内に置かれることになります。

✅ 推奨

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

Metroについてもっと学ぶ​