在Gatsby中使用jQuery和外部脚本

我有一个盖茨比网站，需要使用外部javascript和jQuery文件——存储在项目根目录的

static

文件夹中

到目前为止，我已经尝试使用

React头盔

，

Gatsby SSR

和

Gatsby浏览器

方法，但这些方法似乎都不起作用。我的方法概述如下

旁注：脚本确实“有时”加载

React Helmet

，但并不总是加载，并且在运行

gatsby build

后根本不会加载到生产版本中

使用React头盔

在我的

layout.js

文件中，我使用React-Helmet包含脚本引用，如下所示：

<Helmet>
    <script src={withPrefix("js/jquery-3.4.1.min.js")}></script>
    <script src={withPrefix("js/plugins.js")}></script>
    <script src={withPrefix("js/common-template.js")}></script>
</Helmet>

这也不起作用，并且在检查浏览器工具时，在回迁中，它会导致

无法加载请求的资源

。但是，我可以在网页资源中的

scripts

下看到该文件

使用盖茨比浏览器

我在

gatsby browser.js

文件中使用以下代码：

import { withPrefix } from "gatsby"
const React = require("react")

export const onRenderBody = ({ setPostBodyComponents }) => {
  setPostBodyComponents([
    <script key="jquery" src={withPrefix("js/jquery-3.4.1.min.js")} defer />,
    <script key="plugins" src={withPrefix("js/plugins.js")} defer />,
    <script
      key="common-template"
      src={withPrefix("js/common-template.js")}
      defer
    />,
  ])
}

const addScript = url => {
  const script = document.createElement("script")
  script.src = url
  script.async = true
  document.body.appendChild(script)
}

export const onClientEntry = () => {
  window.onload = () => {
    addScript("js/jquery-3.4.1.min.js")
    addScript("js/plugins.js")
    addScript("js/common.js")
  }
}

然而，这与

gatsby ssr.js

方法的结果是一样的

---

有人能告诉我这里出了什么问题以及如何解决这个问题吗？jQuery和

common template.js

文件对于网站的正常运行至关重要，不能忽视。

我不知道这是否仍然是你关心的问题，但几天前你的话和我的一样。我解决了使用此react自定义挂钩的问题：

import { useEffect } from 'react';
const useScript = async resourceUrl=> {
  useEffect(() => {
    const script = document.createElement('script');
    script.async = false;
    script.src = resourceUrl;
    document.body.appendChild(script);

return () => {
      document.body.removeChild(script);
    }
  }, [resourceUrl]);
};
export default useScript;

并这样称呼它：

import useScript from '@/hooks/useScript';
....
import '@/assets/css/styles.css';//not important
import { Helmet } from 'react-helmet';// just an example

const Home: React.FC<PageProps> = () => {
useScript(withPrefix('/js/jquery-3.5.1.min.js'));
useScript(withPrefix('/js/bootstrap.min.js'));
useScript(withPrefix('/js/slick.min.js'));
useScript(withPrefix('/js/latinise_compact.js'));
useScript(withPrefix('/js/scripts.js'));

return (
  <>
    <Helmet>// and so on...

从'@/hooks/useScript'导入useScript'；
....
导入“@/assets/css/styles.css”//不重要
从“react Helmet”导入{Helmet}；//只是一个例子
常量Home:React.FC=（）=>{
useScript（带前缀（'/js/jquery-3.5.1.min.js'）；
useScript（带前缀（'/js/bootstrap.min.js'）；
useScript（带有前缀（'/js/slick.min.js'）；
useScript（带前缀（'/js/latinise_compact.js'）；
useScript（带前缀（'/js/scripts.js'））；
返回(
//等等。。。

---

我希望它能帮助其他人

你的文件夹结构是什么样子的？你的静态文件夹在正确的位置吗？是的，静态文件夹在根目录中并且位置正确-引用静态文件夹中的图像可以正常工作。