importer une bibliothèque JS tierce dans LWC open source

Question

Après avoir perdu beaucoup de temps sur la façon d'importer jQuery, je suis tombé en dessous de 2 façons en HTML avec un chemin local ou un CDN:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

EN JS avec chemin 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);

Mais malheureusement, les deux méthodes ci-dessus ne fonctionneront pas dans LWC et il n'y a pas de documentation disponible sur la façon de faire de même.

L'approche ci-dessous fonctionne bien dans ma page index.html pour importer jQuery dans mon projet lwc.

<script src="./resources/js/jquery-3.5.1.min.js"></script>

J'ai également perdu tellement d'heures sur la façon d'importer du CSS dans lwc car il n'y a pas de documentation disponible sur l'importation de CSS tiers également, mais comment j'ai réussi à importer du CSS en utilisant le code ci-dessous

constructor() {

    super();

    const styles = document.createElement('link');
    styles.href = './resources/css/bootstrap.css';
    styles.rel = 'stylesheet';
    this.template.appendChild(styles);
}

J'ai donc essayé une approche similaire pour importer JS et cela ne donne aucune erreur dans le journal de la console, mais la même chose ne fonctionne pas du tout, essayé à la fois dans le constructeur et dans connectedCallback mais pas de chance.

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 quelqu'un a une idée sur la façon d'importer la bibliothèque JS dans LWC open source, veuillez me le faire savoir, j'apprécierais beaucoup votre aide.

Answer 1

Considérez les recettes LWC open source

1. Vous devez d'abord installer jQuery dans l'application Web lwc à l'aide de npm install jquery. OU toute autre bibliothèque que vous souhaitez utiliser. Après l'installation, vous verrez le fichier dans le node_modulesdossier

2. Maintenant, il vous suffit d'obtenir cette variable de bibliothèque là où vous en avez besoin. Notez que bien que vous puissiez utiliser jquery, vous ne pouvez pas identifier les éléments directement. c'est-à-dire que vous ne pouvez pas utiliser jQuery('p'), à la place vous devez utiliser jq(this.template.querySelector('p')).

Voici l'exemple de hello world dans les mêmes exemples de recettes:

bonjour.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>

bonjour.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();
    }
}

Comme de nombreuses bibliothèques l'utilisent $par défaut, j'ai simplement tendance à utiliser jqpour jquery.

Production: