Gatsbyを使用して外部JSファイルをロードする

最新のJavaScriptWeb開発ワークフローでは、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で構築されているので、非常に単純です。

このコードを自分のページに追加するだけです。

しかし、ReactコンポーネントであるGatsbyページでは？

私はいくつかのプラグインを見ましたが、誰も私が望んでいたことを本当にしませんでした。

解決策はおそらく少し「ハッキー」ですが、魅力のように機能し、何が起こっているのかを自分で制御できると感じています。

HTMLコードをJSXとして追加し、すべてのHTML属性を適切に変換しました。class -> className、aria-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ビギナーズハンドブック

Gatsbyを使用して外部JSファイルをロードする

その他のjsチュートリアル：