在 gatsby 中包含 .js 文件的正确方法，该文件在所有页面上执行其代码

Question

前提是
我有一个静态站点，我正在将其转换为gatsby 站点。我已经使用 jQuery 来执行某些 DOM 操作和其他触发器，例如切换移动菜单和处理 cookie。我想包含这个文件，main.js这样它里面的 JavaScript 就会在所有页面上执行。

我已经使用 npm 安装了 jQuery 并将其包含在layout.jsusing import $ from "jquery"

我无法以可靠的方式实现上述目标。以下是我尝试过但没有成功的方法。

方法 1
将整个代码放在onInitialClientRenderingatsby-browser.js

方法2
复制html.js到src文件夹中，通过script标签添加文件。

方法3
其次这个答案并放置整个代码中

<script dangerouslySetInnerHTML= {{ __html: `putYourSciptHereInBackticks `}} />

方法4
跟着这个答案，并试图使用包含的文件react-helmet。代码确实使用此方法执行，但仅在加载站点时执行。如果我遍历到其他页面，则不会，即使我回到同一页面也是如此。

更新

现在，我已经得到它通过保持方法4和复制整个工作的代码main.js在gatsby-browser.js下面onRouteUpdate就像这样：

const $ = require("jquery");

exports.onRouteUpdate = () => {
  $(document).ready(function(){
    // Code
  });
}

但是，我知道这是多余的，绝对不是正确的做事方式。

Answer 1

提供最好、最干净的解决方案gatsby-browser.js。你可以尝试这样的事情：

import yourScript from '../../your/script/path/file.js'

export const onClientEntry= () => yourScript();

正如您在Gatsby Browswer API 文档中看到的，Gatsby 提供了几种可用且合适的 API 来触发（几乎）任何所需的用例。最符合您要求的一个是onClientEntry。根据文档：

(_: emptyArg, pluginOptions: pluginOptions) => undefined

当 Gatsby 浏览器运行时首次启动时调用。

该脚本将在第一次渲染时以及使用锚点导航页面时触发，而不是使用@reach/router(<Link>和navigate)。