रेल एप्लिकेशन पर अपने रूबी में वेबपैकर का उपयोग करना - एक गहरा गोता

इंटरनेट युग की शुरुआत में, वेबसाइटें बहुत सरल थीं और बहुत इंटरैक्टिव नहीं थीं। प्रौद्योगिकी, उपकरणों और प्रोग्रामिंग भाषाओं की प्रगति के साथ, वे और अधिक जटिल हो गए और इसमें कई फाइलें शामिल थीं, जिनमें इमेज और सीएसएस स्टाइलशीट जैसी संपत्तियां शामिल थीं।

आपकी वेबसाइट जितनी अधिक इंटरैक्टिव होगी, आपको उतने ही अधिक जावास्क्रिप्ट कोड का उपयोग करना होगा। ऐसे कोड का उपयोग करने के लिए, आपको स्क्रिप्ट टैग का उपयोग करके सभी HTML कोड फ़ाइलों को शामिल करना होगा। ऐसा दृष्टिकोण त्रुटि-प्रवण है क्योंकि आपको प्रत्येक फ़ाइल को शामिल करना और सही क्रम रखना याद रखना होगा, अन्यथा, आपका कोड काम नहीं कर सकता है। वेबपैक टूल से ये समस्याएं दूर हो जाती हैं। वेबपैकर वेबपैक और रेल एप्लिकेशन के बीच एक सेतु है।

यह लेख वेबपैकर में गहराई से गोता लगाता है और एक विस्तृत विवरण प्रदान करता है जो आपको यह समझने में सक्षम करेगा कि यह उपकरण हुड के तहत कैसे काम करता है। सामग्री को यथासंभव मूल्यवान बनाने के लिए, मैंने इसे निम्नलिखित अनुभागों में विभाजित करने का निर्णय लिया:

• उच्च-स्तरीय अवलोकन - इससे पहले कि हम गहरा गोता लगाएँ, मैं वेबपैक और वेबपैकर दोनों के उच्च-स्तरीय अवलोकन की व्याख्या करूँगा। आप इसे अधिक उन्नत विषयों की तैयारी के रूप में देख सकते हैं।
• संरचना की व्याख्या — चूंकि हम कई फाइलों का पता लगाएंगे, इसलिए यह जानना अच्छा है कि विशेष संरचना का उपयोग क्यों किया गया था और यह सामान्य उद्देश्य के लिए कैसे प्रतिक्रिया करता है।
• एनाटॉमी स्पष्टीकरण — इस भाग में वेबपैक सेटअप की सबसे महत्वपूर्ण फाइलों की जांच शामिल है। प्रभावी और परेशानी मुक्त विकास प्रक्रिया के लिए यह जानना आवश्यक है कि वे कैसे काम करते हैं।
• पर्यावरण विशिष्ट सेटअप — अंतिम भाग बताता है कि वेबपैकर विकास और उत्पादन वातावरण में कैसे काम करता है।

इस लेख को पढ़ने के बाद, आपको पता चल जाएगा कि वेबपैक और वेबपैकर क्या हैं और हमें अपने रेल एप्लिकेशन में इनकी आवश्यकता क्यों है। Webpacker के आंतरिक भाग में गहराई से जाने से आपको यह समझने में मदद मिलेगी कि टूल Webpack से कैसे जुड़ता है और यह Rails एप्लिकेशन के साथ कैसे संचार करता है।

गोता लगाने से पहले

गहरे पानी में जाने से पहले हमें सबसे पहले तैयारी करनी होगी। किसी भी तकनीक के साथ काम करना शुरू करने के लिए एक उच्च-स्तरीय अवलोकन एक शानदार तरीका है क्योंकि यह हमें किसी दिए गए टूल के उद्देश्य को समझने में मदद करता है और समस्याओं को इसके आंतरिक भाग में जाने के बिना हल करता है।

वेबपैक

मैंने पहले ही उल्लेख किया है कि वेबपैक त्रुटियों से बचने और वेबसाइट के प्रदर्शन को बेहतर बनाने के लिए हमारे जावास्क्रिप्ट फ़ाइल कोड को व्यवस्थित करने में हमारी मदद करता है। यह कोड को बंडलों में व्यवस्थित करता है।

बंडल एक ऐसी फ़ाइल है जिसमें पहले बनाए गए डिपेंडेंसी ग्राफ़ का सम्मान करते हुए कई मॉड्यूल्स को समझदारी से रखा जाता है। इस प्रक्रिया के लिए धन्यवाद, हम यह सुनिश्चित कर सकते हैं कि हमारा कोड अपेक्षित रूप से काम करेगा और किसी दिए गए पुस्तकालय के कोड को लागू करने से पहले, यह लोड हो चुका होगा।

