Parcel.js का परिचय, नो-कॉन्फिग वेब एप्लीकेशन बुंडलर

Parcel.js का परिचय, नो-कॉन्फिग वेब एप्लीकेशन बुंडलर

Parcel.js का परिचय, नो-कॉन्फिग वेब एप्लीकेशन बुंडलर
СОДЕРЖАНИЕ
02 июня 2020

यह पोस्ट आपका स्व-घोषित Parcel.js से परिचय है "तेज धधकते, शून्य विन्यास वेब अनुप्रयोग बंडलर." यहाँ सब कुछ है जो आपको इसके साथ आरंभ करने के लिए जानना चाहिए:


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

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

Parcel.js का परिचय

Parcel.js (parceljs.org) बिल्कुल वही है जो मध्यवर्ती डेवलपर्स के लिए शुरू होता है: एक सरल, कम-कॉन्फ़िगरेशन वाला बंडल जिसे आप उठ सकते हैं और जल्दी से चला सकते हैं.

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

Contents सामग्री की तालिका:

  1. वेब ऐप बंडल का उपयोग क्यों करें? #
  2. पार्सल स्थापित करना। js #
  3. फ़ाइल प्रविष्टि बिंदु बनाना #
  4. जिला / फ़ोल्डर #
  5. Babel # के साथ Parcel.js का उपयोग करना
  6. Sass # के साथ Parcel.js का उपयोग करना
  7. पार्सल # के साथ कई लिपियों को बांधना
  8. Parcel.js # के साथ कोड विभाजन
  9. उत्पादन Parcel.js # के साथ बनाता है
  10. पार्सल का उपयोग करने के लिए कोई कमियां? #

Parcel.js वेबसाइट

वेब ऐप बंडलर का उपयोग क्यों करें?

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

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

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

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

पार्सल स्थापित करना

आप Yarn या npm का उपयोग करके अपने टर्मिनल में Parcel.js स्थापित कर सकते हैं। इस ट्यूटोरियल के लिए, मैं npm का उपयोग करूँगा। यहाँ इसे विश्व स्तर पर स्थापित करने की आज्ञा है ताकि आप इसे किसी भी परियोजना पर उपयोग कर सकें:

npm पार्सल-बंडलर-जी स्थापित करें

-G ध्वज विश्व स्तर पर इसे स्थापित करता है। यदि आप इसे केवल एक परियोजना के लिए स्थापित करना चाहते हैं और इसे अपनी परियोजना की निर्भरता में शामिल करना चाहते हैं। पैकेज में, आप -g के बजाय -save-dev ध्वज का उपयोग करके परियोजना के रूट फ़ोल्डर के अंदर एक ही कमांड चला सकते हैं:

npm पार्सल-बंडलर स्थापित करें -save-dev

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

npm init -y

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

{
"नाम": "पार्सल-प्रदर्शन",
"संस्करण": "1.0.0",
"विवरण": "",
"मुख्य": "index.js",
"स्क्रिप्ट": {
"परीक्षा": "गूंज \ _"त्रुटि: कोई परीक्षण निर्दिष्ट नहीं \" && बाहर निकलें 1"
},
"कीवर्ड": [],
"लेखक": "",
"लाइसेंस": "आईएससी"
}

अगर आपको npm के साथ परिचित नहीं होने के कारण उपरोक्त में से कोई भी भ्रमित लगता है, तो आप मेरी व्यापक जांच कर सकते हैं npm पर ट्यूटोरियल. यह फ्रंट-एंड वेब डेवलपर्स को टूल को समझने में मदद करने पर केंद्रित है.

एक फ़ाइल प्रविष्टि बिंदु बनाना

एक मूल प्रोजेक्ट सेटअप के लिए, मैं Parcel.js को एक index.html फ़ाइल पर उपयोग करने जा रहा हूँ, जो एक प्राथमिक JavaScript फ़ाइल को इंगित करती है, जिसे index.js (पैकेज में दिखाया गया है। json फ़ाइल)। यह HTML फ़ाइल मेरे पार्सल प्रविष्टि बिंदु के रूप में काम करेगी। मेरी HTML फ़ाइल में एक स्क्रिप्ट तत्व होगा जो मेरी जावास्क्रिप्ट फ़ाइल को इंगित करता है, इसलिए यह कुछ इस तरह दिखाई देगा:

एचटीएमएल>
<एचटीएमएल>
<सिर>
<शीर्षक>पार्सल डेमोटिटेल>
सिर>
<तन>
<स्क्रिप्ट src ="./js/index.js">लिपि>
तन>
एचटीएमएल>

एक बार जब मेरे पास सही HTML फ़ाइल और जावास्क्रिप्ट फ़ाइल मौजूद हो, तो मैं अपने प्रोजेक्ट के फ़ोल्डर के अंदर अपने टर्मिनल में निम्नलिखित को चलाकर पार्सल के अंतर्निहित विकास सर्वर को शुरू कर सकता हूं:

parcel index.html

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

Http: // localhost: 1234 पर चलने वाला सर्वर
√ 887 में निर्मित.

अब तक मैंने क्या बनाया है, यह देखने के लिए मैं अपने ब्राउज़र में http: // localhost: 1234 / खोल सकता हूं। लाइव सर्वर लाइव पुनः लोड और कुछ कहा जाता है का उपयोग करता है गर्म मॉड्यूल प्रतिस्थापन. यह स्वचालित रूप से एक पृष्ठ पर मॉड्यूल को पूर्ण पृष्ठ ताज़ा किए बिना अपडेट करेगा। इस तरह मैं तेजी से वेतन वृद्धि में अपने निर्माण की प्रगति देख सकता हूं, जैसा कि मैं काम करता हूं.

एक बार जब मेरे पास Parcel.js अपने सर्वर के साथ सक्रिय होता है, तो मैं फ़ाइल में किए गए किसी भी परिवर्तन को स्वचालित रूप से हर बार फ़ाइल सहेजने के बाद अपने ऐप को फिर से बनाऊंगा। इस क्रिया को देखने के लिए, मैं अपनी स्क्रिप्ट में एक साधारण कंसोल लॉग लाइन जोड़ने जा रहा हूँ। यह मेरे टर्मिनल में निम्नलिखित संदेश को ट्रिगर करेगा:

$ पार्सल इंडेक्स। html
Http: // localhost: 1234 पर चलने वाला सर्वर
√ 1.08s में निर्मित.
√ 28ms में निर्मित.

प्रत्येक “बिल्ट …” लाइन एक निर्माण का प्रतिनिधित्व करती है, जो सामग्री में बदलाव और बचत से शुरू होती है.

यदि मैं पार्सल के अंतर्निहित विकास सर्वर के बजाय अपने स्वयं के सर्वर का उपयोग करना चाहता हूं, तो मैं वॉच कमांड का उपयोग कर सकता हूं:

parcel watch index.html

मुझे अपने टर्मिनल सत्र में एक ही परिणाम मिलता है, Parcel.js के साथ अपने ऐप का निर्माण करना और फिर परिवर्तनों की प्रतीक्षा करना:

$ पार्सल घड़ी index.html
√ 855ms में निर्मित.

डिस्ट / फोल्डर

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

index.html
package.json
जे एस /
S index.js
जिले /
└───── index.html
└───── js.00a46daa.js
└───── js.00a46daa.js.map

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

अगर मैं डिस्टर्ब फोल्डर के अंदर अपने index.html फ़ाइल को देखता हूं, तो मुझे निम्नलिखित दिखाई देंगे:

एचटीएमएल>
<एचटीएमएल>
<सिर>
<शीर्षक>पार्सल डेमोटिटेल>
सिर>
<तन>

<स्क्रिप्ट src ="/js.00a46daa.js">लिपि>
तन>
एचटीएमएल>

मेरे index.html फ़ाइल बिंदुओं के सटीक संस्करण को ध्यानपूर्वक और आसानी से मेरे .js फ़ाइल के dist संस्करण पर ध्यान दें.

यदि मेरी वेबसाइट में एक ही स्क्रिप्ट की ओर संकेत करने वाली कई फाइलें शामिल हैं (उदाहरण के लिए, about.html, contact.html, आदि), तो मैं निम्नलिखित जानकारी का उपयोग कर सकता हूं:

parcel index.html about.html contact.html

यह पार्सल बताता है कि मैं निर्माण करने के लिए कई प्रवेश बिंदुओं का उपयोग करना चाहता हूं। मैं निम्नलिखित सभी कमांड का उपयोग पार्सल को बताने के लिए कर सकता हूं। अपनी सभी HTML फाइलों को प्रवेश बिंदु के रूप में उपयोग करने के लिए:

