0

我遵循了快速入门并制作了一个有效的 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工作正常。

4

1 回答 1

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

随着内容被注入页面，您的推特提要将不会显示，添加以下代码以加载您的推文

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

我的文件夹结构如下：

在此处输入图像描述

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

于 2017-10-18T18:24:07.080 回答