使用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教程: