오픈 소스 LWC에서 타사 JS 라이브러리 가져 오기

Question

jQuery를 가져 오는 방법에 상당한 시간을 낭비한 후 로컬 경로 또는 CDN을 사용하여 HTML에서 두 가지 방법을 얻었습니다.

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

로컬 경로 또는 CDN이있는 IN JS :

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 페이지에서 잘 작동하여 lwc 프로젝트에서 jQuery를 가져옵니다.

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

누구든지 오픈 소스 LWC에서 JS 라이브러리를 가져 오는 방법에 대해 알고 있다면 알려주세요. 도움을 주셔서 감사합니다.

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 에 사용하는 경향이 있습니다 .

산출: