importa la libreria JS di terze parti in LWC open source
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
Considera le ricette LWC open source
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 nellanode_modules
cartellaOra, 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 usarejq(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 jq
per jquery.
Produzione:
