オープンソースのLWCにサードパーティのJSライブラリをインポートする

Aug 16 2020

jQueryのインポート方法にかなりの時間を費やした後、ローカルパスまたはCDNを使用したHTMLで2つの方法を下回りました。

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

ローカルパスまたはCDNを使用する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では機能せず、同じ方法に関するドキュメントはありません。

以下のアプローチは、私のlwcプロジェクトにjQueryをインポートするために私のindex.htmlページでうまく機能します。

<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ライブラリをインポートする方法について誰かが何か考えを持っているなら、私に知らせてください、あなたの助けを大いに感謝します。

回答

1 salesforce-sas Aug 16 2020 at 22:52

オープンソースのLWCレシピを検討する

  1. まず、を使用してlwcweb-appにjQueryをインストールする必要がありますnpm install jquery。または、使用したい他のライブラリ。インストール後、node_modulesフォルダ内のファイルが表示されます

  2. これで、必要な場所でそのライブラリ変数を取得する必要があります。jqueryを使用することはできますが、要素を直接識別することはできないことに注意してください。つまり、を使用することはできません。jQuery('p')代わりに、を使用する必要がありますjq(this.template.querySelector('p'))

以下は、同じサンプルレシピのhelloworldの例です。

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

多くのライブラリ$がデフォルトで使用しているので、私jqはjqueryに使用する傾向があります。

出力: