üçüncü taraf JS kitaplığını açık kaynak LWC'de içe aktarın

Question

JQuery'nin nasıl içe aktarılacağı konusunda önemli miktarda zaman harcadıktan sonra, yerel yol veya CDN ile HTML'de 2 yolun altına girdim:

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

Yerel yol veya CDN ile IN 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);

Ancak ne yazık ki yukarıdaki yöntemlerin her ikisi de LWC'de çalışmayacaktır ve aynısının nasıl yapılacağına dair herhangi bir belge bulunmamaktadır.

Aşağıdaki yaklaşım, lwc projemde jQuery'yi içe aktarmak için index.html sayfamda iyi çalışıyor.

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

Ayrıca, üçüncü taraf CSS'nin içe aktarılmasıyla ilgili herhangi bir belge olmadığı için CSS'yi lwc'de nasıl içe aktaracağım konusunda çok saat harcadım, ancak aşağıdaki kodu kullanarak css'i nasıl içe aktarmayı başardım

constructor() {

    super();

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

Bu yüzden JS'yi içe aktarmak için benzer bir yaklaşım denedim ve bu konsol günlüğünde herhangi bir hata vermiyor, ancak aynı şey hiç çalışmıyor, hem yapıcı hem de ConnectedCallback'de denendi, ancak şans yok.

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

JS kitaplığını açık kaynak LWC'ye nasıl aktaracağına dair herhangi bir fikri olan varsa, lütfen bana bildirin, yardımınız için çok minnettar oluruz.

Answer 1

Açık kaynak LWC tariflerini düşünün

1. Öncelikle yüklemeniz gerekir jQuery kullanarak lwc web uygulamasında npm install jquery. VEYA kullanmak istediğiniz başka bir kitaplık. Kurulumdan sonra dosyayı node_modulesklasörde göreceksiniz

2. Şimdi, ihtiyacınız olan her yerde bu kütüphane değişkenine ihtiyacınız var. Jquery kullanabilmenize rağmen, öğeleri doğrudan tanımlayamayacağınızı unutmayın. yani kullanamazsınız jQuery('p'), onun yerine kullanmalısınız jq(this.template.querySelector('p')).

Aşağıda aynı örnek tariflerde merhaba dünyasından örnek verilmiştir:

merhaba.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>

merhaba.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();
    }
}

Birçok kitaplığın $varsayılan olarak kullandığı gibi, ben sadece jqjquery için kullanma eğilimindeyim .

Çıktı: