zaimportuj bibliotekę JS innej firmy w LWC typu open source

Question

Po zmarnowaniu dużej ilości czasu na importowanie jQuery otrzymałem poniżej 2 sposoby w HTML ze ścieżką lokalną lub CDN:

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

IN JS ze ścieżką lokalną lub CDN:

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);

Ale niestety obie powyższe metody nie będą działać w LWC i nie ma dostępnej dokumentacji, jak zrobić to samo.

Poniższe podejście działa dobrze na mojej stronie index.html, aby zaimportować jQuery do mojego projektu lwc.

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

Zmarnowałem też tyle godzin na import CSS w lwc, ponieważ nie ma dostępnej dokumentacji na temat importowania CSS innych firm, ale trochę jak zaimportowałem css za pomocą poniższego kodu

constructor() {

    super();

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

Spróbowałem więc podobnego podejścia do importu JS i nie daje to żadnych błędów w logu konsoli, ale to samo w ogóle nie działa, wypróbowałem zarówno w konstruktorze, jak i w connectedCallback, ale bez powodzenia.

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

jeśli ktoś ma pomysł, jak zaimportować bibliotekę JS w LWC o otwartym kodzie źródłowym, daj mi znać, byłby bardzo wdzięczny za pomoc.

Answer 1

Rozważ przepisy open source LWC

1. Najpierw musisz zainstalować jQuery w aplikacji internetowej LWC przy użyciu npm install jquery. LUB dowolną inną bibliotekę, której chcesz użyć. Po instalacji zobaczysz plik w node_modulesfolderze

2. Teraz wystarczy pobrać tę zmienną biblioteczną, gdziekolwiek potrzebujesz. Zauważ, że chociaż możesz użyć jquery, nie możesz bezpośrednio zidentyfikować elementów. tj. nie możesz użyć jQuery('p'), zamiast tego powinieneś użyć jq(this.template.querySelector('p')).

Poniżej przykład z Hello world w tych samych przykładowych przepisach:

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

Ponieważ wiele bibliotek używa $domyślnie, ja po prostu używam jqjquery.

Wynik: