นำเข้าไลบรารี JS ของบุคคลที่สามใน LWC แบบโอเพนซอร์ส

Aug 16 2020

หลังจากเสียเวลาไปมากในการนำเข้า jQuery แล้วฉันได้รับ HTML 2 วิธีด้วย local path หรือ 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 แบบโอเพนซอร์สโปรดแจ้งให้เราทราบจะขอขอบคุณอย่างยิ่งสำหรับความช่วยเหลือของคุณ

คำตอบ

1 salesforce-sas Aug 16 2020 at 22:52

พิจารณาสูตรอาหาร LWC แบบโอเพนซอร์ส

  1. ก่อนอื่นคุณต้องติดตั้งjQueryใน lwc web-app โดยใช้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>

สวัสดี 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();
    }
}

เนื่องจากห้องสมุดหลายแห่งใช้$เป็นค่าเริ่มต้นฉันมักจะใช้jqสำหรับ jquery

เอาท์พุต: