♾ 🐑 ⛹🏽 JQuery से दूर Svelte के लिए जाओ, कोई दर्द नहीं 🏨 🖐🏼 ✒️

सभी को नमस्कार।

मैं बैकएंड डेवलपर हूं और मैं फ्रंट-एंड कार्यों को हल करता हूं, जैसा कि मैं कर सकता हूं, जो कि jQuery पर है, यह 2015 में काम किया था, अब यह काम करता है। लेकिन Vue और React के साथ, यह अब एक कपूर नहीं है। एक विशेष तरीके से प्यार करने के बाद, मैंने एंगुलर / रिएक्ट / व्यू को मास्टर करने का फैसला किया, जिसे लाखों डेवलपर्स द्वारा परीक्षण नहीं किया गया है, मैंने स्वेल्ट को आजमाने का फैसला किया ।

पाठ्यपुस्तक से कुछ अभ्यास करने के बाद, मैंने अभ्यास करने का निर्णय लिया। इसके लिए, मैंने अपने सफल परीक्षण कार्यों में से एक लिया।

असाइनमेंट पर कार्यों की सूची और इस सूची में से एक कार्य की समीक्षा करना आवश्यक था, सीआरयूडी की आवश्यकता नहीं है।

क्लाइंट भाग को एसपीए के रूप में लागू किया जाता है, और डोम के साथ सभी काम jQuery के माध्यम से किया जाता है, यह jQuery को Svelte के साथ बदलने के लिए एक उत्कृष्ट उम्मीदवार है।

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

एक और ठोकर का उपयोग था

Svelte में, यह एक आरक्षित वर्ण है, इसलिए Svelte द्वारा संकलित कोड में इसका उपयोग करने से त्रुटि होती है:


[!] (plugin svelte) ValidationError: $ is an illegal variable name

`$` का उपयोग करना

बेशक, सवाल उठ सकता है: क्या `$` है जैसे अगर हम पूरी तरह से jQuery को Svelte में बदलते हैं?
हां, सवाल वाजिब है, लेकिन अगर आप इसके बारे में सोचते हैं, तो समस्या स्पष्ट हो जाएगी - आपको पूरे हाथी को खाने की ज़रूरत नहीं है, अनुभवी लोग हाथी को भागों में खाते हैं। SIVte का उपयोग करने के लिए jQuery का उपयोग करने से संक्रमण के संदर्भ में, यह परमाणु रिफैक्टरिंग की एक श्रृंखला होगी, प्रगति हमेशा दिखाई देगी और एक पूरे के रूप में "सिस्टम" हमेशा काम करने की स्थिति में होगा।

योजना यह है: हम एक टुकड़े को फिर से लिखते हैं, परीक्षण करते हैं, मरम्मत करते हैं, अगले टुकड़े को फिर से लिखते हैं और इसी तरह जब तक हम एक निशान के बिना पूरे हाथी को खाते हैं।

`$` के साथ समस्या केवल उस कोड में होती है जो स्वेल्ट संकलित करता है, मेरे पास सभी एसपीए लॉजिक "बिजनेस-प्रोसेस.जेएस" फ़ाइल में चले गए हैं, इस समस्या को हल करने की कोई आवश्यकता नहीं है, लेकिन सभी कोड "बिजनेस-प्रोसेस। जेएस" से जाना चाहिए। App.svelte और अन्य संबंधित अनुप्रयोग घटक।

पहले रीफैक्टरिंग के बाद, App.svelte निम्नलिखित कोड के साथ दिखाई दिया:


<script>
    jQuery(function ($) {

        function loadStartScreen() {
        loadPaging(0, settings.capacity);
        loadPage(0, settings.capacity);
        }

        loadStartScreen();

        async function search(sample) {
            $('#paging').empty();
            $.ajax({
                type: "GET",
                url: `/api/v1/task/search/${sample}/`,
                dataType: "json",
                success: renderTasks,
                error: function (jqXHR, textStatus, errorThrown) {
                },
                timeout: 500,
            });
        }

        $("#search").submit(async function (event) {
            event.preventDefault();
            const sample = $("#sample").val();

            if (sample) {
                search(sample);
            }
            if (!sample) {
                loadStartScreen();
            }
        });
    });
</script>

<div class="container">
    <h1>  </h1>

    <form class="form-horizontal" id="search">
        <div class="form-group">
            <label class="control-label col-sm-2" for="sample">
            
            </label>
            <div class="col-sm-10">
                <input id="sample" class="form-control " type="search"
                 placeholder="  " 
                 autofocus autocomplete="on" />
            </div>
        </div>
    </form>
    <div id="taskList">
    </div>
    <div id="paging">
    </div>

कोड काम कर रहा है, वास्तव में Svelte अभी तक बिल्कुल भी उपयोग नहीं किया गया है, इस स्तर पर Svelte केवल HTML कोड बनाता है जिसे इसमें डाला जाता है

<body>

चर `$` को कॉल में अलग किया जाता है

jQuery(function ($) {});

नामकरण संघर्ष नहीं।

हम आईडी = "नमूना" के साथ इनपुट तत्व के मूल्य के साथ नमूना चर को बांधते हैं:


                <input id="sample" class="form-control " type="search"
                 placeholder="  "
                 autofocus autocomplete="on"
                 bind:value={sample}
                 />

आईडी = "खोज" के साथ फॉर्म एलिमेंट की सबमिट घटना पर, कोड निष्पादित किया जाता है:


        $("#search").submit(async function (event) {
            event.preventDefault();

            if (sample) {
                search(sample);
            }
            if (!sample) {
                loadStartScreen();
            }
        });

इस कोड को Svelte निर्देश के अनुसार निष्पादित किया जाना चाहिए, हम इसे फिर से लिखते हैं:


<script>
    async function svelteSearch(event) {
        event.preventDefault();
        if (sample) {
            search(sample);
        }
        if (!sample) {
            loadStartScreen();
        }
    }
</script>
<form class="form-horizontal" id="search"
on:submit="{svelteSearch}">
</form>

कोड संकलित करता है, लेकिन काम नहीं करता है, क्योंकि खोज () फ़ंक्शन को jQuery के दायरे (फ़ंक्शन ($) {}) में परिभाषित किया गया है; और वैश्विक दायरे में यह फ़ंक्शन दिखाई नहीं देता है। खोज () को एक दायरे में खोज (घटना) के साथ खींचें:


<script>
    function loadStartScreen() {
        loadPaging(0, settings.capacity);
        loadPage(0, settings.capacity);
    }

    let sample = '';

    jQuery(function ($) {
        loadStartScreen();
    });
    async function search(sample) {
        $('#paging').empty();
        $.ajax({
            type: "GET",
            url: `/api/v1/task/search/${sample}/`,
            dataType: "json",
            success: renderTasks,
            error: function (jqXHR, textStatus, errorThrown) {
            },
            timeout: 500,
        });
    }
    async function svelteSearch(event) {
        event.preventDefault();
        if (sample) {
            search(sample);
        }
        if (!sample) {
            loadStartScreen();
        }
    }
</script>

ऐसा कोड संकलित नहीं करता है:


[!] (plugin svelte) ValidationError: $ is an illegal variable name

क्या करें? यह गूगल! "Svelte how to import jquery": मैं Svelte में jQuery का उपयोग कैसे करता हूँ। मैंने
तीसरे पक्ष के पुस्तकालय (मनमाने ढंग से .js) को आयात करने के लिए "सही" के रूप में चिह्नित उत्तर का उपयोग नहीं किया है, यह आयात * लिखने के लिए पर्याप्त नहीं है, आपको इसे रोलअप.config.js में पंजीकृत करना होगा। बाहरी:


export default { external []};

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

स्टैक ओवरफ्लो के साथ कॉपी-पेस्ट का उपयोग करें:


<script>
    function loadStartScreen() {
        loadPaging(0, settings.capacity);
        loadPage(0, settings.capacity);
    }
    jQuery(function ($) {
        loadStartScreen();
    });

    let sample = '';

    async function search(sample) {
        window.$('#paging').empty();
        window.$.ajax({
            type: "GET",
            url: `/api/v1/task/search/${sample}/`,
            dataType: "json",
            success: renderTasks,
            error: function (jqXHR, textStatus, errorThrown) {
            },
            timeout: 500,
        });
    }
    async function svelteSearch(event) {
        event.preventDefault();
        if (sample) {
            search(sample);
        }
        if (!sample) {
            loadStartScreen();
        }
    }
</script>

<div class="container">
    <h1>  </h1>
    <form class="form-horizontal" id="search"
    on:submit="{svelteSearch}">
        <div class="form-group">
            <label class="control-label col-sm-2" for="sample">
            
            </label>
            <div class="col-sm-10">
                <input id="sample" class="form-control " type="search"
                 placeholder="  "
                 autofocus autocomplete="on"
                 bind:value={sample}
                 />
            </div>
        </div>
    </form>
// ..skip..
</div>

इससे छुटकारा पाने के लिए रहता है:


    jQuery(function ($) {
        loadStartScreen();
    });

हम इस कोड को हटाते हैं और इसे मार्कअप में जोड़ते हैं:


<svelte:window on:load = {loadStartScreen} />

किया हुआ।

में दुर्बल प्रलेखन , आप पा सकते हैं:

<svelte: document>
<svelte: document> टैग, ठीक वैसे ही जैसे कि <svelte: window>, आपको दस्तावेज़ ऑब्जेक्ट में इवेंट श्रोताओं को घोषित रूप से जोड़ने का एक सुविधाजनक तरीका देता है। यह उन घटनाओं को सुनने के लिए उपयोगी है जो खिड़की पर आग नहीं लगाते हैं, जैसे कि माउसेंटर और मूसलीव।

व्यवहार में, हमारे पास है:


[!] (plugin svelte) ParseError: Valid <svelte:...> tag names are svelte:head, svelte:options, svelte:window, svelte:body, svelte:self or svelte:component

यही है, टैग को कोड से काट दिया गया था , लेकिन वे इसे दस्तावेज़ से हटाने के लिए भूल गए, मेरे विस्मय को, Svelte को देवताओं द्वारा नहीं, बल्कि उन लोगों द्वारा विकसित किया गया है जो बाद में कुछ के लिए छोड़ना भी भूल जाते हैं।

मैंने जो बताया थोड़ा खून के साथ Svelte कोड में jQuery को कैसे एकीकृत करें।

जेएस कोड में Svelte निर्देशों का संकलन कैसे करें

हम खाली प्रोजेक्ट को एक अलग फ़ोल्डर में पंप करते हैं जैसा कि स्वेल्टे ब्लॉग में वर्णित है (रास्ते में Node.js स्थापित करें)। अब हम डाउनलोड की गई फ़ाइलों को हमारी परियोजना की निर्देशिका में स्थानांतरित करते हैं।

हम फ़ाइलों को "सार्वजनिक" से स्थानांतरित करते हैं जहां हमारे पास क्लाइंट (उपयोगकर्ता के ब्राउज़र) द्वारा डाउनलोड की जाने वाली फाइलें हैं, मेरे पास यह "सार्वजनिक / संपत्ति / साइट" है, मुझे "Global.css" से शैलियों की आवश्यकता नहीं है, मैंने इस फ़ाइल को स्थानांतरित नहीं किया है।

फ़ाइल "सार्वजनिक / index.html", मैंने उस स्थान पर स्थानांतरित कर दिया जहां सर्वर टेम्पलेट को देखने के लिए ले जाएगा: "देखें / साइट / index.html"।

"Src" से फ़ाइलें फ्रंटेंड के स्रोत में जोड़ दी जाती हैं - "src / frontend"।

फ्रंटएंड के स्रोतों का वर्णन करने वाली फाइलें:

rollup.config.js
पैकेज-lock.json
package.json

मैं रूट पर स्थानांतरित हो गया, वहां आईडीई ने उन्हें उठाया और सब कुछ (स्थापित निर्भरता) का ख्याल रखा।
अब आपको JS में Svelte निर्देशों के संकलन विन्यास को बदलने की आवश्यकता है।

Rollup.config.js खोलें और फ़ाइल पथ बदलें:


export default {
	input: 'src/frontend/main.js',
	output: {
		sourcemap: true,
		format: 'iife',
		name: 'app',
		file: 'public/assets/Site/bundle.js'
	},
	plugins: [
		svelte({
			dev: !production,
			css: css => {
				css.write('public/assets/Site/bundle.css');
			}
		}),

यह एक मौजूदा परियोजना में Svelte के प्रारंभिक एकीकरण के साथ कठिनाई है।

हम निर्भरताएँ स्थापित करते हैं और मक्खी पर संकलन के लिए दृश्यपटल के स्रोत कोड में परिवर्तन पर नज़र रखना शुरू करते हैं:

npm install
npm run dev

मत भूलो

प्रस्तुति टेम्पलेट संपादित करें (मेरे मामले में, यह "दृश्य / साइट / index.html" है):

शरीर टैग के अंदर सब कुछ App.svelte पोर्टेबल है
आवश्यक संसाधन फ़ाइलों के लिंक जोड़ें
```
<head>
  <link rel='stylesheet' href='/assets/Site/bundle.css'>
</head>
```
बॉडी टैग के बाद, जेनरेटेड असेंबली फाइल में "लिंक" जोड़ें:
```
<body>
</body>
<script src='/assets/Site/bundle.js'></script>
```

पूरे कोड को रिपॉजिटरी में देखा जा सकता है ।

इस परियोजना में jQuery का अंतिम परित्याग अभी भी दूर है, लेकिन लेख इस बारे में नहीं था, यह लेख आपके कोड में, सबसे सरल चीजों के बारे में Svelte को लागू करने के पहले चरणों के बारे में है।

ध्यान देने के लिए आपको धन्यवाद।

धमकी
कैसे संक्रमण निकला, आप अगले लेख " यह कैसे था " में पढ़ सकते हैं

JQuery से दूर Svelte के लिए जाओ, कोई दर्द नहीं

`$` का उपयोग करना

जेएस कोड में Svelte निर्देशों का संकलन कैसे करें

मत भूलो

More articles: