使用Gatsby加载外部JS文件

在现代的JavaScript Web开发工作流程中,通过npm软件包安装JavaScript是很常见的。

但是,有时我们必须包括一个外部JavaScript文件,而现代工具可能会使此操作有些困难。

特别是,我需要在自己的网站中包含来自Wistia的视频,快速浏览后,所有内容看起来都比我想要的复杂得多。

Wistia给了我这个要嵌入的HTML代码段:

<script src="https://fast.wistia.com/embed/medias/VIDEOURL.jsonp" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script><div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><div class="wistia_embed wistia_async_VIDEOURL seo=false videoFoam=true" style="height:100%;position:relative;width:100%"><div class="wistia_swatch" style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;"><img src="https://fast.wistia.com/embed/medias/VIDEOURL/swatch" style="filter:blur(5px);height:100%;object-fit:contain;width:100%;" alt="" aria-hidden="true" onload="this.parentNode.style.opacity=1;" /></div></div></div></div>

在一个“正常的” HTML网站上,也许像我通常用Hugo构建的那样,这简直太简单了。

我只是将此代码添加到我的页面中。

但是在Gatsby页面中,哪个是React组件?

我看了看一些插件,但没有人真正做到我想要的。

该解决方案可能有点“棘手”,但是却像个魅力一样起作用,我仍然觉得自己可以控制正在发生的事情。

我将HTML代码添加为JSX,可以正确转换所有HTML属性:class -> classNamearia-hidden -> ariaHidden以及样式-使用类似https://magic.reactjs.net/htmltojsx.htm使其快速。

然后,我将此代码添加到gatsby-browser.js文件以添加我需要的脚本,页面加载:

const addScript = url => {
  const script = document.createElement("script")
  script.src = url
  script.async = true
  document.body.appendChild(script)
}

export const onClientEntry = () => { window.onload = () => { addScript(https://fast.wistia.com/embed/medias/9rvl8vgrzg.jsonp) addScript(https://fast.wistia.com/assets/external/E-v1.js) } }

免费下载我的JavaScript初学者手册


更多js教程: