นำเข้าไลบรารี JS ของบุคคลที่สามใน LWC แบบโอเพนซอร์ส
หลังจากเสียเวลาไปมากในการนำเข้า 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 แบบโอเพนซอร์สโปรดแจ้งให้เราทราบจะขอขอบคุณอย่างยิ่งสำหรับความช่วยเหลือของคุณ
คำตอบ
พิจารณาสูตรอาหาร LWC แบบโอเพนซอร์ส
ก่อนอื่นคุณต้องติดตั้งjQueryใน lwc web-app โดยใช้
npm install jquery
. หรือไลบรารีอื่น ๆ ที่คุณต้องการใช้ หลังจากการติดตั้งคุณจะเห็นไฟล์ในnode_modules
โฟลเดอร์ตอนนี้คุณต้องได้รับตัวแปรไลบรารีทุกที่ที่คุณต้องการ โปรดทราบว่าแม้ว่าคุณจะใช้ 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
เอาท์พุต:
