वेबपैक के लिए एक परिचय: यह क्या है और इसका उपयोग कैसे करना है

परिचय

ठीक है, इसलिए मैं मानता हूं कि आपने वेबपैक के बारे में सुना है - इसलिए आप यहां हैं, ठीक है? असली सवाल यह है कि आप इसके बारे में क्या जानते हैं? आप इसके बारे में कुछ बातें जान सकते हैं, जैसे यह कैसे काम करता है, या आपके पास कोई सुराग नहीं हो सकता है। किसी भी तरह से, मैं आपको आश्वस्त कर सकता हूं कि इस लेख को पढ़ने के बाद, आप पूरी वेबपैक स्थिति के साथ पर्याप्त सहज महसूस करेंगे।

आखिरकार - आवश्यकता आविष्कार की जननी है ...

वेबपैक मौजूद क्यों है, यह कहने का एक सही तरीका उपरोक्त उद्धरण है। लेकिन इसे बेहतर तरीके से समझने के लिए हमें वापस जाने की ज़रूरत है, जब जावास्क्रिप्ट कोई नई सेक्सी चीज़ नहीं थी, उन पुराने समय के युगों में जब एक वेबसाइट अच्छे पुराने .html, CSS और शायद एक या एक का एक छोटा बंडल था। कुछ मामलों में कुछ जावास्क्रिप्ट फाइलें। लेकिन बहुत जल्द यह सब बदलने वाला था।

क्या समस्या थी?

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

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

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

इन मुद्दों का जवाब देने के लिए, वेबपैक बनाया गया था। वेबपैक एक स्थिर मॉड्यूल बंडल है।

तो वेबपैक का जवाब कैसे था?

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

इस लेख के अगले भाग में मैं आपको वेबपैक के स्टेप बाई स्टेप सेटअप के माध्यम से ले जाऊंगा। इसके अंत तक, मुझे आशा है कि आप वेबपैक की मूल बातें समझ लेंगे। तो चलो यह रोलिंग मिल ...

हम क्या बना रहे हैं?

आपने शायद ReactJS के बारे में सुना होगा। यदि आप reactJS जानते हैं, तो आप संभवतः जानते हैं कि create-react-app क्या है। आप में से जिन लोगों को इस बात का कोई अंदाजा नहीं है कि उन दोनों चीजों में से क्या हैं, ReactJS एक यूआई लाइब्रेरी है जो इंटेलिजेंट कॉम्प्लेक्स यूआई बनाने में बहुत मददगार है, और एक बूलेटप्लेट देव सेटअप को बूट करने या सेट करने के लिए एक CLI टूल है। प्रतिक्रिया आवेदन करने के लिए।

आज हम एक सरल रिएक्ट एप्लिकेशन बना रहे हैं लेकिन बिना क्रिएट-रिएक्शन ऐप सीएलआई का उपयोग किए। मुझे उम्मीद है कि यह आपको काफी मजेदार लगेगा। :)

स्थापना चरण

एनपीएम इंट

यह सही है, लगभग सभी अच्छी चीजें कैसे शुरू होती हैं: सादे पुराने npm init। मैं वीएस कोड का उपयोग कर रहा हूं, लेकिन किसी भी कोड संपादक का उपयोग करने के लिए स्वतंत्र महसूस करें जो आप शुरू करना चाहते हैं।

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

$ एनपीएम init

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

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

$ npm मैं प्रतिक्रिया-डोम - save प्रतिक्रिया करता हूं

अगला हमें वेबपैक जोड़ने की आवश्यकता है, इसलिए हम अपने ऐप को एक साथ बंडल कर सकते हैं। न केवल बंडल, बल्कि हमें गर्म पुनः लोड करने की भी आवश्यकता होगी जो वेबपैक देव सर्वर का उपयोग करना संभव है।

$ npm i webpack webpack-dev-server webpack-cli --save - dev

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

$ npm i babel-core babel-loader @ babel / preset-react @ babel / preset-env html-webpack-plugin --save-dev

वैसे मैं क्या कह सकता हूं, कि मैं वादा करता हूं कि इंस्टॉल की अधिकतम संख्या थी। बाबेल के मामले में, हमने पहले मुख्य बबेल लाइब्रेरी को लोड किया है, फिर लोडर, और अंत में 2 प्लगइन्स या प्रीसेट को विशेष रूप से रिएक्ट और सभी नए ES2015 और ES6 के बाद के कोड के साथ काम करने के लिए।

चलिए, कुछ कोड जोड़ते हैं और वेबपैक कॉन्फ़िगरेशन शुरू करते हैं।

यह है कि पैकेज.जॉन फ़ाइल को अब तक के सभी इंस्टॉलेशन के बाद देखना चाहिए। जब आप इस लेख का अनुसरण कर रहे हैं तो आपके पास एक भिन्न संस्करण संख्या हो सकती है।

कोड

हमारे एप्लिकेशन संरचना की जड़ में एक webpack.config.js फ़ाइल जोड़कर शुरू करते हैं। अपनी webpack.config फ़ाइल में निम्न कोड जोड़ें।

const path = आवश्यकता ('path');
const HtmlWebpackPlugin = आवश्यकता ('html-webpack-plugin');
मॉड्यूल। निर्यात = {
  // यह संपत्ति परिभाषित करती है जहां आवेदन शुरू होता है
  प्रवेश: './ src / index.js',
  // यह संपत्ति फ़ाइल पथ और फ़ाइल नाम को परिभाषित करती है जिसका उपयोग बंडल फ़ाइल को तैनात करने के लिए किया जाएगा
  उत्पादन: {
    पथ: path.join (__ dirname, '/ dist'),
    फ़ाइल नाम: 'bundle.js'
  },
  // सेटअप लोडर
  मॉड्यूल: {
    नियम: [
      {
        परीक्षण: / END.js$/,
        बाहर करें: / node_modules /,
        उपयोग: {
          लोडर: 'बेबल-लोडर'
        }
      }
    ]
  },
// सेटअप प्लगइन बंडल जेएस फ़ाइलों की सेवा के लिए एक HTML फ़ाइल का उपयोग करने के लिए
 प्लगइन्स: [
    नई HtmlWebpackPlugin ({
      साँचा: './src/index.html'
    })
  ]
}

ठीक है, तो ऊपर की पंक्तियों को समझें।

पहले हम फ़ाइल स्थान तक पहुँचने और फ़ाइल स्थान में परिवर्तन करने के लिए डिफ़ॉल्ट पथ मॉड्यूल की आवश्यकता से शुरू करते हैं।

आगे हमें HTML फ़ाइल बनाने के लिए HTMLWebpackPlugin की आवश्यकता है जो बंडल किए गए JavaScript फ़ाइल / फ़ाइलों की सेवा के लिए उपयोग की जाने वाली HTML फ़ाइल उत्पन्न करती है। लिंक पर क्लिक करके HTMLWebpackPlugin के बारे में और पढ़ें।

फिर हमारे पास उनमें कुछ संपत्तियों के साथ Export.module ऑब्जेक्ट है। पहला एक प्रवेश संपत्ति है, जिसका उपयोग यह निर्दिष्ट करने के लिए किया जाता है कि आंतरिक निर्भरता ग्राफ बनाने के लिए कौन सी फाइल वेबपैक के साथ शुरू होनी चाहिए।

मॉड्यूल। निर्यात = {
  प्रवेश: './ src / index.js'
}

आगे आउटपुट प्रॉपर्टी है जो निर्दिष्ट करती है कि बंडल फाइल कहां जेनरेट होनी चाहिए और बंडल फाइल का नाम क्या होगा। यह output.path और output.filename गुणों द्वारा किया जाता है।

मॉड्यूल। निर्यात = {
// यह संपत्ति फ़ाइल पथ और फ़ाइल नाम को परिभाषित करती है जिसका उपयोग बंडल फ़ाइल को तैनात करने के लिए किया जाएगा
  उत्पादन: {
    पथ: path.join (__ dirname, '/ dist'),
    फ़ाइल नाम: 'bundle.js'
  },
}

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

मॉड्यूल। निर्यात = {
// सेटअप लोडर
  मॉड्यूल: {
    नियम: [
      {
        परीक्षण: / END.js$/,
        बाहर करें: / node_modules /,
        उपयोग: {
          लोडर: 'बेबल-लोडर'
        }
      }
    ]
  }
}

जानकारी को प्रत्येक मॉड्यूल संपत्ति के लिए एक ऑब्जेक्ट में निर्दिष्ट किया जाना चाहिए, जिसमें आगे नियमों की एक सरणी है। हर मामले के लिए एक वस्तु होगी। मैंने अपने नोड_मॉडल फ़ोल्डर में सब कुछ बाहर करने के लिए भी निर्दिष्ट किया है।

इसके बाद प्लगइन संपत्ति है। इसका उपयोग वेबपैक की क्षमताओं को बढ़ाने के लिए किया जाता है। मॉड्यूल एक्सपोर्ट ऑब्जेक्ट के अंदर प्लगइन ऐरे में किसी प्लगइन का उपयोग करने से पहले हमें उसी की आवश्यकता होती है।

मॉड्यूल। निर्यात = {
// सेटअप प्लगइन बंडल जेएस फ़ाइलों की सेवा के लिए एक HTML फ़ाइल का उपयोग करने के लिए
 प्लगइन्स: [
    नई HtmlWebpackPlugin ({
      साँचा: './src/index.html'
    })
  ]
}

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

आखिरी चीज जो हमें करने की ज़रूरत है वह है कि हम स्थापित किए गए बैबेल प्रीसेट का उपयोग करने के लिए एक .babelrc फ़ाइल बनाएं और हमारे कोड में ES6 कक्षाओं और आयात विवरणों का ध्यान रखें। कोड की निम्न पंक्तियों को .babelrc फ़ाइल में जोड़ें।

{
  "प्रीसेट": ["env", "रिएक्ट"]
}

और ठीक उसी तरह, अब बेबल उन प्रीसेट का उपयोग करने में सक्षम होगा। ठीक है कि सेटअप के लिए पर्याप्त है - यह कैसे काम करता है यह देखने के लिए कुछ रिएक्ट कोड जोड़ें।

प्रतिक्रिया कोड

चूँकि आवेदन के लिए प्रारंभिक बिंदु src फ़ोल्डर में index.js फ़ाइल है, तो चलिए उसी के साथ शुरू करते हैं। हम इस मामले में हमारे उपयोग के लिए ReactD और ReactDOM दोनों की आवश्यकता से शुरू करेंगे। नीचे दिए गए कोड को अपनी index.js फ़ाइल में जोड़ें।

'प्रतिक्रिया' से आयात प्रतिक्रिया;
'रिएक्ट-डोम' से ReactDOM आयात करें;
से आयात ऐप './Compords/App';
ReactDOM.render (, document.getElementById ('ऐप'));

इसलिए हम बस अपने कंपोनेंट फोल्डर से एक और फाइल आयात करते हैं, जिसे आप बनाएंगे, और App.js. नामक फोल्डर में दूसरी फाइल ऐड करेंगे। तो आइए देखें कि App.js फ़ाइल के अंदर क्या है:

आयात प्रतिक्रिया, 'घटक' 'प्रतिक्रिया' से
क्लास ऐप का विस्तार
  प्रस्तुत करना() {
    वापसी (
      
        

वेबपैक + रिएक्ट सेटअप            )   } }

निर्यात डिफ़ॉल्ट ऐप;

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

हम पैकेज.जॉन फ़ाइल में स्क्रिप्ट मान जोड़कर ऐसा कर सकते हैं। अपने पैकेज की स्क्रिप्ट ऑब्जेक्ट में परीक्षण संपत्ति निकालें। फ़ाइल को खोलें और इन दो लिपियों को जोड़ें:

"स्टार्ट": "वेबपैक-डेव-सर्वर - एमोड डेवलपमेंट --open --hot",
"बिल्ड": "वेबपैक - प्रोडक्शन प्रोडक्शन"

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

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

निष्कर्ष

यह वेबपैक और बेबेल का केवल एक छोटा अनुप्रयोग या उपयोग मामला है, लेकिन अनुप्रयोग असीम हैं। मुझे आशा है कि आप वेबपैक और बेबेल के साथ और अधिक विकल्प और काम करने के तरीकों का पता लगाने के लिए पर्याप्त उत्साहित हैं। अधिक जानने के लिए और गहराई से पढ़ने के लिए कृपया उनकी आधिकारिक वेबसाइट देखें।

मैंने इसमें सभी कोड के साथ एक Github रेपो बनाया है, इसलिए कृपया इसे किसी भी प्रश्न का संदर्भ दें।

वेबपैक के बारे में मेरे दो सेंट? ठीक है, कई बार आप सोच सकते हैं कि यह एक उपकरण से ज्यादा कुछ नहीं है, और आपको एक उपकरण के लिए बहुत अधिक परेशान क्यों होना चाहिए? लेकिन मुझे विश्वास है जब मैं यह कहता हूं: वेबपैक के आसपास अपना रास्ता सीखने के दौरान प्रारंभिक संघर्ष आपको बहुत अधिक संख्या में बचाएगा, अन्यथा आप वेबपैक के बिना विकासशील निवेश करेंगे।

अभी के लिए यह सब, बहुत जल्द एक और दिलचस्प लेख के साथ वापस आने की उम्मीद है। मुझे आशा है कि आपको यह पढ़ने में मज़ा आया होगा!

यदि आप उपरोक्त वर्णित चरणों / प्रक्रियाओं में से किसी का भी पालन करते समय किसी भी कठिनाई या मुद्दों का सामना करते हैं, तो कृपया टिप्पणी में संपर्क करने और टिप्पणियों को छोड़ने के लिए स्वतंत्र महसूस करें।

लिंक्डइन: https://www.linkedin.com/in/ashish-nandan-singh-490987130/

ट्विटर: https://twitter.com/ashishnandansin