在开源 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>

我还浪费了很多时间在如何在 lwc 中导入 CSS，因为也没有关于导入第三方 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

我们需要做的第一件事是将JQuery JS文件添加到 静态资源。静态资源应该看起来像 下面：

JQuery Static Resource

在 LWC（Lightning Web 组件）中包含 JQuery

​​>

在JS Controller中，我们首先需要从
导入loadScript()方法 闪电/平台资源加载器模块。我们还可以包括 loadStyle 方法，如果我们想包含一个外部 CSS 文件。

导入 { loadScript, loadStyle } 来自 '闪电/平台资源加载器';

也导入我们之前创建的静态资源。查看 此实现在 Lightning Web 中包含静态资源 组件。

最后，在 renderCallback 方法中，调用我们的 loadScript 之前导入并传递对当前模板的引用（this） 和静态资源。此方法返回 Promise。然后（） 如果 Promise 被解决，函数将被调用。捕获（） 如果有错误，函数将被执行。我们正在使用 renderCallback 因为我们想在组件加载脚本后 在 UI 上加载和呈现。

现在，要访问 Lightning Web 组件中的 JQuery 方法，有 是一些问题。理想情况下，有多种方法可以调用 JQuery 方法。最常见的如下：

$(".className").hide();

这将隐藏具有 class=”className” 的元素。但在闪电 Web 组件，我们必须像下面这样使用它：

$(this.template.querySelector('.className')).hide();

就是这样。我们只需要使用引用元素 查询定位器。然后，我们就可以调用 JQuery 方法了。

   import { LightningElement } from 'lwc';  
   import { loadScript, loadStyle } from 
   'lightning/platformResourceLoader';    
   import jQuery from '@salesforce/resourceUrl/JQuery';  

lwcJquery.js

   import { LightningElement } from 'lwc';
   import { loadScript, loadStyle } from 
   'lightning/platformResourceLoader';
   import jQuery from '@salesforce/resourceUrl/JQuery';

   export default class LwcJquery extends LightningElement {

    renderedCallback(){
    loadScript(this, jQuery)
    .then(() => {
        console.log('JQuery loaded.');
    })
    .catch(error=>{
        console.log('Failed to load the JQuery : ' +error);
    });
    }

    slideIt(event){
    $(this.template.querySelector('.panel')).slideToggle("slow");
    }

    slideRight(event){
    $(this.template.querySelector('.innerDiv')).animate({left: 
    '275px'});
    }
    }

这里，我使用了slideToggle() 和animate() JQuery 方法来添加 一些动画。