Включая локальные JS и CSS файлы с использованием Gatsbyjs

Question

Я совершенно новичок в экосистеме Гэтсби js, и в то же время я немного изучаю reactjs. Недавно я купил шаблон html и пытался использовать его в качестве пользовательского интерфейса в приложении gatsby js. В шаблоне есть множество css и js, проприетарных или по стоимости, что означает, что в gatsby js нет плагинов для их замены. Тем не менее, единственный вариант, который я оставил, это добавить их непосредственно как теги link и scripts в приложении gatsby js. Следуя некоторым учебникам, которые я видел, они предлагают импортировать эти файлы, проблема в том, что эти файлы не являются webpack дружественными, что приводит к многочисленным ошибкам, и приложение не компилируется. После этой страницы справки API рендеринга Gatsby Server перейдите к этому коду в файле gatsby-ssr.js:

const React = require("react")
exports.onRenderBody = ({ setBodyAttributes, setPostBodyComponents }) => {
  setBodyAttributes({
    "data-spy":"scroll",
    "data-offset":"73",
    "data-target":"#navbar-demos"
  })
  setPostBodyComponents([
    <script
      key="1"
      type="text/javascript"
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.js"
    />,
    <script
      key="2"
      type="text/javascript"
      src="./src/revolution/js/extensions/revolution.extension.actions.min.js"
    />,
  ])
}

проблема в том, что этот файл revolution.extension.actions.min.js никогда не открывается браузеру. при открытии Developer Tools кажется там, но это определенно не так:

Что мне нужно сделать, чтобы правильно отобразить эти файлы. js и браузер может их увидеть? Это также относится к css файлам

.

Answer 1

После более тщательного поиска я нашел пару статей с решением. Это был первый подход:

import { withPrefix } from "gatsby"
import Helmet from "react-helmet"

const IndexPage = () => (
  <div>
    <Helmet>
        <script src={withPrefix('revolution/js/extensions/revolution.extension.actions.min.js')} type="text/javascript" />
    </Helmet>

  </div>
)
export default IndexPage

Это второй подход с использованием файла gatsby-ssr.js:

const React = require("react")

exports.onRenderBody = ({setPostBodyComponents}) => {
          setPostBodyComponents([
            <script key="1" src={'js/plugins/plugins.js'} type="text/javascript" />,
            <script type="text/javascript" src={"js/beauty.custom.js"}/>
          ]);
  };

, таким образом теги сценариев будут добавляться в конце body вместо head

Я думаю, что второй является лучшим, но нужно учитывать, что каждый раз, когда вы что-то меняете в файле gatsby-ssr.js, нужно останавливать gatsby develop и перезапустите это.

В первом случае при использовании react-helmet произойдет горячая перезагрузка.

ПРИМЕЧАНИЕ : в обоих подходах файлы должны находиться в папке static

Вот ссылки, по которым я нашел этот подход:

Как включить локальный javascript на странице Gatsby?

Как вставить внешний скрипт с помощью gatsby-browser?