Sharepoint SPFX - 外部JavaScript加载问题

Question

我已经跟随quick start并制作了一个工作问候世界网站。

我想要包含twitter小部件，所以我按照指南添加了外部JavaScript，this是从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

这里看起来有两个问题。

This may be a problem with a HTTPS certificate. - 此错误似乎来自Twitter的结束，我们无法对此做任何事情。

其次，widgets.js是非AMD。所以，你需要加载它有点不同。

参考 - Loading a non-AMD module

要解决这些问题，我在本地下载了https://platform.twitter.com/widgets.js文件并将其添加到另一个文件夹中。

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

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

在这里，我在解决方案的根目录下创建了一个名为scripts的文件夹，并在那里添加了js文件。

修改您的import语句并添加如下所示替换它：

require("widgets");

当内容被注入页面时，您的Twitter Feed将不会显示，请添加以下代码以加载您的推文

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

我的文件夹结构如下：

现在，运行gulp serve，它将正常工作。