web-dev-qa-db-fra.com

Comment inclure jQuery dans un projet Gatsby.js?

J'expérimente avec gatsby.js depuis un certain temps et tout va bien sauf pour ce problème, je ne peux pas inclure de scripts jQuery dans l'application pour qu'il se charge après le rendu de l'application gatsby, j'ai les balises de script incluses dans le fichier html.js et l'a chargé, mais il semble que le code soit exécuté avant de réagir rend le contenu à l'écran que j'ai essayé d'utiliser simple-load-script ainsi que de l'inclure sur le componentDidMount méthode sur l'application html.js. Mais sans chance, voici le code source de mon fichier html.js:

html.js

import React from "react"
import PropTypes from "prop-types"

export default class HTML extends React.Component {
  componentDidMount() {
    console.log('hello world');
  }
  render() {
    return (
      <html {...this.props.htmlAttributes}>
        <head>
          <meta charSet="utf-8" />
          <meta httpEquiv="x-ua-compatible" content="ie=Edge" />
          <meta
            name="viewport"
            content="width=device-width, initial-scale=1, shrink-to-fit=no"
          />
          {this.props.headComponents}
        </head>
        <body>
          {this.props.preBodyComponents}
          <div
            key={`body`}
            id="___gatsby"
            dangerouslySetInnerHTML={{ __html: this.props.body }}
          />
          {this.props.postBodyComponents}
        </body>
      </html>
    )
  }
}

HTML.propTypes = {
  htmlAttributes: PropTypes.object,
  headComponents: PropTypes.array,
  bodyAttributes: PropTypes.object,
  preBodyComponents: PropTypes.array,
  body: PropTypes.string,
  postBodyComponents: PropTypes.array,
}

Comme vous pouvez le voir, j'ai remplacé la méthode componentDidMount() pour écrire sur la console et il n'y a rien qui empêche cette méthode de s'exécuter.

Si quelqu'un a de l'expérience, merci de partager.

jqueryreactjsgatsbyjamstack
7
Jonathan Kumar

Une autre façon d'ajouter jQuery à votre projet Gatsby - en utilisant gatsby-ssr.js et gatsby-browser.js:

Ajouter jQuery à gatsby-ssr.js

Vous devez créer un gatsby-ssr.js à votre racine si vous n'en avez pas déjà un.

const React = require("react")

export const onRenderBody = ({ setHeadComponents }, pluginOptions) => {
  setHeadComponents([
    <script
      src="https://code.jquery.com/jquery-3.4.1.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
      crossOrigin="anonymous">
    </script>,
  ])
}

Cela placera votre balise de script en haut de la note: Si vous exécutez un environnement de développement, vous devez le réexécuter pour faire fonctionner gatsby-ssr.js

Ajoutez votre code à gatsby-browser.js

Vous devez créer un gatsby-browser.js à votre racine si vous n'en avez pas déjà un. Ce sera l'endroit pour vos codes:

const $ = require("jquery")

export const onInitialClientRender = () => {
  $(document).ready(function () {
    console.log("The answer is don't think about it!")
  });
}

Cette méthode met votre code dans le common.js Vous pouvez également utiliser d'autres API pour exécuter votre code: API du navigateur Gatsby doc

Avertissement

C'est un peu hacky et en général, il n'est pas vraiment recommandé d'utiliser jQuery avec Gatsby mais pour des solutions rapides, cela fonctionne très bien.

De plus, html.js n'est pas recommandé par les guides Gatsby:

La personnalisation de html.js est une solution de contournement lorsque l'utilisation des API appropriées n'est pas disponible dans gatsby-ssr.js. Pensez à utiliser onRenderBody ou onPreRenderHTML au lieu de la méthode ci-dessus. En outre, la personnalisation de html.js n'est pas prise en charge dans un thème Gatsby. Utilisez plutôt les méthodes API mentionnées.

2
rosszember