0

これを含むさまざまな記事を読んでいますが、 spfx Web パーツ内で 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 が定義されていません):

  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 Web パーツで jQuery を使用できるようにするには、他に何ができますか?

編集:しようとするimport * as jQuery from 'jQuery'と、このエラーが発生します:

ここに画像の説明を入力

4

1 に答える 1