Saltar al contenido principal
Versión: 0.77

Metro

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

React Native utiliza Metro para compilar tu código JavaScript y recursos.

Configuración de Metro​

Las opciones de configuración de Metro pueden personalizarse en el archivo metro.config.js de tu proyecto. Este puede exportar:

  • Un objeto (recomendado) que se fusionará con los valores predeterminados internos de Metro.

  • Una función que recibirá la configuración predeterminada interna de Metro y debe devolver un objeto de configuración final.

consejo

Consulta Configuring Metro en el sitio de Metro para ver la documentación de todas las opciones disponibles.

En React Native, tu configuración de Metro debe extender ya sea @react-native/metro-config o @expo/metro-config. Estos paquetes contienen valores predeterminados esenciales para compilar y ejecutar aplicaciones de React Native.

A continuación se muestra el archivo metro.config.js predeterminado en un proyecto plantilla de React Native:

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);

Las opciones de Metro que deseas personalizar pueden configurarse dentro del objeto config.

Avanzado: Uso de una función de configuración​

Exportar una función de configuración implica gestionar manualmente la configuración final — Metro no aplicará ningún valor predeterminado interno. Este patrón es útil cuando necesitas leer la configuración base predeterminada de Metro o establecer opciones dinámicamente.

información

Desde @react-native/metro-config 0.72.1, ya no es necesario usar una función de configuración para acceder a la configuración predeterminada completa. Consulta la sección Consejo a continuación.

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'],
      },
    },
  );
};
consejo

Usar una función de configuración es para casos avanzados. Un método más simple que el anterior, por ejemplo para personalizar sourceExts, sería leer estos valores predeterminados desde @react-native/metro-config.

Alternativa

js
const defaultConfig = getDefaultConfig(__dirname);

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

module.exports = mergeConfig(defaultConfig, config);

Sin embargo, recomendamos copiar y editar al sobrescribir estos valores de configuración — manteniendo la fuente de verdad en tu archivo de configuración.

✅ Recomendado

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

Más información sobre Metro​