使用 Gatsbyjs 包含本地 JS 和 CSS 文件

我对这个完全陌生gatsbyjs生态系统，同时我正在学习一些reactjs。我最近购买了一个 html 模板，并尝试将其用作 UIgatsbyjs应用。该模板有很多 css 和 js，无论是专有的还是定制的，这意味着没有插件gatsbyjs来替换它们。也就是说，我剩下的唯一选择是将它们直接添加为link and scripts中的标签gatsbyjs应用。在一些教程之后，我看到他们建议导入这些文件，问题是这些文件不是webpack友好，导致多个错误并且应用程序无法编译。 按照此帮助页面Gatsby 服务器渲染 API获取此代码gatsby-ssr.js file:

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永远不会暴露给浏览器。当你打开开发者工具似乎存在，但绝对不存在：

我需要做什么才能正确渲染这些 .js 文件并且浏览器可以看到它们？这也适用于 .css 文件

经过更广泛的搜索后，我找到了几篇提供解决方案的文章。这是第一种方法：

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

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将热重载。

NOTE：在这两种方法中，文件都必须位于static folder

以下是我找到此方法的链接：

如何在 Gatsby 页面上包含本地 JavaScript？

如何使用 gatsby-browser 插入外部脚本？