🔅 🧝🏿 👨‍👧‍👦 वेबपैक और उन्नत वेब तकनीकों का उपयोग करके सरल, आधुनिक जावास्क्रिप्ट अनुप्रयोगों का विकास करना 🍐 🙍🏻 🙆🏿

क्या आपने अपनी अगली वेब परियोजना को विकसित करते समय सबसे सरल मौजूदा प्रौद्योगिकी सेट का उपयोग करने के बारे में सोचा है? यदि ऐसा है, तो सामग्री, जिसका अनुवाद आज हम प्रकाशित करते हैं, विशेष रूप से आपके लिए लिखा गया है।

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

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

सिंहावलोकन

इससे पहले कि हम व्यापार में उतरें, हम उन उपकरणों की चर्चा करें जिनकी हमें आवश्यकता है।

▍ एप्लीकेशन आर्किटेक्चर

एप्लिकेशन लोडिंग और प्रयोज्य की उच्च गति सुनिश्चित करने के लिए, हम निम्नलिखित डिज़ाइन पैटर्न का उपयोग करेंगे:

आर्किटेक्चर ऐप शेल।
PRPL पैटर्न (पुश, रेंडर, प्री-कैश, आलसी लोडिंग)।

System प्रोजेक्ट बिल्ड सिस्टम

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

ES6 और गतिशील संसाधन आयात क्षमताओं के लिए समर्थन।
एसएएसएस और सीएसएस के लिए समर्थन।
विकास मोड और वास्तविक एप्लिकेशन ऑपरेशन का अलग कॉन्फ़िगरेशन।
सेवा कर्मियों को स्वचालित रूप से कॉन्फ़िगर करने की क्षमता।

▍ उन्नत जावास्क्रिप्ट सुविधाएँ

हम आधुनिक जावास्क्रिप्ट विशेषताओं के न्यूनतम सेट का उपयोग करेंगे जो हमें वह विकसित करने की अनुमति देता है जिसकी हमें आवश्यकता है। यहाँ सवाल में विशेषताएं हैं:

मॉड्यूल।
ऑब्जेक्ट बनाने के विभिन्न तरीके (ऑब्जेक्ट शाब्दिक, कक्षाएं)।
संसाधनों का गतिशील आयात।
तीर कार्य।
खाका शाब्दिक।

अब जब हमारे पास एक सामान्य विचार है कि हमें क्या चाहिए, हम अपनी परियोजना को विकसित करने के लिए तैयार हैं।

अनुप्रयोग वास्तुकला

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

▍ App Shell और PRPL क्या है?

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

संक्षिप्त नाम PRPL निम्नानुसार है:

पुश - स्रोत मार्ग के लिए क्लाइंट को महत्वपूर्ण संसाधन भेजना (विशेष रूप से, HTTP / 2 का उपयोग करके)।
रेंडर - मूल मार्ग प्रदर्शित करें।
प्री-कैश - शेष मार्गों या संसाधनों का अग्रिम में कैशिंग।
आलसी लोड - "आलसी" अनुप्रयोग के कुछ हिस्सों को लोड करना क्योंकि वे आवश्यक हो जाते हैं (विशेष रूप से, उपयोगकर्ता के अनुरोध पर)।

कोड में ऐप शैल और PRPL का कार्यान्वयन

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

<!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" />    <!-- Critical Styles -->    <!--   №1 -->    <style>        html {            box-sizing: border-box;        }        *,        *:after,        *:before {            box-sizing: inherit;        }        body {            margin: 0;            padding: 0;            font: 18px 'Oxygen', Helvetica;            background: #ececec;        }        header {            height: 60px;            background: #512DA8;            color: #fff;            display: flex;            align-items: center;            padding: 0 40px;            box-shadow: 1px 2px 6px 0px #777;        }        h1 {            margin: 0;        }        .banner {            text-decoration: none;            color: #fff;            cursor: pointer;        }        main {            display: flex;            justify-content: center;            height: calc(100vh - 140px);            padding: 20px 40px;            overflow-y: auto;        }        button {            background: #512DA8;            border: 2px solid #512DA8;            cursor: pointer;            box-shadow: 1px 1px 3px 0px #777;            color: #fff;            padding: 10px 15px;            border-radius: 20px;        }        .button {            display: flex;            justify-content: center;        }        button:hover {            box-shadow: none;        }        footer {            height: 40px;            background: #2d3850;            color: #fff;            display: flex;            align-items: center;            padding: 40px;        }    </style>    <!--   №1 -->    <title>Vanilla Todos PWA</title> </head> <body>    <body>        <!-- Main Application Section -->        <!--   №2 -->        <header>            <h3><font color="#3AC1EF">▍<a class="banner"> Vanilla Todos PWA </a></font></h3>        </header>        <main id="app"></main>        <footer>            <span>© 2019 Anurag Majumdar - Vanilla Todos SPA</span>        </footer>        <!--   №2 -->             <!-- Critical Scripts -->        <!--   №3 -->        <script async src="<%= htmlWebpackPlugin.files.chunks.main.entry %>"></script>        <!--   №3 -->        <noscript>            This site uses JavaScript. Please enable JavaScript in your browser.        </noscript>    </body> </body> </html>

इस कोड का अध्ययन करने के बाद, आप समझ सकते हैं कि ऐप शेल टेम्पलेट किसी एप्लिकेशन के "शेल" के निर्माण के लिए प्रदान करता है, जो कि इसका "कंकाल" है जिसमें न्यूनतम मार्कअप है। हम इस कोड का विश्लेषण करेंगे (बाद में, कोड के टुकड़े जो हम विश्लेषण के दौरान संदर्भित करेंगे, टिप्पणी के साथ चिह्नित हैं, जैसे  )।

टुकड़ा नं। १। सबसे महत्वपूर्ण शैलियों को मार्कअप में बनाया गया है, और अलग-अलग फ़ाइलों के रूप में प्रस्तुत नहीं किया गया है। ऐसा इसलिए किया जाता है ताकि HTML पेज लोड करते समय CSS कोड को सीधे संसाधित किया जा सके।
टुकड़ा नंबर २। यहां एप्लिकेशन का "शेल" है। इन क्षेत्रों को बाद में जावास्क्रिप्ट कोड द्वारा नियंत्रित किया जाएगा। यह पहचानकर्ता app ( <main id="app"></main> ) के साथ main टैग में क्या होगा के लिए विशेष रूप से सच है।
टुकड़ा नंबर ३। यहां पटकथाएं आती हैं। async विशेषता आपको स्क्रिप्ट लोडिंग के दौरान पार्सर को ब्लॉक नहीं करने देती है।

आवेदन के ऊपर "कंकाल" PRPL पैटर्न के पुश और रेंडर चरणों को लागू करता है। ऐसा तब होता है जब ब्राउज़र पृष्ठ का दृश्य प्रतिनिधित्व करने के लिए HTML कोड को पार्स करता है। उसी समय, ब्राउज़र जल्दी से उन संसाधनों को खोज लेता है जो पृष्ठ आउटपुट के लिए महत्वपूर्ण हैं। इसके अलावा, स्क्रिप्ट यहां प्रस्तुत की गई हैं (खंड संख्या 3), जो डोम (रेंडर कदम पर) में हेरफेर करके मूल मार्ग को प्रदर्शित करने के लिए जिम्मेदार हैं।

हालांकि, यदि हम एप्लिकेशन के "शेल" को कैश करने के लिए सेवा कार्यकर्ता का उपयोग नहीं करते हैं, तो हमें पेज को रीलोड करते समय, प्रदर्शन का लाभ नहीं मिलेगा।

नीचे दिए गए कोड में एक सेवा कार्यकर्ता को कंकाल और आवेदन के सभी स्थिर संसाधनों को दिखाया गया है।

 var staticAssetsCacheName = 'todo-assets-v3'; var dynamicCacheName = 'todo-dynamic-v3'; //   №1 self.addEventListener('install', function (event) {   self.skipWaiting();   event.waitUntil(     caches.open(staticAssetsCacheName).then(function (cache) {       cache.addAll([           '/',           "chunks/todo.d41d8cd98f00b204e980.js","index.html","main.d41d8cd98f00b204e980.js"       ]       );     }).catch((error) => {       console.log('Error caching static assets:', error);     })   ); }); //   №1 //   №2 self.addEventListener('activate', function (event) {   if (self.clients && clients.claim) {     clients.claim();   }   event.waitUntil(     caches.keys().then(function (cacheNames) {       return Promise.all(         cacheNames.filter(function (cacheName) {           return (cacheName.startsWith('todo-')) && cacheName !== staticAssetsCacheName;         })         .map(function (cacheName) {           return caches.delete(cacheName);         })       ).catch((error) => {           console.log('Some error occurred while removing existing cache:', error);       });     }).catch((error) => {       console.log('Some error occurred while removing existing cache:', error);   })); }); //   №2 //   №3 self.addEventListener('fetch', (event) => {   event.respondWith(     caches.match(event.request).then((response) => {       return response || fetch(event.request)         .then((fetchResponse) => {             return cacheDynamicRequestData(dynamicCacheName, event.request.url, fetchResponse.clone());         }).catch((error) => {           console.log(error);         });     }).catch((error) => {       console.log(error);     })   ); }); //   №3 function cacheDynamicRequestData(dynamicCacheName, url, fetchResponse) {   return caches.open(dynamicCacheName)     .then((cache) => {       cache.put(url, fetchResponse.clone());       return fetchResponse;     }).catch((error) => {       console.log(error);     }); }

आइए इस कोड का विश्लेषण करें।

टुकड़ा नं। १। सेवा कार्यकर्ता की install घटना को संभालने से स्थैतिक संसाधनों को कैश करने में मदद मिलती है। यहां आप पहले मार्ग ("कंकाल" की सामग्री के अनुसार) के लिए आवेदन (सीएसएस, जावास्क्रिप्ट, चित्र, और इसी तरह) के "कंकाल" के संसाधनों को कैश कर सकते हैं। इसके अलावा, आप अन्य एप्लिकेशन संसाधनों को डाउनलोड कर सकते हैं, जिससे यह बन सकता है कि यह बिना इंटरनेट कनेक्शन के काम कर सके। संसाधन कैशिंग, कंकाल कैशिंग के अलावा, PRPL पैटर्न के प्री-कैश कदम से मेल खाती है।
टुकड़ा नंबर २। एक activate घटना प्रसंस्करण अप्रयुक्त कैश activate ।
टुकड़ा नंबर ३। कोड की ये पंक्तियाँ कैश से संसाधनों को लोड करती हैं यदि वे वहां हैं। अन्यथा, नेटवर्क अनुरोध किए जाते हैं। इसके अतिरिक्त, यदि संसाधन प्राप्त करने के लिए नेटवर्क अनुरोध किया जाता है, तो इसका मतलब है कि यह संसाधन अभी तक कैश नहीं किया गया है। इस तरह के संसाधन को नए अलग कैश में रखा जाता है। यह स्क्रिप्ट कैश डायनेमिक एप्लिकेशन डेटा को मदद करती है।

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

प्रोजेक्ट निर्माण प्रणाली

एक अच्छा आर्किटेक्चर अकेले, एक सभ्य प्रोजेक्ट बिल्ड सिस्टम के बिना, एक गुणवत्ता अनुप्रयोग बनाने के लिए पर्याप्त नहीं है। यह वह जगह है जहाँ Webpack काम में आता है। निर्माण परियोजनाओं (बंडलर्स) के लिए अन्य उपकरण हैं, उदाहरण के लिए - पार्सल और रोलअप। लेकिन वेबपैक के आधार पर हम जो लागू करेंगे, वह अन्य साधनों का उपयोग करके भी किया जा सकता है।

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

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

▍Support ES6 और गतिशील संसाधन आयात क्षमताएं

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

@babel/core
@babel/plugin-syntax-dynamic-import
@babel/preset-env
babel-core
babel-loader
babel-preset-env

यहाँ एक उदाहरण है। .babelrc साथ उपयोग के लिए .babelrc फ़ाइल:

 {   "presets": ["@babel/preset-env"],   "plugins": ["@babel/plugin-syntax-dynamic-import"] }

बाबेल को कॉन्फ़िगर करते समय, इस फ़ाइल की presets लाइन का उपयोग ES6 को ES5 संकलित करने के लिए बैबल को कॉन्फ़िगर करने के लिए किया जाता है, और plugins लाइन ताकि वेबपैक में डायनामिक आयात का उपयोग किया जा सके।

इस तरह से webpack.config.js साथ बैबेल का उपयोग किया जाता है (यहां webpack.config.js सेटिंग्स फ़ाइल का एक स्निपेट है - webpack.config.js ):

 module.exports = {   entry: {       //     },   output: {       //     },   module: {       rules: [           {               test: /\.js$/,               exclude: /node_modules/,               use: {                   loader: 'babel-loader'               }           }       ]   },   plugins: [       //    ] };

इस फ़ाइल के rules अनुभाग में वर्णन किया गया है कि ट्रांसफ़िलेशन प्रक्रिया को अनुकूलित करने के लिए बैबल babel-loader का उपयोग कैसे करें। इस फ़ाइल के बाकी हिस्से को संक्षिप्तता के लिए छोड़ दिया गया है।

▍SASS और सीएसएस समर्थन

हमारे SASS और CSS प्रोजेक्ट असेंबली सिस्टम के लिए सहायता प्रदान करने के लिए, हमें निम्नलिखित प्लगइन्स की आवश्यकता है:

sass-loader
css-loader
style-loader
MiniCssExtractPlugin

यहां बताया गया है कि वेबपैक सेटिंग फ़ाइल कैसी दिखती है, जिसमें इन प्लग इन के बारे में डेटा दर्ज किया गया है:

 module.exports = {   entry: {       //     },   output: {       //     },   module: {       rules: [           {               test: /\.js$/,               exclude: /node_modules/,               use: {                   loader: 'babel-loader'               }           },           {               test: /\.scss$/,               use: [                   'style-loader',                   MiniCssExtractPlugin.loader,                   'css-loader',                   'sass-loader'               ]           }       ]   },   plugins: [       new MiniCssExtractPlugin({           filename: '[name].css'       }),   ] };

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

And विकास मोड और आवेदन के असली काम की अलग सेटिंग

यह एप्लिकेशन बिल्ड प्रक्रिया का एक अत्यंत महत्वपूर्ण हिस्सा है। हर कोई जानता है कि एप्लिकेशन बनाते समय, विकास के दौरान उपयोग किए जाने वाले संस्करण को बनाने के लिए कुछ सेटिंग्स का उपयोग किया जाता है, जबकि अन्य का उपयोग इसके उत्पादन संस्करण के लिए किया जाता है। यहां उन पैकेजों की एक सूची दी गई है जो यहां काम आते हैं:

clean-webpack-plugin : dist फोल्डर की सामग्री को साफ करने के लिए।
compression-webpack-plugin : dist फोल्डर की सामग्री को संपीड़ित करने के लिए।
copy-webpack-plugin : स्थैतिक संसाधनों की नकल करने के लिए, उदाहरण के लिए, फ़ाइलें, फ़ोल्डर से एप्लिकेशन स्रोत डेटा के साथ फ़ोल्डर तक।
html-webpack-plugin : dist फोल्डर में index.html फ़ाइल बनाने के लिए।
webpack-md5-hash : dist फ़ोल्डर में हैशिंग एप्लिकेशन फ़ाइलों के लिए।
webpack-dev-server : विकास के दौरान उपयोग किए जाने वाले स्थानीय सर्वर को शुरू करने के लिए।

यहाँ परिणामी webpack.config.js फ़ाइल कैसी दिखती है:

 const path = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const WebpackMd5Hash = require('webpack-md5-hash'); const CleanWebpackPlugin = require('clean-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const CompressionPlugin = require('compression-webpack-plugin'); module.exports = (env, argv) => ({   entry: {       main: './src/main.js'   },   devtool: argv.mode === 'production' ? false : 'source-map',   output: {       path: path.resolve(__dirname, 'dist'),       chunkFilename:           argv.mode === 'production'               ? 'chunks/[name].[chunkhash].js'               : 'chunks/[name].js',       filename:           argv.mode === 'production' ? '[name].[chunkhash].js' : '[name].js'   },   module: {       rules: [           {               test: /\.js$/,               exclude: /node_modules/,               use: {                   loader: 'babel-loader'               }           },           {               test: /\.scss$/,               use: [                   'style-loader',                   MiniCssExtractPlugin.loader,                   'css-loader',                   'sass-loader'               ]           }       ]   },   plugins: [       new CleanWebpackPlugin('dist', {}),       new MiniCssExtractPlugin({           filename:               argv.mode === 'production'                   ? '[name].[contenthash].css'                   : '[name].css'       }),       new HtmlWebpackPlugin({           inject: false,           hash: true,           template: './index.html',           filename: 'index.html'       }),       new WebpackMd5Hash(),       new CopyWebpackPlugin([           // {           // from: './src/assets',           // to: './assets'           // },           // {           // from: 'manifest.json',           // to: 'manifest.json'           // }       ]),       new CompressionPlugin({           algorithm: 'gzip'       })   ],   devServer: {       contentBase: 'dist',       watchContentBase: true,       port: 1000   } });

पूरे वेबपैक कॉन्फ़िगरेशन को एक फ़ंक्शन के रूप में प्रस्तुत किया जाता है जो दो तर्क लेता है। यहाँ argv तर्क का उपयोग किया जाता है, जो इस फ़ंक्शन को दिए गए तर्कों का प्रतिनिधित्व करता है, जब webpack या webpack-dev-server कमांड webpack होते हैं। यहां बताया गया है कि package.json में इन कमांड्स का विवरण कैसा दिखता है package.json प्रोजेक्ट प्रोजेक्ट फ़ाइल:

 "scripts": {   "build": "webpack --mode production && node build-sw",   "serve": "webpack-dev-server --mode=development --hot", },

नतीजतन, अगर हम npm run build निष्पादित करते हैं, तो एप्लिकेशन का उत्पादन संस्करण बनाया जाएगा। यदि आप npm run serve कमांड npm run serve , तो विकास सर्वर शुरू हो जाएगा, आवेदन पर काम करने की प्रक्रिया का समर्थन करेगा।

उपरोक्त फ़ाइल के plugins और devServer से पता चलता है कि प्लगइन्स और विकास सर्वर को कैसे कॉन्फ़िगर किया जाए।

new CopyWebpackPlugin साथ शुरू होने वाले अनुभाग में, आप उन संसाधनों को निर्दिष्ट करते हैं जिन्हें आप एप्लिकेशन स्रोत सामग्री से कॉपी करना चाहते हैं।

। सेवा कर्मी का चयन करना

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

 const glob = require('glob'); const fs = require('fs'); const dest = 'dist/sw.js'; const staticAssetsCacheName = 'todo-assets-v1'; const dynamicCacheName = 'todo-dynamic-v1'; //   №1 let staticAssetsCacheFiles = glob   .sync('dist/**/*')   .map((path) => {       return path.slice(5);   })   .filter((file) => {       if (/\.gz$/.test(file)) return false;       if (/sw\.js$/.test(file)) return false;       if (!/\.+/.test(file)) return false;       return true;   }); //   №1 const stringFileCachesArray = JSON.stringify(staticAssetsCacheFiles); //   №2 const serviceWorkerScript = `var staticAssetsCacheName = '${staticAssetsCacheName}'; var dynamicCacheName = '${dynamicCacheName}'; self.addEventListener('install', function (event) {   self.skipWaiting();   event.waitUntil(     caches.open(staticAssetsCacheName).then(function (cache) {       cache.addAll([           '/',           ${stringFileCachesArray.slice(1, stringFileCachesArray.length - 1)}       ]       );     }).catch((error) => {       console.log('Error caching static assets:', error);     })   ); }); self.addEventListener('activate', function (event) {   if (self.clients && clients.claim) {     clients.claim();   }   event.waitUntil(     caches.keys().then(function (cacheNames) {       return Promise.all(         cacheNames.filter(function (cacheName) {           return (cacheName.startsWith('todo-')) && cacheName !== staticAssetsCacheName;         })         .map(function (cacheName) {           return caches.delete(cacheName);         })       ).catch((error) => {           console.log('Some error occurred while removing existing cache:', error);       });     }).catch((error) => {       console.log('Some error occurred while removing existing cache:', error);   })); }); self.addEventListener('fetch', (event) => {   event.respondWith(     caches.match(event.request).then((response) => {       return response || fetch(event.request)         .then((fetchResponse) => {             return cacheDynamicRequestData(dynamicCacheName, event.request.url, fetchResponse.clone());         }).catch((error) => {           console.log(error);         });     }).catch((error) => {       console.log(error);     })   ); }); function cacheDynamicRequestData(dynamicCacheName, url, fetchResponse) {   return caches.open(dynamicCacheName)     .then((cache) => {       cache.put(url, fetchResponse.clone());       return fetchResponse;     }).catch((error) => {       console.log(error);     }); } `; //   №2 //   №3 fs.writeFile(dest, serviceWorkerScript, function(error) {   if (error) return;   console.log('Service Worker Write success'); }); //   №3

आइए इस कोड का विश्लेषण करें।

टुकड़ा नं। १। यहां staticAssetsCacheFiles फोल्डर की फाइलों की सूची staticAssetsCacheFiles ऐरे में रखी गई है।
टुकड़ा नंबर २। यह सेवा कार्यकर्ता टेम्पलेट है जिसके बारे में हमने बात की है। तैयार कोड बनाते समय, चर का उपयोग किया जाता है। यह टेम्पलेट को सार्वभौमिक बनाता है, जिससे आप परियोजना के विकास के दौरान भविष्य में इसका उपयोग कर सकते हैं। हमें एक टेम्प्लेट की भी आवश्यकता है क्योंकि हम dist फ़ोल्डर की सामग्री के बारे में जानकारी उसमें जोड़ते हैं, जो समय के साथ बदल सकती है। इसके लिए, निरंतर stringFileCachesArray ।
टुकड़ा नंबर ३। यहां, serviceWorkerScript स्थिरांक में संग्रहीत नवनिर्मित सेवा कार्यकर्ता कोड को dist/sw.js पर स्थित फ़ाइल में लिखा जाता है।

इस स्क्रिप्ट को चलाने के लिए, node build-sw कमांड node build-sw उपयोग करें। webpack --mode production कमांड के webpack --mode production होने के बाद इसे निष्पादित किया जाना चाहिए।

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

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

Used परियोजना में प्रयुक्त पैकेजों का अवलोकन

यहां हमारी परियोजना का package.json फ़ाइल है, जहां आप इस परियोजना में उपयोग किए जाने वाले पैकेजों के बारे में जानकारी पा सकते हैं:

 { "name": "vanilla-todos-pwa", "version": "1.0.0", "description": "A simple todo application using ES6 and Webpack", "main": "src/main.js", "scripts": {   "build": "webpack --mode production && node build-sw",   "serve": "webpack-dev-server --mode=development --hot" }, "keywords": [], "author": "Anurag Majumdar", "license": "MIT", "devDependencies": {   "@babel/core": "^7.2.2",   "@babel/plugin-syntax-dynamic-import": "^7.2.0",   "@babel/preset-env": "^7.2.3",   "autoprefixer": "^9.4.5",   "babel-core": "^6.26.3",   "babel-loader": "^8.0.4",   "babel-preset-env": "^1.7.0",   "clean-webpack-plugin": "^1.0.0",   "compression-webpack-plugin": "^2.0.0",   "copy-webpack-plugin": "^4.6.0",   "css-loader": "^2.1.0",   "html-webpack-plugin": "^3.2.0",   "mini-css-extract-plugin": "^0.5.0",   "node-sass": "^4.11.0",   "sass-loader": "^7.1.0",   "style-loader": "^0.23.1",   "terser": "^3.14.1",   "webpack": "^4.28.4",   "webpack-cli": "^3.2.1",   "webpack-dev-server": "^3.1.14",   "webpack-md5-hash": "0.0.6" } }

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

जावास्क्रिप्ट आधुनिक सुविधाएँ

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

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

▍ मॉड्यूल

हम प्रत्येक फ़ाइल को ES6 मॉड्यूल के रूप में देखते हुए, मॉड्यूल आयात और निर्यात करने के लिए ES6 की क्षमताओं का उपयोग करेंगे। यह सुविधा अक्सर लोकप्रिय रूपरेखाओं जैसे कि कोणीय और प्रतिक्रिया में पाई जाती है, इसका उपयोग करना बहुत सुविधाजनक है। हमारे पास मौजूद वेबपैक के विन्यास के लिए धन्यवाद, हम आयात और निर्यात संसाधनों की अभिव्यक्ति का उपयोग कर सकते हैं। यहाँ यह app.js फ़ाइल में कैसा दिखता है:

 import { appTemplate } from './app.template'; import { AppModel } from './app.model'; export const AppComponent = { //   App... };

वस्तुओं को बनाने के विभिन्न तरीके

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

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

 import { appTemplate } from './app.template'; import { AppModel } from './app.model'; export const AppComponent = {   init() {       this.appElement = document.querySelector('#app');       this.initEvents();       this.render();   },   initEvents() {       this.appElement.addEventListener('click', event => {           if (event.target.className === 'btn-todo') {               import( /* webpackChunkName: "todo" */ './todo/todo.module')                   .then(lazyModule => {                       lazyModule.TodoModule.init();                   })                   .catch(error => 'An error occurred while loading Module');           }       });       document.querySelector('.banner').addEventListener('click', event => {           event.preventDefault();           this.render();       });   },   render() {       this.appElement.innerHTML = appTemplate(AppModel);   } };

यहां हम AppComponent घटक बनाते हैं और निर्यात करते हैं, जिसे आप तुरंत आवेदन के अन्य भागों में उपयोग कर सकते हैं।

आप ऐसी स्थितियों में ईएस 6 कक्षाओं या वेब घटकों का बहुत अच्छी तरह से उपयोग कर सकते हैं, एक ऐसी परियोजना को एक शैली में विकसित कर सकते हैं जो यहां उपयोग किए गए की तुलना में घोषणा के करीब है। यहां, प्रशिक्षण परियोजना को जटिल नहीं करने के लिए, एक अनिवार्य दृष्टिकोण का उपयोग किया जाता है।

▍ संसाधनों का गतिशील आयात

याद रखें कि, PRPL पैटर्न की बात करते हुए, हम अभी तक इसके उस भाग का पता नहीं लगा पाए हैं, जो L (लेटर लोडिंग) अक्षर द्वारा दर्शाया गया है? संसाधनों का गतिशील आयात वह है जो हमें घटकों या मॉड्यूल के आलसी लोडिंग को व्यवस्थित करने में मदद करता है। चूंकि हम एप्लिकेशन शेल आर्किटेक्चर और PRPL पैटर्न का उपयोग करते हैं, इसलिए एप्लिकेशन और उसके संसाधनों के "कंकाल" को कैश करने के लिए, डायनेमिक आयात के दौरान, संसाधन कैश से डाउनलोड किए जाते हैं, और नेटवर्क से नहीं।

कृपया ध्यान दें कि यदि हमने केवल ऐप शेल आर्किटेक्चर का उपयोग किया है, तो शेष एप्लिकेशन संसाधन, अर्थात, chunks फ़ोल्डर की सामग्री को कैश नहीं किया जाएगा।

डायनामिक रिसोर्स आयात का एक उदाहरण विशेष रूप से AppComponent घटक के उपरोक्त कोड टुकड़े में देखा जा सकता है, जहां बटन के क्लिक इवेंट को कॉन्फ़िगर किया गया है (हम initEvents() ऑब्जेक्ट की विधि के बारे में बात कर रहे हैं)। अर्थात्, यदि एप्लिकेशन का उपयोगकर्ता btn-todo बटन पर क्लिक करता है, तो btn-todo मॉड्यूल लोड किया जाएगा। यह मॉड्यूल एक नियमित जावास्क्रिप्ट फ़ाइल है जिसमें ऑब्जेक्ट के रूप में प्रतिनिधित्व किए गए घटकों का एक सेट होता है।

तीर कार्य और टेम्पलेट शाब्दिक

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

 export const appTemplate = model => `   <section class="app">       <h3><font color="#3AC1EF">▍ ${model.title} </font></h3>       <section class="button">           <button class="btn-todo"> Todo Module </button>       </section>   </section> `;

appTemplate फ़ंक्शन appTemplate एक मॉडल ( model पैरामीटर) लेता है और एक HTML स्ट्रिंग देता है जिसमें मॉडल से लिया गया डेटा होता है।स्ट्रिंग का गठन टेम्प्लेट शाब्दिक तकनीक का उपयोग करके किया जाता है। उन बहुस्तरीय संरचनाओं का प्रतिनिधित्व करने के लिए उनका उपयोग करना सुविधाजनक है जिसमें आपको किसी भी डेटा को जोड़ने की आवश्यकता होती है।

यहां घटकों का खाका तैयार करने और पुन: प्रयोज्य करने वाले घटकों को बनाने की एक त्वरित टिप दी गई है। इसमें reduce()HTML स्ट्रिंग्स को इकट्ठा करने के लिए एक सरणी विधि का उपयोग करना शामिल है :

 const WorkModel = [   {       id: 1,       src: '',       alt: '',       designation: '',       period: '',       description: ''   },   {       id: 2,       src: '',       alt: '',       designation: '',       period: '',       description: ''   },   //... ]; const workCardTemplate = (cardModel) => ` <section id="${cardModel.id}" class="work-card">   <section class="work__image">       <img class="work__image-content" type="image/svg+xml" src="${           cardModel.src       }" alt="${cardModel.alt}" />   </section>   <section class="work__designation">${cardModel.designation}</section>   <section class="work__period">${cardModel.period}</section>   <section class="work__content">       <section class="work__content-text">           ${cardModel.description}       </section>   </section> </section> `; export const workTemplate = (model) => ` <section class="work__section">   <section class="work-text">       <header class="header-text">           <span class="work-text__header"> Work </span>       </header>       <section class="work-text__content content-text">           <p class="work-text__content-para">               This area signifies work experience           </p>       </section>   </section>   <section class="work-cards">       ${model.reduce((html, card) => html + workCardTemplate(card), '')}   </section> </section> `;

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

आइए इसका विश्लेषण करें:

model . — , reduce() , .
model.reduce , HTML-, , . , , , — .

. , , — .

Todo-, . .

. . , , , .

-

-, , -, . , , . , JavaScript -, .

, .

-

. Lighthouse.

परिणाम

, , JavaScript, . , , , .

प्रिय पाठकों! -, ?

वेबपैक और उन्नत वेब तकनीकों का उपयोग करके सरल, आधुनिक जावास्क्रिप्ट अनुप्रयोगों का विकास करना