Как включить jQuery в проект Gatsby.js? - PullRequest
Новая
       59

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

0 голосов
/ 31 января 2019

Я экспериментировал с 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 Ответ

0 голосов
/ 02 февраля 2019

Если вы хотите добавить 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>

Но есть предостережение: это крест O ригин, а неcrossorigin.На этом этапе, если вы используете $ даже в componentDidMount, он все равно выдаст ошибку, поскольку webpack не знает о jquery.

Добавьте external в конфигурацию webpack в 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 в глобальной области видимости.В нашем случае webpack будет искать jQuery в window.jQuery присоединяется к окну с двумя именами: jQuery и $.Вот почему заглавная буква Q важна.

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

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

...