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 سے تبدیل شدہ فائلیں لیتا ہے، پھر انہیں ایک یا زیادہ بنڈلوں (ماڈیول بنڈل) میں سیریلائز کرتا ہے۔ تین مراحل میں تقسیم Metro کو ہر مرحلے کے نتائج کیش کرنے کی اجازت دیتی ہے: اگر صرف ایک فائل تبدیل ہوئی ہے، تو Resolver اور Bundler باقی ماڈیولز کے لیے کیش استعمال کر سکتے ہیں، جو ڈویلپمنٹ موڈ میں بلڈ کی رفتار میں 10 گنا تک اضافہ فراہم کرتا ہے۔

Resolver: ماڈیول ریزولوشن اور پلیٹ فارم سے آگاہ تلاش

Metro میں Resolver ایک ماڈیول ریزولوشن الگورتھم نافذ کرتا ہے جو جزوی طور پر Node.js ماڈیول ریزولوشن کے ساتھ مطابقت رکھتا ہے۔ Node.js سے بنیادی فرق پلیٹ فارم ایکسٹینشن کی حمایت ہے: require(«./Component») مخصوص ترجیحی ترتیب میں Component.native.js، Component.ios.js، Component.android.js تلاش کرتا ہے۔ Resolver ماڈیولز کو متبادل نفاذ میں میپ کرنے کے لیے package.json فیلڈ «react-native» کی بھی حمایت کرتا ہے — یہ پلیٹ فارم کے لیے مخصوص کوڈ والی لائبریریوں کے لیے معیاری طریقہ کار ہے۔ اگر فائل نہ ملے تو Resolver مکمل تلاش اسٹیک کے ساتھ ایک خرابی پھینکتا ہے۔

Transformer: Babel اور ٹرانسپائلیشن

Metro کے اندر Transformer metro-react-native-babel-preset پری سیٹ کے ساتھ Babel استعمال کرتا ہے۔ معیاری ترتیب میں شامل ہے: JSX کو React.createElement میں تبدیل کرنا، TypeScript سپورٹ (اقسام ہٹانا)، Flow سپورٹ اور جدید JavaScript معیارات (async/await، optional chaining، nullish coalescing) کے لیے پولی فل۔ Transformer متوازی موڈ میں کام کرتا ہے: ہر ماڈیول ورکر عمل کے پول کا استعمال کرتے ہوئے آزادانہ طور پر ٹرانسپائل کیا جاتا ہے (بطور ڈیفالٹ، تعداد CPU کی تعداد کے مطابق ہوتی ہے)۔ Metro 0.80 سے، Granular Transformer Cache سپورٹ ہے — انفرادی فائل کی سطح پر کیش کو باطل کرنا۔

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

Metro میں ہاٹ ریلوڈ اور Fast Refresh

Fast Refresh Metro کے اوپر بنایا گیا React Native کے لیے ایک ہاٹ ریلوڈ میکانزم ہے۔ جب ڈویلپر فائل تبدیل کرتا ہے، Metro صرف تبدیل شدہ ماڈیول کو دوبارہ ٹرانسپائل کرتا ہے اور WebSocket کے ذریعے ایپ کو اپ ڈیٹ بھیجتا ہے۔ Fast Refresh پوری ایپلیکیشن کو دوبارہ لوڈ کیے بغیر UI کو اپ ڈیٹ کرتا ہے اور اگر صرف JSX یا اسٹائل تبدیل ہوئے ہیں تو React اجزاء کی حالت محفوظ رکھتا ہے۔ اگر ہکس یا حالت والا کوڈ تبدیل ہوتا ہے، تو 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 فائل React Native پروجیکٹ کی جڑ میں واقع Metro ترتیب کی فائل ہے۔ اس میں ترتیب دیے جاتے ہیں: 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 کو CPU کی تعداد مائنس 1 پر سیٹ کریں۔ تقسیم کے لیے، CI پر resetCache استعمال کریں۔ sourceExts کو کم سے کم کریں — اضافی ایکسٹینشن ماڈیول ریزولوشن کو سست کرتی ہیں۔ بڑے پروجیکٹس کے لیے، watchFolders صرف ضروری ڈائریکٹریز کے لیے ترتیب دیں۔ Metro Hermes بائٹ کوڈ مینیفیکیشن کو سپورٹ کرتا ہے، جو معیاری Terser سے چھوٹا بنڈل سائز دیتا ہے — minifierPath: «metro-minify-terser» استعمال کریں۔

Hermes بنڈلنگ: بائٹ کوڈ میں بلڈ

Metro براہ راست Hermes بائٹ کوڈ میں بلڈ موڈ سپورٹ کرتا ہے — JavaScript AST مرحلے کو چھوڑتے ہوئے۔ HermesTransformer کے ساتھ بلڈ کرتے وقت، ماڈیولز سادہ JavaScript کے بجائے HBC (Hermes ByteCode) میں کمپائل ہوتے ہیں۔ یہ فراہم کرتا ہے: چھوٹا بنڈل سائز (30-40%)، تیز ایپلیکیشن اسٹارٹ اپ (20-30%) اور کم میموری استعمال۔ فعال کرنے کے لیے، metro.config.js میں hermesCommand سیٹ کریں اور build.gradle (Android) یا Podfile (iOS) میں Hermes پرچم فعال کریں۔ 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 پلیٹ فارم سے آگاہ ریزولوشن کو ڈیفالٹ میں سپورٹ نہیں کرتا، اور Webpack کے ساتھ React Native سیٹ اپ کرنے کے لیے اہم کوشش درکار ہے (haul bundler، expo web packager)۔ Metro React Native CLI میں ضم ہے، Meta کی سرکاری ٹیم کے ذریعے سپورٹ ہے اور React Native کے ہر ریلیز کے ساتھ اپ ڈیٹ حاصل کرتا ہے۔ React Native Web پروجیکٹس کے لیے، آپ موبائل بنڈلز کے لیے Metro رکھتے ہوئے ویب بلڈز کے لیے Webpack استعمال کر سکتے ہیں۔