वेबपैक एकमात्र ऐसा उपकरण नहीं है जो रेल के नवीनतम संस्करण में डिफ़ॉल्ट रूप से उपयोग किया जाता है। जब प्रोजेक्ट जनरेट होता है, तो Babel और PostCSS के लिए कॉन्फ़िगरेशन फ़ाइलें भी बनाई जाती हैं। PostCSS CSS को JavaScript के साथ बदलने का एक उपकरण है, और Babel एक JavaScript कंपाइलर है जो हमें ब्राउज़र समर्थन की चिंता किए बिना आधुनिक JavaScript लिखने में सक्षम बनाता है।

वेबपैकर

वेबपैकर एक उपकरण है जो वेबपैक को रेल एप्लिकेशन के साथ एकीकृत करता है। यह जावास्क्रिप्ट जैसे अनुप्रयोगों को कॉन्फ़िगर और विकसित करना और उन्हें उत्पादन वातावरण के लिए अनुकूलित करना आसान बनाता है।

स्रोत कोड एक रत्न के रूप में उपलब्ध है, और पुस्तकालय एक विकास सर्वर के साथ आता है जो ऐप के विकास को बहुत तेज़ बनाता है क्योंकि आपको जावास्क्रिप्ट फ़ाइलों में पेश किए गए परिवर्तनों को देखने के लिए सर्वर को रोकने और शुरू करने की आवश्यकता नहीं है।

गहरा विसर्जन

अब जब आप जानते हैं कि वेबपैक क्यों बनाया गया था और रेल एप्लिकेशन में वीपैकर क्या भूमिका निभाता है, तो हम वेबपैकर के आंतरिक पर ध्यान केंद्रित कर सकते हैं कि यह कैसे फाइलों को व्यवस्थित करता है, विकास प्रक्रिया को गति देता है, और उत्पादन वातावरण के लिए फाइलों को अनुकूलित करता है।

वेबपैकर रेल के नवीनतम संस्करण में आउट-ऑफ-द-बॉक्स उपलब्ध है। नया प्रोजेक्ट बनाने से पहले, सुनिश्चित करें कि Node संस्करण webpacker:install के रूप में 10.17.0 से बड़ा या बराबर है रेल नई कमांड के साथ कमांड स्वचालित रूप से लागू हो जाएगा।

वेबपैकर फ़ाइल संरचना

इंस्टाल कमांड के निष्पादित होने के बाद, निम्नलिखित फाइलें बनाई जाती हैं:

• config/webpacker.yml — मुख्य कॉन्फ़िगरेशन फ़ाइल जिसमें विशिष्ट वातावरण के लिए डिफ़ॉल्ट कॉन्फ़िगरेशन और कॉन्फ़िगरेशन शामिल हैं
• config/webpacker/ — वह निर्देशिका जहां विशेष वातावरण के लिए JavaScript कॉन्फ़िगरेशन फ़ाइलें बनाई जाती हैं
• bin/webpack - एक निष्पादन योग्य फ़ाइल जो बंडल बनाने के लिए वेबपैक को आमंत्रित करती है
• bin/webpack-dev-server — एक निष्पादन योग्य फ़ाइल जो विकास सर्वर को प्रारंभ करती है, जो हर बार जब आप बंडल में शामिल JavaScript फ़ाइलों में कोई परिवर्तन करते हैं तो वेबपैक पुनः लोड करता है

कॉन्फ़िगरेशन फ़ाइल का एनाटॉमी

वेबपैकर के लिए मुख्य कॉन्फ़िगरेशन फ़ाइल कॉन्फ़िगरेशन निर्देशिका के अंतर्गत स्थित है, और इसका नाम webpacker.yml है . वेबपैकर के विपरीत, वेबपैक के लिए कॉन्फ़िगरेशन प्रत्येक परिवेश के लिए config/webpack . के अंतर्गत अलग से संग्रहीत किया जाता है निर्देशिका।

वेबपैकर

डिफ़ॉल्ट रूप से, कॉन्फ़िगरेशन फ़ाइल में कई प्रविष्टियाँ होती हैं - डिफ़ॉल्ट वाले, और प्रत्येक परिवेश के लिए अनुभाग जहाँ आप विशिष्ट सेटिंग्स को अधिलेखित कर सकते हैं। आइए सबसे महत्वपूर्ण सेटिंग्स पर एक नज़र डालें:

• source_path - आपके एप्लिकेशन में जावास्क्रिप्ट फाइलों का प्राथमिक स्रोत। यह app/javascript पर सेट है डिफ़ॉल्ट रूप से, और आमतौर पर, इस मान को बदलने की कोई आवश्यकता नहीं होती है।
• source_entry_path — source_path के अंतर्गत निर्देशिका का नाम जहां आप पैक फ़ाइलें, उर्फ ​​प्रविष्टि बिंदु रखते हैं। डिफ़ॉल्ट रूप से, यह सेटिंग पैक की निर्देशिका पर सेट होती है।
• public_root_path - आपके एप्लिकेशन में निर्देशिका का पथ जो ब्राउज़र से पहुंच योग्य है। एक सामान्य रेल एप्लिकेशन में, यह एक सार्वजनिक निर्देशिका है
• public_output_path — जब वेबपैकर आपकी फाइलों को संकलित करता है, तो यह इस निर्देशिका में सभी संकलित फाइलों को public_root_path के अंतर्गत रखेगा। . डिफ़ॉल्ट रूप से, निर्देशिका को पैक नाम दिया गया है, लेकिन आप इसे जो चाहें कॉल कर सकते हैं।
• webpack_compile_output — अगर फ्लैग को ट्रू पर सेट किया जाता है, तो फाइल के कंपाइल होने पर आउटपुट मैसेज प्रदर्शित होते हैं। संकलन विफल होने पर यह उपयोगी होता है, क्योंकि आप इससे अवगत होंगे और कार्रवाई कर सकते हैं।

यह उल्लेखनीय है कि विकास खंड में देव सर्वर के लिए कॉन्फ़िगरेशन भी शामिल है जिसका उपयोग सर्वर को पुनरारंभ करने की आवश्यकता के बिना विकास वातावरण में फ़ाइलों को संकलित करने के लिए किया जाता है।

यदि आप कॉन्फ़िगरेशन को रेल कंसोल या कोड स्तर से एक्सेस करना चाहते हैं, तो आप Webpacker.manifest.config पर कॉल कर सकते हैं। , जो कॉन्फ़िगरेशन क्लास इंस्टेंस लौटाएगा।

वेबपैक

प्रत्येक परिवेश की अपनी कॉन्फ़िगरेशन फ़ाइल होती है, लेकिन प्रत्येक फ़ाइल में, मुख्य परिवेश फ़ाइल आयात की जाती है:config/webpack/environment.js . पर्यावरण कॉन्फ़िगरेशन फ़ाइल में, कस्टम प्लगइन्स लोड करने के लिए एक जगह है जो वेबपैक के डिफ़ॉल्ट व्यवहार को संशोधित करेगी। हम अपनी फाइलों को संकलित करने के लिए कस्टम नियम भी जोड़ सकते हैं।

द एनाटॉमी ऑफ़ द पैक फ़ाइल

पैक app/javascript/packs के अंतर्गत स्थित हैं निर्देशिका। संकलन प्रक्रिया शुरू होने पर प्रत्येक पैक फ़ाइल को Webpacker द्वारा एक प्रवेश बिंदु के रूप में माना जाता है।

डिफ़ॉल्ट पैक फ़ाइल

जब आप एक नया रेल प्रोजेक्ट बनाते हैं, तो application.js नाम की एक डिफ़ॉल्ट पैक फ़ाइल निम्न सामग्री के साथ बनाई जाती है:

import Rails from "@rails/ujs";
import Turbolinks from "turbolinks";
import * as ActiveStorage from "@rails/activestorage";
import "channels";
 
Rails.start();
Turbolinks.start();
ActiveStorage.start();

जैसा कि आप देख सकते हैं, पहला कदम दिए गए पुस्तकालय को आयात करना है और फिर जरूरत पड़ने पर इसकी आरंभीकरण विधि को कॉल करना है। जब आप आयात को कॉल करते हैं, तो सिस्टम किसी दिए गए नोड मॉड्यूल या स्थानीय पुस्तकालय की खोज करता है। मानक दृष्टिकोण के साथ, जब आप इसे स्क्रिप्ट टैग के साथ पृष्ठ स्रोत में शामिल करते हैं तो आपको पुस्तकालय को स्पष्ट रूप से प्रारंभ करने की आवश्यकता नहीं होती है।

पैक फ़ाइल के लिए अच्छे अभ्यास

जबकि आप पैक फ़ाइल के अंदर नियमित जावास्क्रिप्ट कोड डाल सकते हैं और इसे निष्पादित कर सकते हैं, यह अनुशंसा नहीं की जाती है कि जावास्क्रिप्ट कोड को पैक फ़ाइल के अंदर रखा जाए। सबसे अच्छा तरीका यह है कि फाइलों को साफ रखा जाए और यहां केवल पुस्तकालयों को आयात और आरंभ किया जाए और अन्य तर्क को पैक निर्देशिका से बाहर रखा जाए।

एप्लिकेशन में पैक फ़ाइलें शामिल करना

पैक फ़ाइलें स्वचालित रूप से वेबसाइट के स्रोत में शामिल नहीं होती हैं। संपत्ति पाइपलाइन मामले की तरह, हमें अपने विचारों के अंदर एक विशेष टैग का उपयोग करना होगा:

<%= javascript_packs_with_chunks_tag 'application' %>

यह तरीका कैसे काम करता है? हुड के तहत, यह वेबपैकर कॉन्फ़िगरेशन को कॉल करता है जो आपके द्वारा config/webpacker.yml में रखे गए डेटा को रखता है। फ़ाइल। यह प्रवेश बिंदु निर्देशिका के अंदर एक application.js फ़ाइल की तलाश करता है, जो हमारे मामले में app/javascript/packs है। . आप निम्न कोड पर कॉल करके इसे सत्यापित कर सकते हैं:

Webpacker.manifest.config.source_entry_path

जब प्रविष्टियां मिलती हैं, तो वेबपैकर javascript_include_tag . पर कॉल करता है विधि, ActionView . से एक सहायक रेल में डिफ़ॉल्ट रूप से उपलब्ध पुस्तकालय। यह विधि एक या अधिक स्रोतों को स्वीकार करती है और स्क्रिप्ट टैग लौटाती है जिसे आप सीधे अपने विचार पर लागू कर सकते हैं।

विकास सर्वर

Webpacker विकास सर्वर का प्रवेश बिंदु bin . के अंदर रखी गई निष्पादन योग्य फ़ाइल है फ़ोल्डर और नाम webpack-dev-server . सर्वर चलाने की प्रक्रिया में पाँच चरण होते हैं:

• सेटिंग परिवेश - नोड और रेल के लिए पर्यावरण का नाम निर्धारित है। जब पर्यावरण निर्दिष्ट नहीं होता है, तो प्रोग्राम मानता है कि सर्वर को विकास के वातावरण में निष्पादित किया जाएगा।
• कॉन्फ़िगरेशन लोड हो रहा है — फ़ाइल config/webpacker.yml पिछले चरण में सेट किए गए परिवेश के लिए सेटिंग के साथ लोड किया गया है।
• कमांड विकल्प मान्य करना — प्रोग्राम जाँचता है कि क्या हमने सर्वर कमांड के लिए उपयुक्त विकल्प पारित किए हैं। उदाहरण के लिए, यह एक त्रुटि देगा जब --https विकल्प दिया गया है, लेकिन हमने इसे config/webpacker.yml . में निर्दिष्ट नहीं किया है फ़ाइल।
• पोर्ट की उपलब्धता की पुष्टि करना - प्रोग्राम जांचता है कि दिया गया पोर्ट उपयोग के लिए उपलब्ध है या नहीं। यदि कोई अन्य प्रोग्राम पहले से ही इसका उपयोग कर रहा है, तो यह आपको यह बताते हुए एक त्रुटि देगा कि आपको config/webpacker.yml के अंदर वेबपैक सर्वर कॉन्फ़िगरेशन को अपडेट करना है। फ़ाइल।
• वेबपैक सर्व कमांड निष्पादित करना - जब नोड मॉड्यूल निर्देशिका मौजूद होती है, तो प्रोग्राम निर्देशिका के भीतर कमांड निष्पादित करता है, अन्यथा, यह इसे यार्न के साथ निष्पादित करता है। प्रोग्राम कॉन्फ़िगरेशन विकल्प को कमांड में भेजता है जो config/webpack/ के अंदर रखी गई फाइलों में से एक को इंगित करता है निर्देशिका।

सर्वर अब चल रहा है, और यह आपके कोड को तुरंत संकलित करता है, इसलिए आपको परिवर्तनों को देखने और यह जांचने के लिए सर्वर को पुनरारंभ करने की आवश्यकता नहीं है कि वेबपैक नए कोड के साथ बंडल बनाने में सक्षम था या नहीं।

