Sharepoint SPFX-外部JavaScript加載問題

Question

我遵循了快速入門，並制作了一個可使用的hello world Webpart。

我想包含twitter小部件，因此我已按照添加外部JavaScript的指南進行操作， 此鏈接來自git hub

我將以下內容添加到我的config.json中

"externals": {
  "widgets":"https://platform.twitter.com/widgets.js"
},

我導入

import 'widgets';

但是，出現以下錯誤

***Failed to load component "ab3668f3-39a2-4b40-a307-a1bea4023df9" (TwitterWebPart).
Original error: ***Failed to load URL 'https://platform.twitter.com/widgets.js' for resource 'widgets' in component 'ab3668f3-39a2-4b40-a307-a1bea4023df9' (TwitterWebPart). There was a network problem.
This may be a problem with a HTTPS certificate. Make sure you have the right certificate.

網址https://platform.twitter.com/widgets.js可以正常運行。

Answer 1

看起來這里有2個問題。

This may be a problem with a HTTPS certificate. -這個錯誤似乎是來自Twitter的，我們對此無能為力。

其次， widgets.js不是AMD。 因此，您需要以不同的方式加載它。

參考- 加載非AMD模塊

為了解決這些問題，我在本地下載了https://platform.twitter.com/widgets.js文件，並將其添加到另一個文件夾中。

之后，我修改了config.json ，如下所示：

"externals": {    
      "widgets": {
          "path": "scripts/widgets.js",
          "globalName": "twttr"
      }  
  },

在這里，我在解決方案的根目錄下創建了一個名為scripts的文件夾，並在其中添加了js文件。

修改您的導入語句並添加替換，如下所示：

require("widgets");

當內容注入到頁面中時，您的Twitter feed將不會顯示，請添加以下代碼以加載您的tweet

public constructor() {
  super();
  let w= require("widgets");
  setTimeout( () => w.widgets.load(), 0);
}

我的文件夾結構如下：

現在，運行gulp serve，它將正常工作。