импортировать стороннюю JS-библиотеку в LWC с открытым исходным кодом

Question

Потратив значительное количество времени на импорт jQuery, я получил два способа в HTML с локальным путем или CDN:

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

В JS с локальным путем или 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);

Но, к сожалению, оба вышеупомянутых метода не работают в LWC, и нет документации о том, как это сделать.

Нижеприведенный подход отлично работает на моей странице index.html для импорта jQuery в мой проект lwc.

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

Я также потратил так много часов на то, как импортировать CSS в lwc, поскольку нет документации по импорту стороннего CSS, но кое-как мне удалось импортировать CSS, используя приведенный ниже код

constructor() {

    super();

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

Итак, я попробовал аналогичный подход для импорта JS, и это не дает никаких ошибок в журнале консоли, но то же самое вообще не работает, пробовал как в конструкторе, так и в connectedCallback, но не повезло.

connectedCallback() {
        const jq = document.createElement('SCRIPT');
        jq.src = './resources/js/jquery-3.5.1.min.js';
        jq.type = 'text/javascript';
        this.template.appendChild(jq);
    }

Если у кого-нибудь есть идеи о том, как импортировать библиотеку JS в LWC с открытым исходным кодом, дайте мне знать, буду очень признателен за вашу помощь.

Answer 1

Рассмотрим рецепты LWC с открытым исходным кодом

1. Сначала вам нужно установить jQuery в веб-приложение lwc, используя npm install jquery. ИЛИ любую другую библиотеку, которую вы хотите использовать. После установки вы увидите файл в node_modulesпапке

2. Теперь вам просто нужно получить эту библиотечную переменную, где вам нужно. Обратите внимание, что, хотя вы можете использовать jquery, вы не можете напрямую идентифицировать элементы. т.е. вы не можете использовать jQuery('p'), вместо этого вы должны использовать jq(this.template.querySelector('p')).

Ниже приведен пример из hello world в тех же примерах рецептов:

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

Поскольку многие библиотеки используют $по умолчанию, я предпочитаю использовать только jqjquery.

Выход: