在 Gatsby 中使用 jQuery 和外部脚本答案

【问题标题】：Using jQuery and external scripts in Gatsby在 Gatsby 中使用 jQuery 和外部脚本
【发布时间】：2020-07-31 14:07:04
【问题描述】：

我有一个 Gatsby 网站，需要使用外部 javascript 和 jQuery 文件 - 存储在项目根目录的 static 文件夹中。

到目前为止，我已经尝试过使用React Helmet、Gatsby SSR 和Gatsby Browser 方法，但这些方法似乎都不起作用。我的方法概述如下。

附注：脚本“有时”会加载 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>

如上所述，虽然这种方法有时确实有效，但它并非一直有效，除非页面被手动刷新多次。而且生产版根本不工作。

使用 gatsby-ssr

我在gatsby-ssr.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
    />,
  ])
}

这不起作用，并且在检查浏览器工具时，在获取时，它会导致The requested resource could not be loaded。但是，我可以在网页资源中看到scripts下的文件。

使用 gatsby 浏览器

我在gatsby-browser.js 文件中使用以下代码：

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 文件对于网站的运行至关重要，不容忽视。

【问题讨论】：

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

标签： jquery reactjs jsx gatsby

【解决方案1】：

我不知道这是否仍然是你的担忧，但几天前你的话和我的一样。我使用这个反应自定义钩子解决了这个问题：

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...

希望对大家有帮助

【讨论】：