Metro Bundler: ما هو، تجميع المشروع ومبدأ العمل

ما هو Metro Bundler

Metro Bundler هو أداة تجميع JavaScript مفتوحة المصدر طورتها Meta لـ React Native وتُستخدم افتراضياً في جميع مشاريع الإطار. مهمة Metro هي أخذ كود JavaScript للمشروع مع التبعيات وتجميعه في حزمة واحدة أو عدة حزم يتم تشغيلها على الجهاز. على عكس أدوات التجميع العامة (Webpack و Rollup و Parcel)، تم تحسين Metro لخصوصيات التطوير المحمول: الحد الأدنى من وقت البناء، والتحديثات التدريجية أثناء التطوير، والتعامل الصحيح مع وحدات المنصة (الوحدات الأصلية Objective-C و Swift و Java و Kotlin). يتم تضمين Metro في React Native CLI ولا يتطلب تثبيتاً منفصلاً. بدءاً من React Native 0.72، يدعم Metro الإصدار 0.80+ التجميع المتوازي للوحدات، مما يسرع البناء على المعالجات متعددة النواة بنسبة تصل إلى 40%.

هندسة Metro: Resolver و Transformer و Bundler

تنقسم هندسة Metro إلى ثلاثة مكونات مستقلة: Resolver و Transformer و Bundler. يتولى Resolver مسؤولية إيجاد وحل الوحدات — يقرأ تعبيرات import/require، ويجد الملفات المقابلة مع مراعاة امتدادات المنصة، ويعيد المسارات المطلقة. يقوم Transformer بالتحويل البرمجي: يطبق Babel مع presets و plugins، ويحول JSX و TypeScript و Flow إلى JavaScript نقي. Bundler هو المرحلة النهائية: يأخذ الرسم البياني للتبعيات من Resolver والملفات المحولة من Transformer، ثم يسلسلها في حزمة واحدة أو عدة حزم (module bundles). يسمح الفصل إلى ثلاث خطوات لـ Metro بتخزين نتائج كل مرحلة مؤقتاً: إذا تغير ملف واحد فقط، يمكن لـ Resolver و Bundler استخدام التخزين المؤقت للوحدات المتبقية، مما يوفر زيادة في سرعة البناء تصل إلى 10 مرات في وضع التطوير.

Resolver: حل الوحدات والبحث المراعي للمنصة

يقوم Resolver في Metro بتنفيذ خوارزمية حل وحدات متوافقة جزئياً مع حل وحدات Node.js. الفرق الرئيسي عن Node.js هو دعم امتدادات المنصة: require(«./Component») يبحث عن Component.native.js و Component.ios.js و Component.android.js بترتيب الأولوية المحدد. يدعم Resolver أيضاً حقل package.json «react-native» لربط الوحدات بتنفيذات بديلة — هذه هي الآلية القياسية للمكتبات ذات الكود الخاص بالمنصة. إذا لم يتم العثور على الملف، يطرح Resolver خطأ مع مكدس البحث الكامل.

Transformer: Babel والتحويل البرمجي

يستخدم Transformer داخل Metro Babel مع preset metro-react-native-babel-preset. يتضمن التكوين القياسي: تحويل JSX إلى React.createElement، ودعم TypeScript (إزالة الأنواع)، ودعم Flow، و polyfills للمعايير الحديثة في JavaScript (async/await و optional chaining و nullish coalescing). يعمل Transformer في وضع متوازي: يتم تحويل كل وحدة بشكل مستقل، باستخدام مجموعة من عمليات العامل (بشكل افتراضي، يتوافق العدد مع عدد وحدات المعالجة المركزية). بدءاً من Metro 0.80، يتم دعم التخزين المؤقت التفصيلي للمحول — إبطال التخزين المؤقت على مستوى الملف الفردي.

الامتدادات الخاصة بالمنصة في Metro

إحدى الميزات الرئيسية لـ Metro هي دعم امتدادات الملفات الخاصة بالمنصة. يمكن أن يحتوي مشروع React Native على ثلاثة إصدارات من نفس الوحدة: Component.ios.js (iOS) و Component.android.js (Android) و Component.native.js (كلتا المنصتين). عند استيراد require(«./Component»)، يختار Resolver تلقائياً الإصدار الصحيح حسب منصة البناء المستهدفة. يسمح ذلك بكتابة كود يعتمد على المنصة دون استخدام بنود Platform.OS الشرطية. ترتيب الأولوية: name.platform.js > name.native.js > name.js. يُستخدم الامتداد .native.js للكود المشترك الذي يعمل على كلتا المنصتين لكنه غير متوافق مع الويب. تعمل الامتدادات .ios.js و .android.js على تنفيذ ميزات محددة — التنقل، والإيماءات، وعمليات نظام الملفات. يدعم Metro الامتدادات المخصصة من خلال التهيئة resolver.sourceExts.

// metro.config.js — إعداد sourceExts و watchFolders
const config = {
  resolver: {
    sourceExts: ['jsx', 'js', 'tsx', 'ts', 'json'],
    platformExtensions: ['ios', 'android', 'native'],
  },
  transformer: {
    babelTransformerPath: require('metro-react-native-babel-transformer'),
  },
  watchFolders: [path.resolve('../shared')],
};

إعادة التحميل السريع و Fast Refresh في Metro

Fast Refresh هي آلية إعادة تحميل سريعة لـ React Native مبنية فوق Metro. عندما يغير المطور ملفاً، يعيد Metro تحويل الوحدة المعدلة فقط ويرسل التحديث إلى التطبيق عبر WebSocket. يقوم Fast Refresh بتحديث واجهة المستخدم دون إعادة تحميل التطبيق بالكامل ويحافظ على حالة مكونات React إذا تم تغيير JSX أو الأنماط فقط. إذا تم تغيير كود يحتوي على hooks أو حالة، يقوم Fast Refresh بإعادة تركيب المكون المعدل فقط. يدعم Metro وضعين: Hot Module Replacement (HMR) لاستبدال الوحدات أثناء التشغيل و Live Reload لإعادة تحميل التطبيق بالكامل عند تغيير الوحدات الأصلية أو التهيئة. Fast Refresh مفعل افتراضياً في React Native 0.76 ولا يتطلب تهيئة إضافية — يكفي تشغيل npx react-native start.

تهيئة Metro: metro.config.js

metro.config.js هو ملف تهيئة Metro الموجود في جذر مشروع React Native. يتم فيه تهيئة: resolver (sourceExts و platformExtensions و extraNodeModules)، و transformer (babelTransformerPath و minifierConfig)، و server (port و host و enableFastRefresh)، و watcher (watchFolders و healthCheck). ترث تهيئة Metro القياسية من حزمة @react-native/metro-config (React Native 0.76+). للمشاريع ذات المستودع الواحد، أضف watchFolders — يتيح ذلك لـ Metro تتبع التغييرات في الحزم خارج جذر المشروع. لتهيئة sourceExts، أضف «svg» و «png» و «gql» للمحولات المخصصة. يدعم Metro التهيئات غير المتزامنة من خلال async function — مفيد للتوليد الديناميكي للتهيئة بناءً على البيئة.

تحسين البناء من خلال التهيئة

يبدأ تحسين بناء Metro بتهيئة مناسبة للتخزين المؤقت. اضبط maxWorkers على عدد وحدات المعالجة المركزية ناقص 1. للتوزيعات، استخدم resetCache في CI. قلل sourceExts — الامتدادات الإضافية تبطئ حل الوحدات. للمشاريع الكبيرة، هيئ watchFolders فقط للدلائل الضرورية. يدعم Metro تصغير Hermes bytecode الذي يعطي حجماً أصغر للحزمة من Terser القياسي — استخدم minifierPath: «metro-minify-terser».

تجميع Hermes: البناء إلى كود بايت

يدعم Metro وضع بناء مباشرة إلى Hermes bytecode — متجاوزاً مرحلة AST الخاصة بـ JavaScript. عند البناء باستخدام HermesTransformer، يتم تجميع الوحدات إلى HBC (Hermes ByteCode) بدلاً من JavaScript العادي. يوفر ذلك: حجماً أصغر للحزمة (30-40%)، وإقلاعاً أسرع للتطبيق (20-30%)، واستهلاكاً أقل للذاكرة. للتفعيل، اضبط hermesCommand في metro.config.js ونشط علامة Hermes في build.gradle (Android) أو Podfile (iOS). يتم بناء حزم Hermes على مرحلتين: أولاً يبني Metro حزمة JavaScript، ثم يحولها Hermes CLI إلى HBC. بدءاً من React Native 0.70، Hermes هو المحرك الافتراضي على Android، أما على iOS فيتطلب تفعيلاً صريحاً.

Metro ضد Webpack: مقارنة الأساليب

يعود الاختلاف بين Metro و Webpack إلى أهداف مختلفة. Webpack هو أداة تجميع عامة للويب مع نظام بيئي ضخم من الإضافات واللوادر. Metro هو أداة تجميع متخصصة لـ React Native حيث الأولوية هي سرعة البناء التدريجي والعمل الصحيح مع الوحدات الأصلية. يستخدم Webpack رسماً بيانياً طويل الأمد للوحدات مع إبطال ذكي للتخزين المؤقت — يوفر ذلك إعادة بناء سريعة على الويب ولكنه يخلق مشاكل مع امتدادات المنصة. لا يخزن Metro الرسم البياني مؤقتاً بين عمليات البناء بل يبنيه في كل مرة — يبسط ذلك التعامل مع امتدادات المنصة ووحدات Haste. يدعم Webpack الاستيراد الديناميكي مع القطع، ويدعمه Metro أيضاً — من خلال React.lazy() و Suspense، ولكن مع تقييد طلب نشط واحد. النظام البيئي لـ Metro أصغر بكثير: لا يوجد بديل لـ style-loader و css-loader و file-loader — هذه المهام تُحل بشكل مختلف في React Native.

متى تختار Metro

Metro هو الخيار الصحيح الوحيد لمشاريع React Native. لا يدعم Webpack حل الوحدات المراعي للمنصة بشكل افتراضي، ويتطلب إعداد React Native مع Webpack جهداً كبيراً (haul bundler و expo web packager). Metro مدمج في React Native CLI، ومدعوم من فريق Meta الرسمي، ويتلقى التحديثات مع كل إصدار من React Native. لمشاريع React Native Web، يمكنك استخدام Webpack لبناء الويب مع الاحتفاظ بـ Metro للحزم المحمولة.