Chargement d'un fichier JS externe à l'aide de Gatsby

Dans le flux de travail de développement Web JavaScript moderne, il est assez courant d'installer JavaScript via des packages npm.

Parfois, cependant, nous devons inclure un fichier JavaScript externe, et les outils modernes peuvent rendre cela un peu difficile.

En particulier, j'ai eu besoin d'inclure une vidéo de Wistia dans mon site, et après un rapide coup d'œil, tout avait l'air bien plus compliqué que ce que je voulais.

Wistia m'a donné cet extrait de code HTML à intégrer:

<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>

Sur un site HTML «normal», peut-être construit avec Hugo comme je le fais habituellement, ce serait extrêmement simple.

J'ajouterais simplement ce code à ma page.

Mais dans une page Gatsby, quel est un composant React?

J'ai regardé quelques plugins mais personne n'a vraiment fait ce que je voulais.

La solution est peut-être un peu «hacky», mais a fonctionné comme un charme et j'ai toujours le sentiment d'avoir le contrôle sur ce qui se passe.

J'ai ajouté le code HTML en tant que JSX, convertissant correctement tous les attributs HTML:class -> className,aria-hidden -> ariaHiddenet les styles - utilisez un outil commehttps://magic.reactjs.net/htmltojsx.htmpour faire vite.

Ensuite, j'ai ajouté ce code augatsby-browser.jsfichier pour ajouter les scripts dont j'avais besoin, au chargement de la page:

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) } }

Téléchargez mon gratuitManuel du débutant JavaScript


Plus de tutoriels js: