Question

我正在尝试以编程方式在我的Webpart .ts文件中加载jquery库。

此代码可以正常工作并加载jquery：

import { SPComponentLoader } from '@microsoft/sp-loader';
import * as $ from 'jquery';

export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {

public render(): void {

SPComponentLoader.loadScript('//code.jquery.com/jquery-3.4.1.slim.min.js', 
                         {globalExportsName: '$'});

但是当我如下修改loadScript代码

SPComponentLoader.loadScript( '//code.jquery.com/jquery-3.4.1.slim.min.js',
{globalExportsName: '$'}).then(() => 
{
  alert($('a').length);
} );

我遇到以下错误

[SPLoaderError.loadComponentError]：***无法加载组件“ c2e267f8-8b0c-47d5-ba20-ba7d151da675”（HelloWorldWebPart）。原始错误：***无法从组件“ c2e267f8-8b0c-47d5-ba20-ba7d151da675”（HelloWorldWebPart）加载入口点。原始错误：加载https://component-id.invalid/c2e267f8-8b0c-47d5-ba20-ba7d151da675_0.0.1时出错，找不到模块“ jquery”

我认为问题的根源在于以下代码

alert($('a').length);

在完全加载jquery库之前正在执行。

任何有关如何解决此问题的想法将不胜感激。

Answer 1

您可以尝试这个。

SPComponentLoader.loadScript('https://code.jquery.com/jquery-2.1.1.min.js', {
              globalExportsName: 'jQuery'
            }).then(($: any) => {
              var jQuery = $;
              //jQuery("") function
            })

Answer 2

您的代码有效，谢谢！

SPComponentLoader.loadScript('https://code.jquery.com/jquery-2.1.1.min.js', {
          globalExportsName: 'jQuery'
        }).then(($: any) => {
          var jQuery = $;
          alert($('a').length);
}) ;

[SPLoaderError.loadComponentError]：找不到模块“ jquery”

2 个答案: