importar biblioteca JS de terceiros em código aberto LWC
Depois de perder uma quantidade significativa de tempo em como importar o jQuery, consegui 2 maneiras em HTML com caminho local ou CDN:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
IN JS com caminho local ou 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);
Mas, infelizmente, os dois métodos acima não funcionam no LWC e não há documentação disponível sobre como fazer o mesmo.
A abordagem abaixo funciona bem na minha página index.html para importar jQuery no meu projeto lwc.
<script src="./resources/js/jquery-3.5.1.min.js"></script>
Eu também perdi muitas horas em como importar CSS em lwc, pois não há documentação disponível sobre como importar CSS de terceiros também, mas de alguma forma consegui importar css usando o código abaixo
constructor() {
super();
const styles = document.createElement('link');
styles.href = './resources/css/bootstrap.css';
styles.rel = 'stylesheet';
this.template.appendChild(styles);
}
Então, tentei uma abordagem semelhante para importar JS e isso não dá nenhum erro no log do console, mas o mesmo não funciona, tentei no construtor e no connectedCallback, mas sem sorte.
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 alguém tiver alguma idéia sobre como importar a biblioteca JS em código aberto LWC, por favor, me avise, ficaria muito grato por sua ajuda.
Respostas
Considere as receitas do LWC de código aberto
Primeiro você precisa instalar o jQuery no aplicativo da web lwc usando
npm install jquery
. OU qualquer outra biblioteca que você deseja usar. Após a instalação, você verá o arquivo nanode_modules
pastaAgora, você só precisa obter essa variável de biblioteca sempre que precisar. Observe que embora você possa usar jquery, você não pode identificar os elementos diretamente. ou seja, você não pode usar
jQuery('p')
, em vez disso, deve usarjq(this.template.querySelector('p'))
.
Abaixo está o exemplo do hello world nas mesmas receitas de amostra:
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();
}
}
Como muitas bibliotecas usam $
como padrão, eu apenas costumo usar jq
para jquery.
Resultado: