Importieren Sie die JS-Bibliothek eines Drittanbieters in Open Source LWC

Aug 16 2020

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

1 salesforce-sas Aug 16 2020 at 22:52

Betrachten Sie die Open-Source-LWC-Rezepte

  1. 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 im node_modulesOrdner angezeigt

  2. Jetzt 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 verwenden jq(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 jqfür jquery zu verwenden.

Ausgabe: