Sharepoint SPFX - 外部 javascript 加载问题

Question

我已经按照 quick start 做了一个有效的 hello world webpart。

我想包含 Twitter 小部件，因此我遵循了添加外部 JavaScript 的指南，this 链接自 git 中心

我将以下内容添加到我的 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.

url https://platform.twitter.com/widgets.js 工作正常。

Answer 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 服务，它将正常工作。

Sharepoint SPFX - 外部 javascript 加载问题

Sharepoint SPFX - external javascript loading issue

sharepoint

spfx