विकास सर्वर का कोड काफी सरल है। यह कॉन्फ़िगरेशन फ़ाइल से केवल YAML प्रारूप में कॉन्फ़िगरेशन लोड करता है और जावास्क्रिप्ट प्रारूप में उचित कॉन्फ़िगरेशन को सीधे webpack serve पर भेजता है आज्ञा। आप इसे हाथ से भी चला सकते हैं, लेकिन आपको बिल्ट-इन कमांड के साथ उचित कमांड तर्कों का ध्यान रखने की आवश्यकता नहीं है।

उत्पादन परिवेश के लिए फ़ाइलें संकलित करना

मान लीजिए कि आप उस एप्लिकेशन को परिनियोजित करना चाहते हैं जो वेबपैकर का उपयोग कर रहा है। उस स्थिति में, आप बस assets:precompile . का आह्वान कर सकते हैं वेबपैकर के रूप में कार्य स्वचालित रूप से कार्य को जोड़ देता है webpacker:compile इसके लिए।

webpacker:compile कैसे करता है? हुड के तहत कार्य कार्य? आइए इसमें खुदाई करें और देखें। यह निम्नलिखित कार्य करता है:

• यह मुख्य कॉल को दो ब्लॉकों में लपेटता है और सुनिश्चित करता है कि NODE पर्यावरण सेट है और वेबपैकर लॉग मानक आउट के लिए आउटपुट हैं।
• यह वेबपैक को कॉल करता है और फिर यह निर्धारित करने के लिए अपने लॉग को पार्स करता है कि कार्रवाई सफल रही या नहीं।

अब आप public/packs/js . पर जा सकते हैं संकलित फ़ाइलों को देखने के लिए निर्देशिका। उन्हें सर्वर पर तैनात किया जाना चाहिए।

सारांश

हमने अभी सीखा है कि वेबपैकर कैसे काम करता है। आप इसे वेबपैक लाइब्रेरी और एक रेल एप्लिकेशन के बीच एक सेतु के रूप में मान सकते हैं जो आपको रूबी के साथ वेबपैक को कॉन्फ़िगर करने और अपने एप्लिकेशन के अंदर आसानी से जावास्क्रिप्ट कोड का उपयोग करने की अनुमति देता है।

पूरे लेख को संक्षेप में प्रस्तुत करने के लिए, आइए वेबपैकर के मुख्य तत्वों को फिर से याद करें:

• कॉन्फ़िगरेशन — इसे config/webpacker.yml . के अंदर रखा गया है फ़ाइल और आपको वेबपैकर को उस निर्देशिका की ओर इंगित करने की अनुमति देता है जहां आप अपनी जावास्क्रिप्ट फ़ाइलें और पैक रखते हैं
• पैक - यह एक एकल प्रवेश बिंदु है जहां से वेबपैकर संकलन शुरू करता है। उस फ़ाइल में आयात और आरंभ की गई प्रत्येक लाइब्रेरी स्वचालित रूप से संकलित हो जाएगी।
• डेवलपमेंट सर्वर — एक साधारण स्क्रिप्ट जो आपको तुरंत फाइलों को संकलित करने की अनुमति देती है, इसलिए हर बार जब आप जावास्क्रिप्ट फाइलों को संशोधित करते हैं तो आपको सर्वर को पुनरारंभ करने की आवश्यकता नहीं होती है
• संकलन कार्य - एक साधारण रेक कार्य जो वेबपैक को आमंत्रित करता है और सार्वजनिक निर्देशिका के तहत फाइलों को संकलित करता है ताकि आप उन्हें उत्पादन सर्वर पर तैनात कर सकें और उन्हें अंतिम उपयोगकर्ताओं के लिए उपलब्ध करा सकें
• सहायक देखें - सहायक जो आपको संकलित फ़ाइलों को विचारों के अंदर शामिल करने की अनुमति देता है

अधिक अनुभव के बिना कई डेवलपर्स के लिए, Wepacker थोड़ा जादुई लगता है, लेकिन वास्तव में, यह एक साधारण पुस्तकालय है जो हमें रूबी तरीके से Webpack का उपयोग करने में मदद करता है।

पी.एस. यदि आप रूबी मैजिक की पोस्ट प्रेस से छूटते ही पढ़ना चाहते हैं, तो हमारे रूबी मैजिक न्यूजलेटर की सदस्यता लें और एक भी पोस्ट मिस न करें!