importar la biblioteca JS de terceros en LWC de código abierto
Después de perder una cantidad significativa de tiempo en cómo importar jQuery, obtuve debajo de 2 formas en HTML con ruta local o CDN:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
EN JS con ruta local 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);
Pero, lamentablemente, los dos métodos anteriores no funcionarán en LWC y no hay documentación disponible sobre cómo hacer lo mismo.
El siguiente enfoque funciona bien en mi página index.html para importar jQuery en mi proyecto lwc.
<script src="./resources/js/jquery-3.5.1.min.js"></script>
También desperdicié tantas horas en cómo importar CSS en lwc ya que no hay documentación disponible sobre la importación de CSS de terceros, pero de alguna manera logré importar css usando el siguiente código
constructor() {
super();
const styles = document.createElement('link');
styles.href = './resources/css/bootstrap.css';
styles.rel = 'stylesheet';
this.template.appendChild(styles);
}
Así que probé un enfoque similar para importar JS y esto no da ningún error en el registro de la consola, pero lo mismo no funciona en absoluto, probé tanto en el constructor como en el connectedCallback pero no tuve suerte.
connectedCallback() {
const jq = document.createElement('SCRIPT');
jq.src = './resources/js/jquery-3.5.1.min.js';
jq.type = 'text/javascript';
this.template.appendChild(jq);
}
Si alguien tiene alguna idea sobre cómo importar la biblioteca JS en LWC de código abierto, hágamelo saber, agradecería mucho su ayuda.
Respuestas
Considere las recetas de código abierto de LWC
Primero debe instalar jQuery en la aplicación web lwc usando
npm install jquery
. O cualquier otra biblioteca que desee utilizar. Después de la instalación, verá el archivo en lanode_modules
carpetaAhora, solo necesita obtener esa variable de biblioteca donde lo necesite. Tenga en cuenta que, aunque puede utilizar jquery, no puede identificar los elementos directamente. es decir, no puede usar
jQuery('p')
, en su lugar debe usarjq(this.template.querySelector('p'))
.
A continuación se muestra el ejemplo de hola mundo en las mismas recetas de muestra:
hola.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>
hola.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 muchas bibliotecas usan $
por defecto, yo tiendo a usar jq
jquery.
Salida:
