跳到主要內容

Metro

React Native 使用 Metro 來建置您的 JavaScript 程式碼和素材資源。

設定 Metro​

Metro 的設定選項可以在專案的 metro.config.js 檔案中自訂。這可以匯出以下其中一種

  • 物件 (建議)，它將合併到 Metro 內部預設設定之上。
  • 函式，它將使用 Metro 的內部預設設定來呼叫，並應傳回最終的設定物件。
提示

請參閱 Metro 網站上的 Configuring 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​