SPFx中未定义jQuery

我一直在阅读各种文章，包括这篇文章，但我似乎无法让jQuery使用我的SPFx Web部件

我的第一次尝试是将加载置于全局范围：

  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未定义））：

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

npm安装@types/jquery@2.0.48--保存开发人员

上述情况会导致大量编译错误，类似于以下情况：

ReferenceError:未定义jQuery

我甚至尝试将其直接添加到渲染中，这不会导致任何错误，除非什么都没有发生！不会显示结果HTML。“）：

我甚至尝试在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);
  }

受保护的onInit（）：承诺{
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'}）。然后（（jQuery:any）：void=>{
SPComponentLoader.loadScript（'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/js/bootstrap.min.js“，{globalExportsName:'jQuery'}）。然后（（）：void=>{
});
});
返回承诺。解决（未定义）；
}

我还可以尝试在SPFx Web部件中使用jQuery吗

编辑：当我尝试从“jQuery”导入*为jQuery时，出现以下错误：

---

您是否尝试从“jQuery”以jQuery的形式导入？我在网上找到一篇文章，该文章的外部设置不同。不使用路径和全局名称，只需输入“jQuery”：“替换您要用于js文件的路径”

---

看起来您正在使用相同的

globalExportName

将jQuery和bootstrap加载到您的项目中。您可以发布一个指向github repo的链接以下拉吗？是的，这就是我从找到的一些在线资源中复制它的方式。我的存储库是本地的。我可以为您提供任何代码作为说明吗？该项目与默认的yeoman模板，除了我在扩展BaseClientSideWebPart的类中所做的更改。您是否尝试从“jQuery”以jQuery的形式导入？我在网上找到一篇文章，该文章的外部设置不同。不使用路径和全局名称，只需放置“jQuery”：https://code.jquery.com/jquery-2.1.1.min.js“不过，请替换要用于js文件的路径。我还尝试了您推荐的config.json中的替代方法，但似乎没有任何效果。我用一个截图更新了这个问题，截图显示了从“jQuery”导入时发生的情况。谢谢你的帮助！再次感谢。对于后代来说，我的答案是（用一个小q）

import*作为“jQuery”中的jQuery
  "externals": {
    "jquery": {
      "path": "https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js",
      "globalName": "jQuery"
    }
  },

  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);
  }