jQuery 在 SPFx 中未定义

Question

我一直在阅读各种文章，包括这篇文章 use jquery functions within spfx webpart，但我似乎无法 jQuery 使用我的 SPFx webpart。

我的第一次尝试是将加载放在全局范围内：

  public constructor() {
    super();
    SPComponentLoader.loadCss('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
    SPComponentLoader.loadCss('https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css');

    SPComponentLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js', { globalExportsName: 'jQuery' }).then((jQuery: any): void => {
      SPComponentLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/js/bootstrap.min.js', { globalExportsName: 'jQuery' }).then((): void => {
      });
    });
  }

尽管在构造函数中，上面的代码会导致我的渲染函数中出现错误（jQuery 未定义）：

  public render(): void {
        this.domElement.innerHTML = /* etc...*/

      const webpart: ContactFormSimpleWebPartWebPart = this;

      // assign handlers
      jQuery('#btn-submit-contact-form-simple').on('click', function() {
        webpart.SubmitContactFormSimple();
      });

      // assign vars
      this.Category = jQuery('#sel-category');
      this.Message = jQuery('#txt-message');
      this.ErrorContainer = jQuery('#div-contact-form-simple-errors');
  }

接下来，我尝试为版本 2 添加类型（据我所知，这是 SPFx 支持的最高版本）：

npm install @types/jquery@2.0.48 --save-dev

  "externals": {
    "jquery": {
      "path": "https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js",
      "globalName": "jQuery"
    }
  },

上面的代码会导致大量类似如下的编译错误：

ReferenceError: jQuery is not defined

我什至尝试将它直接添加到渲染中，这不会导致任何错误，只是没有任何反应！没有显示结果 HTML。"):

  public render(): void {

      SPComponentLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js', { globalExportsName: 'jQuery' }).then((jQuery: any): void => {
      SPComponentLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/js/bootstrap.min.js', { globalExportsName: 'jQuery' }).then((): void => {
          this.domElement.innerHTML = /* etc...*/

          const webpart: ContactFormSimpleWebPartWebPart = this;

          // assign handlers
          jQuery('#btn-submit-contact-form-simple').on('click', function() {
            webpart.SubmitContactFormSimple();
          });

          // assign vars
          this.Category = jQuery('#sel-category');
          this.Message = jQuery('#txt-message');
          this.ErrorContainer = jQuery('#div-contact-form-simple-errors');
      });
    });
  }

我什至尝试在初始化时添加它：

  protected onInit(): Promise<void> {
    SPComponentLoader.loadCss('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
    SPComponentLoader.loadCss('https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css');

    SPComponentLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js', { globalExportsName: 'jQuery' }).then((jQuery: any): void => {
      SPComponentLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/js/bootstrap.min.js', { globalExportsName: 'jQuery' }).then((): void => {
      });
    });

    return Promise.resolve(undefined);
  }

我还可以尝试在我的 SPFx web 部件中使用 jQuery 什么？

编辑： 当我尝试 import * as jQuery from 'jQuery' 时出现此错误：

Answer 1

你试过 import * as jQuery from 'jQuery' 了吗？我在网上找到一篇文章，它与外部设备有不同的设置。不要使用路径和全局名称，只需将 "jquery": "https://code.jquery.com/jquery-2.1.1.min.js" 替换为您要用于 js 文件的路径。

https://blog.mastykarz.nl/sharepoint-framework-client-side-web-parts-jquery-plugins-cdn/

jQuery 在 SPFx 中未定义

jQuery Undefined in SPFx

sharepoint

jquery

spfx