Sharepoint SPFX - 外部 javascript 加载问题答案

【问题标题】：Sharepoint SPFX - external javascript loading issueSharepoint SPFX - 外部 javascript 加载问题
【发布时间】：2017-10-19 19:53:48
【问题描述】：

我已关注quick start 并制作了一个有效的hello world webpart。

我想包含 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 工作正常。

【问题讨论】：

标签： sharepoint spfx

【解决方案1】：

这里似乎有 2 个问题。

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 文件。

修改您的导入语句并添加替换如下：

require("widgets");

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

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

我的文件夹结构如下：

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

【讨论】：