Metro
Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →
React Native wykorzystuje Metro do budowania Twojego kodu JavaScript i zasobów.
Konfiguracja Metro
Opcje konfiguracyjne Metro można dostosować w pliku metro.config.js Twojego projektu. Może on eksportować:
-
Obiekt (zalecane), który zostanie połączony z domyślnymi ustawieniami konfiguracyjnymi Metro.
-
Funkcję, która zostanie wywołana z domyślną konfiguracją Metro i powinna zwrócić końcowy obiekt konfiguracji.
Pełną dokumentację wszystkich dostępnych opcji konfiguracji znajdziesz w sekcji Configuring Metro na stronie Metro.
W React Native Twoja konfiguracja Metro powinna rozszerzać @react-native/metro-config lub @expo/metro-config. Te pakiety zawierają niezbędne domyślne ustawienia wymagane do budowania i uruchamiania aplikacji React Native.
Poniżej znajduje się domyślny plik metro.config.js w projekcie szablonowym React Native:
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);
Opcje Metro, które chcesz dostosować, możesz zmienić wewnątrz obiektu config.
Zaawansowane: Używanie funkcji konfiguracyjnej
Eksportowanie funkcji konfiguracyjnej oznacza, że samodzielnie zarządzasz końcową konfiguracją — Metro nie zastosuje żadnych domyślnych ustawień wewnętrznych. Ten wzorzec może być przydatny, gdy potrzebujesz odczytać bazową domyślną konfigurację Metro lub ustawiać opcje dynamicznie.
Od wersji @react-native/metro-config 0.72.1 nie ma już potrzeby używania funkcji konfiguracyjnej, aby uzyskać dostęp do pełnej domyślnej konfiguracji. Zobacz sekcję Porada poniżej.
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'],
},
},
);
};
Używanie funkcji konfiguracyjnej jest przeznaczone dla zaawansowanych przypadków użycia. Prostszą metodą niż powyższa, np. w celu dostosowania sourceExts, byłoby odczytanie tych domyślnych wartości z @react-native/metro-config.
Alternatywa
const defaultConfig = getDefaultConfig(__dirname);
const config = {
resolver: {
sourceExts: [...defaultConfig.resolver.sourceExts, 'svg'],
},
};
module.exports = mergeConfig(defaultConfig, config);
Jednak! zalecamy kopiowanie i edytowanie przy nadpisywaniu tych wartości konfiguracyjnych — umieszczając źródło prawdy w Twoim pliku konfiguracyjnym.
✅ Zalecane
const config = {
resolver: {
sourceExts: ['js', 'ts', 'tsx', 'svg'],
},
};