nhập thư viện JS của bên thứ ba trong LWC mã nguồn mở

Question

Sau khi lãng phí thời gian đáng kể cho cách nhập jQuery, tôi đã nhận được 2 cách dưới đây trong HTML với đường dẫn cục bộ hoặc CDN:

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

IN JS với đường dẫn cục bộ hoặc 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);

Nhưng tiếc là cả hai phương pháp trên đều không hoạt động trong LWC và không có tài liệu nào về cách thực hiện tương tự.

Cách tiếp cận dưới đây hoạt động tốt trong trang index.html của tôi để nhập jQuery trong dự án lwc của tôi.

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

Tôi cũng đã lãng phí rất nhiều giờ về cách nhập CSS trong lwc vì không có tài liệu nào có sẵn về cách nhập CSS của bên thứ ba nhưng một số cách tôi đã tìm cách nhập css bằng cách sử dụng mã bên dưới

constructor() {

    super();

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

Vì vậy, tôi đã thử một số cách tiếp cận tương tự để nhập JS và điều này không gây ra bất kỳ lỗi nào trong nhật ký bảng điều khiển nhưng điều tương tự hoàn toàn không hoạt động, đã thử ở cả phương thức khởi tạo và kết nối với nhau nhưng không may mắn.

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

nếu ai có bất kỳ ý tưởng nào về cách nhập thư viện JS trong LWC mã nguồn mở thì vui lòng cho tôi biết, rất mong sự giúp đỡ của bạn.

Answer 1

Xem xét các công thức LWC mã nguồn mở

1. Trước tiên, bạn cần cài đặt jQuery trong ứng dụng web lwc bằng cách sử dụng npm install jquery. HOẶC bất kỳ thư viện nào khác mà bạn muốn sử dụng. Sau khi cài đặt, bạn sẽ thấy tệp trong node_modulesthư mục

2. Bây giờ, bạn chỉ cần lấy biến thư viện đó ở bất cứ đâu bạn cần. Lưu ý rằng mặc dù bạn có thể sử dụng jquery, nhưng bạn không thể xác định trực tiếp các phần tử. tức là, bạn không thể sử dụng jQuery('p'), thay vào đó bạn nên sử dụng jq(this.template.querySelector('p')).

Dưới đây là ví dụ từ hello world trong cùng một công thức nấu ăn mẫu:

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>

xin chào.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();
    }
}

Vì nhiều thư viện sử dụng $làm mặc định, tôi chỉ có xu hướng sử dụng jqcho jquery.

Đầu ra: