Importieren Sie die JS-Bibliothek eines Drittanbieters in Open Source LWC
Nachdem ich viel Zeit mit dem Importieren von jQuery verschwendet hatte, habe ich in HTML mit lokalem Pfad oder CDN zwei Möglichkeiten:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
IN JS mit lokalem Pfad oder 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);
Leider funktionieren beide oben genannten Methoden in LWC nicht und es ist keine Dokumentation verfügbar, wie Sie dasselbe tun können.
Der folgende Ansatz funktioniert auf meiner index.html-Seite einwandfrei, um jQuery in mein lwc-Projekt zu importieren.
<script src="./resources/js/jquery-3.5.1.min.js"></script>
Ich habe auch so viele Stunden damit verschwendet, CSS in lwc zu importieren, dass keine Dokumentation zum Importieren von CSS von Drittanbietern verfügbar ist, aber einige, wie ich es geschafft habe, CSS mithilfe des folgenden Codes zu importieren
constructor() {
super();
const styles = document.createElement('link');
styles.href = './resources/css/bootstrap.css';
styles.rel = 'stylesheet';
this.template.appendChild(styles);
}
Also habe ich einen ähnlichen Ansatz zum Importieren von JS versucht und dies gibt keine Fehler im Konsolenprotokoll, aber das gleiche funktioniert überhaupt nicht. Es wurde sowohl im Konstruktor als auch im ConnectedCallback versucht, aber kein Glück.
connectedCallback() {
const jq = document.createElement('SCRIPT');
jq.src = './resources/js/jquery-3.5.1.min.js';
jq.type = 'text/javascript';
this.template.appendChild(jq);
}
Wenn jemand eine Idee zum Importieren der JS-Bibliothek in Open Source LWC hat, lassen Sie es mich bitte wissen. Ich würde mich sehr über Ihre Hilfe freuen.
Antworten
Betrachten Sie die Open-Source-LWC-Rezepte
Zuerst müssen Sie jQuery in lwc web-app mit installieren
npm install jquery
. ODER jede andere Bibliothek, die Sie verwenden möchten. Nach der Installation wird die Datei imnode_modules
Ordner angezeigtJetzt müssen Sie nur noch diese Bibliotheksvariable abrufen, wo immer Sie sie benötigen. Beachten Sie, dass Sie zwar jquery verwenden können, die Elemente jedoch nicht direkt identifizieren können. dh Sie können nicht verwenden
jQuery('p')
, stattdessen sollten Sie verwendenjq(this.template.querySelector('p'))
.
Unten ist das Beispiel aus der Hallo Welt in denselben Beispielrezepten:
hallo.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>
hallo.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();
}
}
Da viele Bibliotheken $
standardmäßig verwendet werden, neige ich dazu, sie nur jq
für jquery zu verwenden.
Ausgabe:
