इंटरनेट युग की शुरुआत में, वेबसाइटें बहुत सरल थीं और ज्यादा इंटरैक्टिव नहीं थीं। प्रौद्योगिकी, उपकरणों, और प्रोग्रामिंग भाषाओं की उन्नति के साथ, वे अधिक जटिल हो गईं और कई फाइलों से बनीं, जिनमें छवियों और CSS स्टाइलशीट जैसी संपत्तियां शामिल थीं।
आपकी वेबसाइट जितनी अधिक इंटरैक्टिव होगी, उतना अधिक JavaScript कोड आपको उपयोग करना होगा। ऐसे कोड का उपयोग करने के लिए, आपको स्क्रिप्ट टैग का उपयोग करके सभी HTML कोड फ़ाइलों को शामिल करना होगा। ऐसा दृष्टिकोण त्रुटि-प्रवण है क्योंकि आपको हर एक फ़ाइल को शामिल करना याद रखना होगा और सही क्रम बनाए रखना होगा, अन्यथा, आपका कोड काम नहीं कर सकता। Webpack टूल के साथ, ये समस्याएं दूर हो जाती हैं। Webpacker Webpack और एक Rails एप्लिकेशन के बीच एक पुल है।
यह लेख Webpacker में गहराई से गोता लगाता है और एक विस्तृत व्याख्या प्रदान करता है जो आपको यह समझने में सक्षम करेगा कि यह टूल हुड के नीचे कैसे काम करता है। सामग्री को यथासंभव मूल्यवान बनाने के लिए, मैंने इसे निम्नलिखित खंडों में विभाजित करने का निर्णय लिया:
- उच्च-स्तरीय अवलोकन — गहरा गोता लगाने से पहले, मैं Webpack और Webpacker दोनों का उच्च-स्तरीय अवलोकन समझाऊंगा। आप इसे अधिक उन्नत विषयों की तैयारी के रूप में मान सकते हैं।
- संरचना व्याख्या — चूंकि हम कई फ़ाइलों का पता लगाएंगे, यह जानना अच्छा है कि विशेष संरचना का उपयोग क्यों किया गया था और यह सामान्य उद्देश्य का कैसे जवाब देती है।
- शरीर रचना व्याख्या — यह भाग Webpack सेटअप की सबसे महत्वपूर्ण फ़ाइलों की जांच को कवर करता है। यह जानना कि वे कैसे काम करते हैं, प्रभावी और परेशानी मुक्त विकास प्रक्रिया के लिए आवश्यक है।
- पर्यावरण विशिष्ट सेटअप — अंतिम भाग बताता है कि Webpacker विकास और उत्पादन वातावरण में कैसे काम करता है।
इस लेख को पढ़ने के बाद, आप जानेंगे कि Webpack और Webpacker क्या हैं और हमें अपने Rails एप्लिकेशन में उनकी आवश्यकता क्यों है। Webpacker के आंतरिक भाग में गहरा गोता आपको यह समझने में मदद करेगा कि टूल Webpack से कैसे जुड़ता है और यह Rails एप्लिकेशन के साथ कैसे संचार करता है।
गोता लगाने से पहले
गहरे पानी में जाने से पहले, हमें पहले तैयारी करने की आवश्यकता है। उच्च-स्तरीय अवलोकन किसी भी तकनीक के साथ काम करना शुरू करने का एक शानदार तरीका है क्योंकि यह हमें दिए गए टूल के उद्देश्य और उन समस्याओं को समझने में मदद करता है जिन्हें यह हल करता है बिना इसके आंतरिक भाग में गहराई से जाए।
Webpack
मैंने पहले ही उल्लेख किया है कि Webpack हमारे JavaScript फ़ाइल कोड को व्यवस्थित करने में मदद करता है ताकि त्रुटियों से बचा जा सके और वेबसाइट के प्रदर्शन में सुधार किया जा सके। यह कोड को बंडल में व्यवस्थित करता है।
एक बंडल एक फ़ाइल है जहां कई मॉड्यूल बुद्धिमानी से रखे जाते हैं, पहले बनाए गए निर्भरता ग्राफ का सम्मान करते हुए। इस प्रक्रिया के लिए धन्यवाद, हम सुनिश्चित हो सकते हैं कि हमारा कोड अपेक्षा के अनुरूप काम करेगा और इससे पहले कि हम किसी दिए गए लाइब्रेरी के कोड को लागू करें, यह लोड हो चुका होगा।
Webpack केवल डिफ़ॉल्ट रूप से Rails के नवीनतम संस्करण में उपयोग किया जाने वाला टूल नहीं है। जब प्रोजेक्ट उत्पन्न होता है, तो Babel और PostCSS के लिए कॉन्फ़िगरेशन फ़ाइलें भी बनाई जाती हैं। PostCSS JavaScript के साथ CSS को बदलने के लिए एक टूल है, और Babel एक JavaScript कंपाइलर है जो हमें ब्राउज़र समर्थन की चिंता किए बिना आधुनिक JavaScript लिखने में सक्षम बनाता है।
Webpacker
Webpacker एक टूल है जो Webpack को Rails एप्लिकेशन के साथ एकीकृत करता है। यह JavaScript-जैसे एप्लिकेशन को कॉन्फ़िगर और विकसित करना आसान बनाता है और उन्हें उत्पादन वातावरण के लिए अनुकूलित करता है।
स्रोत कोड एक जेम के रूप में उपलब्ध है, और लाइब्रेरी एक विकास सर्वर के साथ आती है जो ऐप के विकास को बहुत तेज़ बनाता है क्योंकि आपको JavaScript फ़ाइलों में पेश किए गए परिवर्तनों को देखने के लिए सर्वर को रोकना और शुरू नहीं करना पड़ता।
गहरा विसर्जन
अब जब आप जानते हैं कि Webpack क्यों बनाया गया था और Webpacker Rails एप्लिकेशन में क्या भूमिका निभाता है, तो हम Webpacker के आंतरिक भाग पर ध्यान केंद्रित कर सकते हैं ताकि यह देख सकें कि यह फ़ाइलों को कैसे व्यवस्थित करता है, विकास प्रक्रिया को तेज करता है, और उत्पादन वातावरण के लिए फ़ाइलों को अनुकूलित करता है।
Webpacker Rails के नवीनतम संस्करण में आउट-ऑफ-द-बॉक्स उपलब्ध है। नया प्रोजेक्ट बनाने से पहले, सुनिश्चित करें कि Node संस्करण 10.17.0 से अधिक या बराबर है क्योंकि webpacker:install कमांड rails new कमांड के साथ स्वचालित रूप से लागू होगी।
Webpacker फ़ाइल संरचना
इंस्टॉल कमांड निष्पादित होने के बाद, निम्नलिखित फ़ाइलें बनाई जाती हैं:
config/webpacker.yml— मुख्य कॉन्फ़िगरेशन फ़ाइल जिसमें डिफ़ॉल्ट कॉन्फ़िगरेशन और विशिष्ट वातावरण के लिए कॉन्फ़िगरेशन होते हैंconfig/webpacker/— वह डायरेक्टरी जहां विशेष वातावरण के लिए JavaScript कॉन्फ़िगरेशन फ़ाइलें बनाई जाती हैंbin/webpack— एक निष्पादन योग्य फ़ाइल जो बंडल बनाने के लिए webpack को लागू करती हैbin/webpack-dev-server— एक निष्पादन योग्य फ़ाइल जो विकास सर्वर शुरू करती है, जो हर बार JavaScript फ़ाइलों में परिवर्तन करने पर webpack को रीलोड करती है जो बंडल में शामिल हैं
कॉन्फ़िगरेशन फ़ाइल की शारीरिक रचना
Webpacker के लिए मुख्य कॉन्फ़िगरेशन फ़ाइल config डायरेक्टरी के अंतर्गत स्थित है, और इसका नाम webpacker.yml है। Webpacker के विपरीत, Webpack के लिए कॉन्फ़िगरेशन प्रत्येक वातावरण के लिए config/webpack डायरेक्टरी के अंतर्गत अलग से संग्रहीत किया जाता है।
Webpacker
डिफ़ॉल्ट रूप से, कॉन्फ़िगरेशन फ़ाइल में कई प्रविष्टियां होती हैं — डिफ़ॉल्ट वाले, और प्रत्येक वातावरण के लिए अनुभाग जहां आप विशिष्ट सेटिंग्स को ओवरराइट कर सकते हैं। आइए सबसे महत्वपूर्ण सेटिंग्स पर एक नज़र डालें:
source_path— आपके एप्लिकेशन में javascript फ़ाइलों का प्राथमिक स्रोत। यह डिफ़ॉल्ट रूप सेapp/javascriptपर सेट है, और आमतौर पर इस मान को बदलने की कोई आवश्यकता नहीं है।source_entry_path— source_path के तहत डायरेक्टरी का नाम जहां आप पैक फ़ाइलें रखते हैं, उर्फ प्रवेश बिंदु। डिफ़ॉल्ट रूप से, यह सेटिंग packs डायरेक्टरी पर सेट है।public_root_path— आपके एप्लिकेशन में डायरेक्टरी का पथ जो ब्राउज़र से सुलभ है। एक विशिष्ट Rails एप्लिकेशन में, यह एक public डायरेक्टरी हैpublic_output_path— जब Webpacker आपकी फ़ाइलों को संकलित करता है, तो यह सभी संकलित फ़ाइलों कोpublic_root_pathके तहत इस डायरेक्टरी में रखेगा। डिफ़ॉल्ट रूप से, डायरेक्टरी का नाम packs है, लेकिन आप इसे जो चाहें कह सकते हैं।webpack_compile_output— यदि फ्लैग true पर सेट है, तो फ़ाइलों के संकलित होने पर आउटपुट संदेश प्रदर्शित होते हैं। यह उपयोगी है जब संकलन विफल होता है, क्योंकि आप इसके बारे में जान पाएंगे और कार्रवाई कर सकते हैं।
यह उल्लेखनीय है कि विकास अनुभाग में विकास सर्वर के लिए कॉन्फ़िगरेशन भी होता है जिसका उपयोग विकास वातावरण में सर्वर को पुनः आरंभ किए बिना फ़ाइलों को संकलित करने के लिए किया जाता है।
यदि आप रेल्स कंसोल या कोड स्तर से कॉन्फ़िगरेशन तक पहुंचना चाहते हैं, तो आप Webpacker.manifest.config कॉल कर सकते हैं, जो कॉन्फ़िगरेशन क्लास इंस्टेंस वापस करेगा।
Webpack
प्रत्येक वातावरण की अपनी कॉन्फ़िगरेशन फ़ाइल होती है, लेकिन हर फ़ाइल में, मुख्य वातावरण फ़ाइल आयात की जाती है: config/webpack/environment.js। वातावरण कॉन्फ़िगरेशन फ़ाइल में, कस्टम प्लगइन्स लोड करने के लिए एक जगह होती है जो Webpack के डिफ़ॉल्ट व्यवहार को संशोधित करेंगे। हम अपनी फ़ाइलों को संकलित करने के लिए कस्टम नियम भी जोड़ सकते हैं।
पैक फ़ाइल की शारीरिक रचना
पैक app/javascript/packs डायरेक्टरी के अंतर्गत स्थित हैं। प्रत्येक पैक फ़ाइल को Webpacker द्वारा संकलन प्रक्रिया शुरू होने पर प्रवेश बिंदु के रूप में माना जाता है।
डिफ़ॉल्ट पैक फ़ाइल
जब आप एक नया Rails प्रोजेक्ट उत्पन्न करते हैं, तो 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 कोड डाल सकते हैं और इसे निष्पादित कर सकते हैं, पैक फ़ाइल के अंदर JavaScript कोड रखने की सिफारिश नहीं की जाती है। सबसे अच्छा दृष्टिकोण फ़ाइलों को साफ रखना है और केवल यहां लाइब्रेरी आयात और इनिशियलाइज़ करना है और अन्य तर्क को पैक्स डायरेक्टरी के बाहर रखना है।
एप्लिकेशन में पैक फ़ाइलें शामिल करना
पैक फ़ाइलें स्वचालित रूप से वेबसाइट के स्रोत में शामिल नहीं होती हैं। एसेट पाइपलाइन मामले की तरह, हमें अपने व्यू के अंदर एक विशेष टैग का उपयोग करना होगा:
<%= javascript_packs_with_chunks_tag 'application' %>यह मेथड कैसे काम करता है? हुड के तहत, यह Webpacker कॉन्फ़िगरेशन को कॉल करता है जो आपके द्वारा config/webpacker.yml फ़ाइल में डाले गए डेटा को रखता है। यह प्रवेश बिंदु डायरेक्टरी के अंदर एक application.js फ़ाइल की तलाश करता है, जो हमारे मामले में app/javascript/packs है। आप निम्न कोड को कॉल करके इसे सत्यापित कर सकते हैं:
Webpacker.manifest.config.source_entry_pathजब प्रविष्टियां मिल जाती हैं, तो Webpacker javascript_include_tag मेथड को कॉल करता है, जो ActionView लाइब्रेरी से एक हेल्पर है जो डिफ़ॉल्ट रूप से Rails में उपलब्ध है। मेथड एक या अधिक स्रोत स्वीकार करता है और स्क्रिप्ट टैग लौटाता है जिसे आप सीधे अपने व्यू पर लागू कर सकते हैं।
विकास सर्वर
Webpacker विकास सर्वर का प्रवेश बिंदु bin फ़ोल्डर के अंदर रखी निष्पादन योग्य फ़ाइल है और इसका नाम webpack-dev-server है। सर्वर चलाने की प्रक्रिया में पांच चरण होते हैं:
- वातावरण सेट करना — Node और Rails के लिए वातावरण नाम सेट किया जाता है। जब वातावरण निर्दिष्ट नहीं होता है, तो प्रोग्राम मानता है कि सर्वर को विकास वातावरण में निष्पादित किया जाएगा।
- कॉन्फ़िगरेशन लोड करना —
config/webpacker.ymlफ़ाइल को पिछले चरण में सेट किए गए वातावरण के लिए सेटिंग्स के साथ लोड किया जाता है। - कमांड विकल्प मान्य करना — प्रोग्राम जांचता है कि क्या हमने सर्वर कमांड के लिए उपयुक्त विकल्प पास किए हैं। उदाहरण के लिए, यह त्रुटि फेंकेगा जब
--httpsविकल्प दिया जाता है, लेकिन हमने इसेconfig/webpacker.ymlफ़ाइल में निर्दिष्ट नहीं किया। - पोर्ट की उपलब्धता सत्यापित करना — प्रोग्राम जांचता है कि दिया गया पोर्ट उपयोग के लिए उपलब्ध है या नहीं। यदि कोई अन्य प्रोग्राम पहले से ही इसका उपयोग कर रहा है, तो यह त्रुटि फेंक देगा जिससे आपको पता चलेगा कि आपको
config/webpacker.ymlफ़ाइल के अंदर webpack सर्वर कॉन्फ़िगरेशन को अपडेट करना होगा। - webpack serve कमांड निष्पादित करना — जब नोड मॉड्यूल डायरेक्टरी मौजूद होती है, तो प्रोग्राम डायरेक्टरी के भीतर कमांड निष्पादित करता है, अन्यथा, यह yarn के साथ निष्पादित करता है। प्रोग्राम कॉन्फ़िगरेशन विकल्प को कमांड में पास करता है जो
config/webpack/डायरेक्टरी के अंदर रखी फ़ाइलों में से एक को इंगित करता है।
सर्वर अब चल रहा है, और यह आपके कोड को ऑन-द-फ्लाई संकलित करता है, इसलिए आपको परिवर्तनों को देखने और जांचने के लिए सर्वर को पुनः आरंभ करने की आवश्यकता नहीं है कि क्या webpack नए कोड के साथ बंडल बनाने में सक्षम था।
विकास सर्वर का कोड काफी सरल है। यह केवल YAML प्रारूप में कॉन्फ़िगरेशन फ़ाइल से कॉन्फ़िगरेशन लोड करता है और उचित कॉन्फ़िगरेशन को JavaScript प्रारूप में सीधे webpack serve कमांड में पास करता है। आप इसे हाथ से भी चला सकते हैं, लेकिन आपको बिल्ट-इन कमांड के साथ उचित कमांड आर्गुमेंट का ख्याल नहीं रखना पड़ता।
उत्पादन वातावरण के लिए फ़ाइलें संकलित करना
मान लीजिए आप webpacker का उपयोग करने वाले एप्लिकेशन को तैनात करना चाहते हैं। उस स्थिति में, आप बस assets:precompile कार्य को लागू कर सकते हैं क्योंकि Webpacker स्वचालित रूप से कार्य webpacker:compile को इससे जोड़ देता है।
webpacker:compile कार्य हुड के तहत कैसे काम करता है? आइए इसमें गोता लगाएं और देखें। यह निम्नलिखित चीजें करता है:
- यह मुख्य कॉल को दो ब्लॉकों में लपेटता है यह सुनिश्चित करते हुए कि
NODEवातावरण सेट है और Webpacker लॉग मानक आउटपुट पर आउटपुट होते हैं। - यह Webpack को कॉल करता है और फिर यह निर्धारित करने के लिए इसके लॉग को पार्स करता है कि कार्रवाई सफल रही या नहीं।
अब आप संकलित फ़ाइलों को देखने के लिए public/packs/js डायरेक्टरी पर जा सकते हैं। उन्हें सर्वर पर तैनात किया जाना चाहिए।
सारांश
हमने अभी सीखा कि Webpacker हुड के तहत कैसे काम करता है। आप इसे Webpack लाइब्रेरी और एक Rails एप्लिकेशन के बीच एक पुल के रूप में मान सकते हैं जो आपको Webpack को Ruby के साथ कॉन्फ़िगर करने और अपने एप्लिकेशन के अंदर javascript कोड का आसानी से उपयोग करने की अनुमति देता है।
पूरे लेख को सारांशित करने के लिए, आइए Webpacker के मुख्य तत्वों को फिर से याद करें:
- कॉन्फ़िगरेशन — यह
config/webpacker.ymlफ़ाइल के अंदर रखा गया है और आपको उस डायरेक्टरी को इंगित करने की अनुमति देता है जहां आप अपनी javascript फ़ाइलें और पैक रखते हैं - पैक — यह एकल प्रवेश बिंदु है जिससे Webpacker संकलन शुरू करता है। उस फ़ाइल में आयात और इनिशियलाइज़ की गई प्रत्येक लाइब्रेरी स्वचालित रूप से संकलित हो जाएगी।
- विकास सर्वर — एक सरल स्क्रिप्ट जो आपको फ़ाइलों को ऑन-द-फ्लाई संकलित करने की अनुमति देती है, इसलिए आपको हर बार JavaScript फ़ाइलों को संशोधित करने पर सर्वर को पुनः आरंभ नहीं करना पड़ता
- संकलन कार्य — एक सरल rake कार्य जो Webpack को लागू करता है और फ़ाइलों को public डायरेक्टरी के तहत संकलित करता है ताकि आप उन्हें उत्पादन सर्वर पर तैनात कर सकें और उन्हें अंतिम उपयोगकर्ताओं के लिए उपलब्ध करा सकें
- व्यू हेल्पर — हेल्पर जो आपको संकलित फ़ाइलों को व्यू के अंदर शामिल करने की अनुमति देता है
बहुत अधिक अनुभव के बिना कई डेवलपर्स के लिए, Webpacker थोड़ा जादुई लगता है, लेकिन वास्तव में, यह एक सरल लाइब्रेरी है जो हमें Webpack को Ruby तरीके से उपयोग करने में मदद करती है।
P.S. यदि आप Ruby Magic पोस्ट को प्रेस से निकलते ही पढ़ना चाहते हैं, तो हमारे Ruby Magic न्यूज़लेटर की सदस्यता लें और कभी भी एक भी पोस्ट मिस न करें!
