ओपन सोर्स LWC में थर्ड पार्टी JS लाइब्रेरी आयात करें

Question

JQuery आयात करने के लिए महत्वपूर्ण समय बर्बाद करने के बाद, मुझे HTML में स्थानीय पथ या CDN के साथ 2 तरीके मिले:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

स्थानीय पथ या CDN के साथ JS में:

var script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.4.1.min.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);

लेकिन दुर्भाग्य से उपरोक्त दोनों तरीके LWC में काम नहीं करेंगे और ऐसा करने के लिए कोई दस्तावेज उपलब्ध नहीं है।

नीचे का दृष्टिकोण मेरे lwc प्रोजेक्ट में jQuery आयात करने के लिए मेरे index.html पेज में ठीक काम करता है।

<script src="./resources/js/jquery-3.5.1.min.js"></script>

मैंने CSS में lwc को इम्पोर्ट करने के तरीके पर भी कई घंटे बर्बाद किये क्योंकि थर्ड पार्टी CSS को इम्पोर्ट करने पर कोई डॉक्यूमेंट उपलब्ध नहीं है, लेकिन कुछ मैंने नीचे दिए गए कोड का उपयोग करके कैसे css इम्पोर्ट किया

constructor() {

    super();

    const styles = document.createElement('link');
    styles.href = './resources/css/bootstrap.css';
    styles.rel = 'stylesheet';
    this.template.appendChild(styles);
}

इसलिए मैंने JS को आयात करने के लिए कुछ इसी तरह की कोशिश की और यह कंसोल लॉग में कोई त्रुटि नहीं देता है, लेकिन वही बिल्कुल भी काम नहीं करता है, दोनों कंस्ट्रक्टर और कनेक्टकॉलबैक में कोशिश की है लेकिन कोई भाग्य नहीं है।

connectedCallback() {
        const jq = document.createElement('SCRIPT');
        jq.src = './resources/js/jquery-3.5.1.min.js';
        jq.type = 'text/javascript';
        this.template.appendChild(jq);
    }

अगर किसी के पास ओपन सोर्स LWC में JS लाइब्रेरी को आयात करने के तरीके के बारे में कोई विचार है तो कृपया मुझे बताएं, आपकी मदद की बहुत सराहना करेंगे।

Answer 1

खुले स्रोत LWC व्यंजनों पर विचार करें

1. सबसे पहले आपको lwc web-app का उपयोग करके jQuery स्थापित करने की आवश्यकता है npm install jquery। या किसी अन्य पुस्तकालय का उपयोग करना चाहते हैं। स्थापना के बाद, आप फ़ाइल को node_modulesफ़ोल्डर में देखेंगे

2. अब, आपको बस उस लाइब्रेरी वैरिएबल को प्राप्त करने की आवश्यकता है जहाँ आपको आवश्यकता है। ध्यान दें कि यद्यपि आप jquery का उपयोग कर सकते हैं, आप सीधे तत्वों की पहचान नहीं कर सकते हैं। यानी, आप उपयोग नहीं कर सकते jQuery('p'), इसके बजाय आपको उपयोग करना चाहिए jq(this.template.querySelector('p'))।

नीचे एक ही नमूना व्यंजनों में हैलो दुनिया से उदाहरण दिया गया है:

hello.html:

<template>
    
    <button onclick={hide}>Hide</button>
    <button onclick={show}>Show</button>
    
    <p>If you click on the "Hide" button, I will disappear.</p>
    
    <ui-card title="Hello">
        <div>
            Hello, {greeting}!
        </div>

        <recipe-view-source source="recipe/hello" slot="footer">
            Bind an HTML element to a component property.
        </recipe-view-source>
    </ui-card>
</template>

hello.js:

import { LightningElement } from 'lwc';

export default class Hello extends LightningElement {
    greeting = 'World';
    
    connectedCallback(){
        window.jq = require('jQuery');
    }

    hide(){
        jq(this.template.querySelector('p')).hide();
    }

    show(){
        jq(this.template.querySelector('p')).show();
    }
}

जितने भी पुस्तकालयों का उपयोग $डिफ़ॉल्ट रूप में किया जाता है, मैं सिर्फ jqjquery के लिए उपयोग करता हूं ।

आउटपुट: