Как включить jQuery в проект Gatsby.js?

Я экспериментировал с gatsby.js некоторое время, и все идет хорошо, за исключением этой проблемы, я не могу включить скрипты jQuery в приложение, чтобы оно загружалось после рендеринга приложения gatsby, у меня есть включенные теги скрипта для html.js файл и загрузил его, но кажется, что код выполняется, прежде чем реагирует, отображает содержимое на экран, который я пытался использовать simple-load-script а также включить его в componentDidMount метод на html.js приложение. Но не повезло, вот исходный код моего 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,
}

Как видите, я заменил componentDidMount() метод, чтобы записать на консоль, и это не было что-то, что препятствует выполнению этого метода.

Если у кого-то есть опыт в этом, пожалуйста, поделитесь, спасибо.

Источник

1 ответ

Если вы хотите добавить JQuery в качестве внешнего (загрузка из CDN) в Gastby, это немного сложно. Вам необходимо:

  • добавить jquery CDN в html.js
  • добавлять external конфиг вебпака в gatsby-node.js

Добавить jQuery в html.js

Вы, вероятно, уже сделали это: cp .cache/default-html.js src/html.js, и добавить

// src/html.js
<head>
  <script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossOrigin="anonymous"
  />
</head>

Но есть одно предостережение: это не так, как вначале, а о происхождении. На данный момент, если вы используете $ даже в componentDidMount, он по-прежнему выдает ошибку, так как веб-пакет не знает о jquery.

добавлять external конфиг вебпака в gatsby-node.js

Нам нужно сообщить веб-пакет о JQuery.

//gatsby-node.js
exports.onCreateWebpackConfig = ({
  actions,
}) => {
  const { setWebpackConfig } = actions;
  setWebpackConfig({
    externals: {
      jquery: 'jQuery', // important: 'Q' capitalized
    }
  })
}

использование

Сейчас в componentDidMount ты можешь сделать

import $ from 'jquery' // important: case sensitive.

componentDidMount() {
  $('h1').css('color', 'red');
}

Почему регистр чувствителен

Когда мы установим external: { X: Y } По сути, мы говорим веб-пакету, где бы я ни import X посмотри на Y в глобальном масштабе. В нашем случае, веб-пакет будет искать jQuery в window, jQuery присоединяется к окну с двумя именами: jQuery а также $, Вот почему заглавная буква Q важна.

Также, для иллюстрации, вы также можете сделать: external: { foo: jQuery } и использовать его как import $ from foo, Это все еще должно работать.

Надеюсь, это поможет!

Источник

Другой способ добавить jQuery в ваш проект Gatsby - использовать gatsby-ssr.js и gatsby-browser.js:

Добавить jQuery в gatsby-ssr.js

Вам нужно создать gatsby-ssr.js в корневом каталоге, если у вас его еще нет.

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

Он поместит ваш тег скрипта в верхнюю часть примечания: если вы используете среду разработки, вам нужно запустить ее снова, чтобы gatsby-ssr.js заработал.

Добавьте свой код в gatsby-browser.js

Вам нужно создать gatsby-browser.js в корневом каталоге, если у вас его еще нет. Это будет место для ваших кодов:

const $ = require("jquery")

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

Этот метод помещает свой код в common.js Вы можете использовать другие интерфейсы API, а также для запуска кода: Гэтсби Browser API документ

Отказ от ответственности

Это немного взломано, и в целом не рекомендуется использовать jQuery с Gatsby, но для быстрых исправлений он отлично работает.

Более того, html.js не рекомендуется руководствами Gatsby:

Настройка html.js - это временное решение, когда использование соответствующих API-интерфейсов недоступно в gatsby-ssr.js. Рассмотрите возможность использования onRenderBody или onPreRenderHTML вместо описанного выше метода. Кроме того, настройка html.js не поддерживается в теме Gatsby. Вместо этого используйте упомянутые методы API.

Источник
Другие вопросы по тегам