jQuery在SPFx中未定义

我一直在阅读各种文章，包括这篇文章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 not defined ）中导致错误：

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

我甚至尝试将它直接添加到渲染中，这不会导致任何错误，除了没有任何反应！没有显示结果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');
      });
    });
  }

我甚至尝试在init上添加它：

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 webpart中使用jQuery？

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