पार्सल मेरा पसंदीदा प्रोजेक्ट बिल्डर है

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



कई बंडल हैं। उदाहरण के लिए - Browserify और webpack । हालांकि ये प्रोजेक्ट बिल्डर्स महान उपकरण हैं, मैंने व्यक्तिगत रूप से उन्हें स्थापित करना मुश्किल पाया। सेटअप कहाँ से शुरू करें? यह प्रश्न विशेष रूप से शुरुआती लोगों के लिए प्रासंगिक है, जो "कॉन्फ़िगरेशन फ़ाइल" जैसी चीज़ से थोड़ा डर सकते हैं।

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

पार्सल की विशेषताएं

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

यही कारण है कि पार्सल का उपयोग मुझे एक तख्तापलट लगता है। उदाहरण के लिए, यदि कोई डेवलपर SCSS या LESS का उपयोग करके अपनी परियोजना को स्टाइल करने की योजना बना रहा है, तो वह अनावश्यक आंदोलनों के बिना, बस उपयुक्त कोड लिख सकता है। नवीनतम जावास्क्रिप्ट सुविधाओं का उपयोग करना चाहते हैं? यदि हां, तो आप बिना कुछ सोचे समझे इन सुविधाओं का उपयोग करके कोड लिख सकते हैं। विकास के लिए सर्वर चाहिए? जो पार्सल का उपयोग करता है, उसके पास ऐसा सर्वर होता है। वास्तव में, यहां हमने केवल पार्सल की विशाल क्षमताओं के हिमखंड की नोक को छुआ है।

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

पार्सल के उपयोग का दायरा

पार्सल, किसी भी अन्य उपकरण की तरह, कुछ सार्वभौमिक उपकरण नहीं है, जो हमेशा और हर जगह समान रूप से लागू होता है। लेकिन ऐसी परिस्थितियां हैं जिनमें पार्सल विशेष रूप से सफल है।

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

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

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

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

पार्सल का उपयोग करके एक सरल वेबसाइट बनाना

चलो एक पार्सल परीक्षण ड्राइव की व्यवस्था करते हैं। यह हमें यह देखने की अनुमति देगा कि इस बंडल के साथ कुछ बनाना अपेक्षाकृत सरल है। यहां वह पृष्ठ है जिस पर हम काम करेंगे।


पायलट प्रोजेक्ट पेज

हम एक सरल साइट बनाने जा रहे हैं जो Sass और थोड़ी सी जावास्क्रिप्ट का उपयोग करेगी। हम सप्ताह के वर्तमान दिन और साइट के पृष्ठ पर अनप्लैश स्रोत से डाउनलोड की गई एक यादृच्छिक छवि के बारे में जानकारी प्रदर्शित करेंगे।

Project परियोजना की मूल संरचना

परियोजना, जिसे पार्सल का उपयोग करने की योजना है, को फ़ाइलों और फ़ोल्डरों की एक विशेष संरचना की आवश्यकता नहीं है। इसमें एक निश्चित ढांचे का उपयोग नहीं करना पड़ता है। परियोजना की मूल संरचना में तीन फाइलें शामिल होंगी, जिनके नाम स्वयं बोलते हैं। ये index.html , style.scss और index.js । आप जैसा चाहें वैसा बना सकते हैं। उदाहरण के लिए, कमांड लाइन का उपयोग करना:

 mkdir simple-site cd simple-site touch index.html && touch style.scss && touch index.js 

index.html फ़ाइल पर एक छोटा सा टेम्पलेट कोड और मार्कअप जोड़ें, जिस पर परियोजना की कार्यक्षमता आधारित होगी:

 <!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">  <link rel="stylesheet" href="style.scss">  <title>Parcel Tutorial</title> </head> <body>  <div class="container">    <h1>Today is:</h1>    <span class="today"></span>    <h2><font color="#3AC1EF">and the image of the day:</font></h2>    <img align="center" src="https://source.unsplash.com/random/600x400" alt="unsplash random image"> </div> <script src="index.js"></script> </body> </html> 

आपने देखा होगा कि यहाँ मैं Google फॉन्ट से वेब फॉन्ट ( Lato ) डाउनलोड करता हूँ। डाउनलोड करने योग्य फोंट का उपयोग करना स्वैच्छिक है। यहां यह सीएसएस और जावास्क्रिप्ट फ़ाइलों को जोड़ने पर ध्यान देने योग्य है, और दस्तावेज़ निकाय के HTML कोड के लिए, जो सप्ताह के दिन के बारे में जानकारी के उत्पादन के लिए एक जगह प्रदान करता है, और Unsplash से एक यादृच्छिक छवि को आउटपुट करने के लिए एक जगह है। दरअसल, इस परियोजना पर काम के बुनियादी ढांचे पर काम पूरा हो गया है।

▍ काम करने के लिए पार्सल की त्वरित तैयारी का अनुभव

अब, स्टाइल और स्क्रिप्टिंग पर जाने से पहले, आइए पार्सल का उपयोग करके अपनी परियोजना को चलाने का प्रयास करें। पार्सल स्थापित करने के बारे में कुछ भी असामान्य नहीं है:

 npm install -g parcel-bundler #  yarn global add parcel-bundler 

अब npm या यार्न का उपयोग करके प्रोजेक्ट को इनिशियलाइज़ करें, जिससे package.json का निर्माण हो जाएगा package.json फ़ाइल:

 npm init -y #  yarn init -y 

वह सब है! आगे कोई सेटिंग करने की आवश्यकता नहीं है। हमारे लिए बस इतना ही रह गया है कि पार्सल के बारे में बताएं कि कौन सी फाइल प्रोजेक्ट का एंट्री पॉइंट है। यह बंडल को यह पता लगाने की अनुमति देगा कि उसके सर्वर को ग्राहकों को क्या देना है।

हमारे मामले में, ऐसी फ़ाइल index.html होगी:

 parcel index.html 

सर्वर सफलतापूर्वक शुरू होने के बाद, कंसोल में निम्न प्रदर्शित किया जाएगा:

 Server running at http://localhost:1234 √ Built in 13ms. 

पार्सल सर्वर एक गर्म बूट का समर्थन करता है। बंडल हर बार प्रोजेक्ट फ़ाइलों में किए गए परिवर्तनों को सहेजने के लिए एप्लिकेशन का पुनर्निर्माण करता है।

आइए प्रोजेक्ट फ़ोल्डर पर वापस जाएं। यहां आप बंडलर द्वारा बनाए गए नए फ़ोल्डर और फाइलें देख सकते हैं।


बंडलर द्वारा बनाए गए नए फ़ोल्डर और फाइलें

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

Work परियोजना पर काम जारी रखना

चलिए style.scss फ़ाइल पर जाते हैं और पार्सल style.scss कोड की प्रक्रिया से परिचित होते हैं। मैंने यहां कई वैरिएबल बनाए हैं जिनका उपयोग कंटेनर के रंग और चौड़ाई को स्टोर करने के लिए किया जाता है जिसमें पेज की सामग्री को रखा जाता है:

 $container-size: 768px; $bg: #000; $text: #fff; $primary-yellow: #f9f929; 

अब, उसी फ़ाइल में, शैली विवरण जोड़ें। यहां आप जो चाहें बना सकते हैं। उदाहरण के लिए, मैंने ऐसा किया:

 *, *::after, *::before {  box-sizing: border-box; } body {  background: $bg;  color: $text;  font-family: 'Lato', sans-serif;  margin: 0;  padding: 0; } .container {  margin: 0 auto;  max-width: $container-size;  text-align: center;  h1 {    display: inline-block;    font-size: 36px;  }  span {    color: $primary-yellow;    font-size: 36px;    margin-left: 10px;  } } 

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

यहां बताया गया है कि स्टाइल के बाद पेज कैसा दिखेगा।


स्टाइल वाला पेज

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

आज ही एक फ़ाइल बनाएँ। today.js और उस से निर्यात करें, जो रिटर्न करता है, सप्ताह के दिनों के नामों के साथ एक सरणी का उपयोग करके, वर्तमान दिन का नाम:

 export function getDay() {  const today = new Date();  const daysArr = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];  return daysArr[today.getDay()]; } 

ध्यान दें कि getDay फ़ंक्शन सप्ताह getDay पहले दिन के getDay ।

हमने आज से today.js फंक्शन का निर्यात किया। today.js अब हम index.js फ़ाइल पर जाते हैं और आज के today.js फ़ाइल से इस फ़ंक्शन को आयात करते हैं। यह आज की today.js फ़ाइल today.js प्रोजेक्ट की असेंबली के दौरान संसाधित today.js कारण होगा।

 import { getDay } from './today'; 

पार्सल, किसी भी अतिरिक्त सेटिंग्स के बिना, ES6 मॉड्यूल के सिंटैक्स का समर्थन करता है, इसलिए हम जेएस फाइलों में आयात और निर्यात कमांड का उपयोग कर सकते हैं।

अब हमें बस इसी <span> तत्व का चयन करना है और इसमें getDay फ़ंक्शन द्वारा लौटाए गए मान को पास getDay । index.html में निम्न कोड जोड़ें:

 const day = document.querySelector('.today'); day.innerHTML = getDay(); 

फ़ाइल को सहेजने के बाद, परियोजना को फिर से बनाया जाएगा, ब्राउज़र में इसका पृष्ठ बदल जाएगा।


समाप्त परियोजना

उत्पादन के लिए एक परियोजना का निर्माण

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

परियोजना को प्रकाशन के लिए उपयुक्त रूप में लाने के लिए, हमें केवल एक आदेश की आवश्यकता है:

 parcel build index.html 

इस कमांड को चलाने के बाद, कंसोल को निम्न आकृति में दिखाए गए के समान कुछ मिलेगा।


प्रोजेक्ट असेंबली

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

परिणाम

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

प्रिय पाठकों! आप किस बंडल का उपयोग करते हैं?