Question

我有一个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文件对于网站正常运行至关重要，因此不能忽略。

Answer 1

我不知道这是否仍然是您的问题，但几天前您的话就像我的话。我使用此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...

我希望它对其他人有帮助

在盖茨比中使用jQuery和外部脚本

1 个答案: