importa la libreria JS di terze parti in LWC open source

Aug 16 2020

Dopo aver sprecato una notevole quantità di tempo su come importare jQuery, ho ottenuto i seguenti 2 modi in HTML con percorso locale o CDN:

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

IN JS con percorso locale o 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);

Ma sfortunatamente entrambi i metodi precedenti non funzioneranno in LWC e non è disponibile alcuna documentazione su come fare lo stesso.

L'approccio sotto funziona bene nella mia pagina index.html per importare jQuery nel mio progetto lwc.

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

Ho anche sprecato così tante ore su come importare CSS in lwc in quanto non è disponibile alcuna documentazione sull'importazione di CSS di terze parti, ma in qualche modo sono riuscito a importare CSS utilizzando il codice sottostante

constructor() {

    super();

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

Quindi ho provato un approccio simile per importare JS e questo non dà errori nel registro della console ma lo stesso non funziona affatto, provato sia nel costruttore che nel connectedCallback ma senza fortuna.

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

se qualcuno ha qualche idea su come importare la libreria JS in LWC open source, fammelo sapere, apprezzerebbe molto il tuo aiuto.

Risposte

1 salesforce-sas Aug 16 2020 at 22:52

Considera le ricette LWC open source

  1. Per prima cosa devi installare jQuery nell'app web lwc usando npm install jquery. O qualsiasi altra libreria che desideri utilizzare. Dopo l'installazione, vedrai il file nella node_modulescartella

  2. Ora, devi solo ottenere quella variabile di libreria ovunque ti serva. Nota che sebbene tu possa usare jquery, non puoi identificare direttamente gli elementi. cioè, non puoi usare jQuery('p'), invece dovresti usare jq(this.template.querySelector('p')).

Di seguito è riportato l'esempio di hello world nelle stesse ricette di esempio:

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>

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

Dato che molte librerie usano $come impostazione predefinita, tendo a usare solo jqper jquery.

Produzione: