पार्सल जेएस के साथ अपनी फाइलों को तेजी से बंडल करें

मुझे अपने वेबसाइट प्रोजेक्ट सेट करने से नफरत है।

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

इसलिए मैं Parcel.js को आज़माने के लिए वास्तव में उत्साहित था, जो वेबपैक या गल्प के समान एक बिल्ड टूल है, लेकिन "शून्य कॉन्फ़िगरेशन" बंडलर के रूप में बिल किया जाता है।

और मुझे कहना होगा- पार्सल डिलीवर हो गया। index.html, script.js, और style.scss फ़ाइलों के साथ एक त्वरित प्रोजेक्ट बनाने के बाद, मैं पाँच मिनट से भी कम समय में तैयार हो गया और चल रहा था!

यहां कुछ चीजें हैं जो पार्सल कर सकती हैं जो आपको पसंद आएंगी:

• यह स्वचालित रूप से आपके लिए आवश्यक अन्य पैकेज स्थापित करेगा, जैसे Sass और Babel।
• पार्सल स्वचालित रूप से आपकी एसएएस फाइलों को सीएसएस में संकलित कर देगा
• आपको डिफ़ॉल्ट कार्यक्षमता के लिए एक कॉन्फ़िग फ़ाइल बनाने की आवश्यकता नहीं है (इस पर बाद में)।
• बोनस:पार्सल एक स्थानीय देव सर्वर को स्पिन करता है, और जब भी आप अपनी फाइलों में बदलाव करते हैं तो यह स्वचालित रूप से अपडेट हो जाएगा!

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

आइए देखें कि पार्सल के साथ कैसे उठें और कैसे दौड़ें!

पार्सल इंस्टॉल करें

आप पार्सल को एनपीएम या यार्न का उपयोग करके स्थापित कर सकते हैं। आपको एक package.json फ़ाइल भी बनानी होगी। (नोट:यदि आपके पास Node.js स्थापित नहीं है, तो आपको इन चरणों से पहले ऐसा करना होगा!)

एनपीएम:

npm install -g parcel-bundler
npm init -y

यार्न:

yarn global add parcel-bundler
yarn init -y

अपनी वेबसाइट फ़ाइलें सेट करें

हम केवल इन फ़ाइलों के साथ एक बहुत ही सरल वेबसाइट बनाएंगे:

• index.html
• script.js
• style.scss

पार्सल आपके प्रोजेक्ट तक पहुंचने के लिए आपकी जावास्क्रिप्ट फ़ाइल का उपयोग करता है, इसलिए अपनी index.html फ़ाइल में, इसकी ओर इशारा करते हुए एक स्क्रिप्ट टैग जोड़ें:

<script src="./script.js"></script>

फिर अपनी script.js फ़ाइल में, अपनी Sass फ़ाइल शामिल करें:

import '/style.scss';

पार्सल चलाएँ!

और नंगे हड्डियों के सेट अप के लिए आपको बस इतना ही कॉन्फ़िगरेशन चाहिए!

पार्सल चलाने के लिए, अपनी कमांड लाइन पर, इस कमांड का उपयोग करें:

parcel index.html

यह आपकी परियोजना का निर्माण करेगा, और https://localhost:1234/ पर एक स्थानीय देव सर्वर शुरू करेगा। इसके बारे में सबसे अच्छी बात यह है कि जब भी आप अपनी फाइलों में बदलाव करते हैं, तो पार्सल स्वचालित रूप से आपके लिए स्थानीय साइट का पुनर्निर्माण और अपडेट कर देगा।

इसके अलावा, यदि आप बिल्ड कमांड का उपयोग करते हैं, तो पार्सल आपके लिए आपके एचटीएमएल, सीएसएस और जेएस फाइलों को छोटा कर देगा। फिर से, बिना कोई अतिरिक्त पैकेज स्थापित किए!

parcel build index.html

क्या यह बहुत आसान लगता है? यह एक तरह का है, खासकर यदि आप वेबपैक या गल्प के साथ तकरार करने के आदी हैं

तो पार्सल कैसे काम करता है?

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

यदि आपको देव सर्वर की आवश्यकता नहीं है या आप चाहते हैं, तो आप अपना स्वयं का बना सकते हैं और /dist फ़ोल्डर सामग्री को अपनी स्रोत फ़ाइलों के रूप में उपयोग कर सकते हैं।

लीक से हटकर, पार्सल आपकी फ़ाइलों को रूपांतरित करने के लिए आपके लिए कुछ पैकेज स्थापित करेगा और उनका उपयोग करेगा:

• बेबेल का उपयोग ES6 सिंटैक्स को जावास्क्रिप्ट संस्करण में बदलने के लिए किया जाता है जो सभी ब्राउज़रों में उपलब्ध है
• सीएसएस नैनो का उपयोग आपके सीएसएस को छोटा करने के लिए किया जाता है जब आप बिल्ड कमांड का उपयोग करते हैं

लेकिन अगर मुझे और चाहिए तो क्या होगा?

तो उपरोक्त कॉन्फ़िगरेशन बहुत अच्छा है यदि आपको केवल मूल बातें चाहिए।

लेकिन अगर आपको कुछ और करने के लिए पार्सल की आवश्यकता है, तो आपको कुछ अतिरिक्त पैकेज स्थापित करने होंगे, और हां, आपको एक या दो कॉन्फ़िगरेशन फ़ाइल की आवश्यकता हो सकती है।

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

सबसे पहले मैंने पोस्टसीएसएस स्थापित किया, जो ऑटोप्रीफिक्सर चलाता है:

yarn add postcss-modules autoprefixer

फिर मैंने अपने प्रोजेक्ट रूट में निम्न कोड के साथ एक कॉन्फ़िग फ़ाइल बनाई:

{  
  "plugins": {
    "autoprefixer": true
  }
}

नोट:यह कोड पार्सल के पोस्टसीएसएस सेटअप निर्देशों में दिए गए कोड से अलग है। हालांकि, उनके कोड स्निपेट का उपयोग करते समय, जब मैंने प्रोजेक्ट बनाया, तो सीएसएस वर्ग का नाम जो उपसर्ग गुणों का उपयोग कर रहा था, उसका नाम बदल दिया गया। इसने उस वर्ग के नाम के लिए सभी CSS शैलियाँ काम नहीं कीं। इसलिए यदि आप ऑटोप्रिफ़िक्सर का उपयोग कर रहे हैं, तो मेरा सुझाव है कि मैं यहाँ ऊपर दिए गए कोड स्निपेट का उपयोग करूँ।

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

आप मेरे द्वारा इस ट्यूटोरियल में उपयोग की गई फ़ाइलें यहाँ मेरे GitHub खाते में प्राप्त कर सकते हैं।

क्या मुझे WebPack और Gulp को पार्सल से बदलना चाहिए?

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

मैं अभी से पार्सल को अपने डिफ़ॉल्ट बिल्ड टूल के रूप में उपयोग करने की योजना बना रहा हूं, खासकर साधारण फ्रंट-एंड प्रोजेक्ट्स के लिए।

आप पार्सल के बारे में क्या सोचते हैं? नीचे एक टिप्पणी छोड़ने के लिए स्वतंत्र महसूस करें।