オープンソースのLWCにサードパーティのJSライブラリをインポートする
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ライブラリをインポートする方法について誰かが何か考えを持っているなら、私に知らせてください、あなたの助けを大いに感謝します。
回答
オープンソースのLWCレシピを検討する
まず、を使用してlwcweb-appにjQueryをインストールする必要があります
npm install jquery
。または、使用したい他のライブラリ。インストール後、node_modules
フォルダ内のファイルが表示されますこれで、必要な場所でそのライブラリ変数を取得する必要があります。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に使用する傾向があります。
出力: