使用 Gatsby 加載外部 JS 檔案

在現代 JavaScript 網頁開發工作流中，通常會使用 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 組件，該怎麼做呢？

我查看了一些插件，但沒有一個真正符合我的需求。解決方案可能有些「hacky」，但效果非常好，而且我仍然覺得對發生的事情有掌控權。

我將 HTML 片段轉換成了 JSX，並正確地轉換了所有的 HTML 屬性：class -> className，aria-hidden -> ariaHidden，以及樣式 - 可以使用像 htmltojsx 這樣的工具來快速轉換。

然後，我將這段程式碼添加到 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")
 }
}