पार्सल *। html

बाबेल के साथ पार्सल का उपयोग करना

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

मैं अपनी index.js फ़ाइल में निम्न कोड जोड़ने जा रहा हूं:

फ़ंक्शन getInfo (नाम, वर्ष = 2018, रंग = ‘नीला’) {
कंसोल.लॉग (नाम, वर्ष, रंग);
}

getInfo (‘चेवी’, 1957, ‘ग्रीन’);
getInfo (‘बेंज’, 1975);
getInfo ( ‘होंडा’);

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

फ़ंक्शन getInfo (नाम) {
var वर्ष = तर्क > 1 && तर्क [1]! == अपरिभाषित? तर्क [1]: २०१:;
var रंग = तर्क। गति > 2 && तर्क [2]! == अपरिभाषित? तर्क [2]: ‘नीला’;
कंसोल.लॉग (नाम, वर्ष, रंग);
}

getInfo (‘चेवी’, 1957, ‘ग्रीन’);
getInfo (‘बेंज’, 1975);
getInfo ( ‘होंडा’);

आप बबल के ऑनलाइन उत्तर का उपयोग कर सकते हैं इसका परीक्षण करें.

और यहां सबसे महत्वपूर्ण कारक को नोटिस करें: मैंने बैबेल को स्थापित या कॉन्फ़िगर करने के लिए कुछ भी नहीं किया है – यह पार्सल के डिफ़ॉल्ट सेटअप के हिस्से के रूप में बस आउट-ऑफ-द-बॉक्स काम करता है! बेशक, आप बबल को बदलने के लिए कुछ विन्यास विकल्प जोड़ना चाहते हैं जो आप चाहते हैं। यदि ऐसा है, तो आप अपनी कॉन्फ़िगरेशन प्राथमिकताओं के साथ अपने प्रोजेक्ट के रूट फ़ोल्डर में एक .babelrc फ़ाइल जोड़ सकते हैं। आप इसके बारे में अधिक पढ़ सकते हैं -babelrc फ़ाइल का उपयोग करना Parcel.js वेबसाइट पर.

Sass के साथ Parcel.js का उपयोग करना

बबेल की तरह, पार्सल भी डिफ़ॉल्ट रूप से सीएसएस (एसएएस) फाइलों को स्वतः ही सीएसएस को मान्य करने के लिए संकलित करेगा। इसे प्रदर्शित करने के लिए, मैं अपने उदाहरण प्रोजेक्ट के मूल में “css” नामक एक फ़ोल्डर जोड़ने जा रहा हूँ। उस फ़ोल्डर में मैं निम्नलिखित Sass कोड के साथ एक style.scss फ़ाइल जोड़ूंगा:

तन {
कला रंग;

.मापांक {
लाल रंग;
}
}

मैं सैस के चयनकर्ता नेस्टिंग सुविधा का उपयोग कर रहा हूं। मैं अपनी HTML फ़ाइलों के अनुभाग में निम्नलिखित पंक्ति जोड़ूंगा:

<लिंक rel ="शैली पत्रक" href ="./css/style.scss">

एक बार जब मेरी सभी फाइलें बच जाती हैं, तो पार्सल मेरे डिस्टर्ब / फोल्डर में एक ताजा बिल्ड का निर्माण करेगा जिसमें एक संकलित सीएसएस फाइल होगी जिसने मेरे SCSS को निम्न में बदल दिया है:

तन {
कला रंग;
}
शरीर।
लाल रंग;
}

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

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

पार्सल के साथ कई लिपियों को बांधना

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

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

इसे प्रदर्शित करने के लिए, मैं एक अलग फ़ाइल जोड़ने जा रहा हूँ, जिसे मॉड्यूल कहा जाता है। जेएस जिसमें निम्नलिखित जावास्क्रिप्ट शामिल होंगे:

निर्यात चलो रंग = ‘हरा’;

निर्यात समारोह जोड़ें (n1, n2) {
वापसी n1 + n2;
}

यह दो वस्तुओं को निर्यात करने के लिए सिर्फ कुछ मूल कोड है: एक चर और एक फ़ंक्शन। अपनी index.js फ़ाइल में मैं निम्नलिखित कोड के साथ इन संसाधनों को आयात करने जा रहा हूं:

आयात {color, add} से ‘../js/module.js’;

console.log (रंग); // "हरा"
कंसोल.लॉग (ऐड (20, 40)); // 60

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

<स्क्रिप्ट src ="./js/index.js" टाइप ="मापांक">लिपि>

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

Parcel.js के साथ कोड विभाजन

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

पहले मैंने उल्लेख किया था कि मेरी उदाहरण परियोजना में तीन पृष्ठ शामिल हैं: index.html, about.html, और contact.html। मान लें कि मैं सभी तीन पेजों पर एक ही जावास्क्रिप्ट बंडल चलाना चाहता हूं, लेकिन लगभग पृष्ठ पर मेरे पास एक बटन है जो कुछ विशिष्ट को ट्रिगर करता है। लेकिन मैं केवल उस कोड को लोड करना चाहता हूं जब उस बटन को दबाया जाता है.

यहां बताया गया है कि कोड विभाजन सुविधा का उपयोग करके यह कोड कैसा दिख सकता है:

अगर (document.querySelector (‘। about’)) {
document.querySelector (‘। about’)। addEventListener (‘क्लिक’, () =)> {
आयात ( ‘../ js / about.js’)। तो (
document.body.innerHTML + = ‘पेज अपडेट के बारे में’;
);
});
}

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

अन्य विशेषताओं की तरह जिन पर मैंने चर्चा की है, आयात () सुविधा बिना किसी कॉन्फ़िगरेशन के पार्सल में काम करती है.

उत्पादन Parcel.js के साथ बनाता है

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

एक बार जब मेरा प्रोजेक्ट पूरा हो जाता है और लाइव सर्वर पर धकेलने के लिए तैयार हो जाता है, तो मैं पार्सल को अपनी परियोजना को देखने से रोक सकता हूं। टर्मिनल में CTRL-C कई प्लेटफार्मों पर ऐसा करता है। तब मैं पार्सल को एक अंतिम निर्माण के बारे में बताने के लिए निम्नलिखित आदेश चलाऊंगा:

पार्सल बिल्ड index.html about.html contact.html

इस स्थिति में, मैं अपनी तीनों प्रविष्टि फ़ाइलों से निर्माण कर रहा हूँ। एक बार यह पूरा हो जाने के बाद, पार्सल अब बदलावों की प्रतीक्षा नहीं कर रहा है; अंतिम बंडल बनाया गया है और यह है बिल्ड को अंतिम रूप देने के अलावा, मेरा कोड पार्सल द्वारा उत्पादन के लिए तैयार किया गया है। HTML, CSS और JavaScript अनुकूलित प्रदर्शन के लिए छोटी से छोटी संभव फ़ाइलों का निर्माण करने के लिए तैयार हैं.

पार्सल का उपयोग करने के लिए कोई कमियां?

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

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

एक और दोष यह है कि मैंने पाया कि पार्सल प्रलेखन बहुत कम है जब यह विभिन्न विशेषताओं के लिए कॉन्फ़िगरेशन विकल्पों को अनुकूलित करने की जानकारी देता है। यह सही है कि पार्सल का एक बड़ा लाभ यह है कि यह कितना अच्छा है। लेकिन मुझे लगता है कि इसे अनुकूलित करने पर कुछ और व्यापक दस्तावेज उपयोगी होंगे। उदाहरण के लिए, सीएसएस और जावास्क्रिप्ट मिनिफिकेशन को बनाए रखते हुए, मैं अपने बिल्ड पर HTML मिनिमाइज़ेशन को कैसे अक्षम करूं? मुझे डॉक्स में इसका विवरण दिखाई नहीं देता है। जब मैंने GitHub पर बंद मुद्दों के माध्यम से देखा, वहाँ है एक वर्कअराउंड (सोचा कि यह बहुत सुविधाजनक नहीं है).

निष्कर्ष

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

Parcel.js में ऐप बनाएं

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

अपनी वर्डप्रेस साइट को गति देने पर हमारे क्रैश कोर्स में शामिल होना न भूलें। कुछ सरल सुधारों के साथ, आप अपने लोडिंग समय को 50-80% तक कम कर सकते हैं:

करोल के द्वारा लेआउट और प्रस्तुति.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector