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

Question

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

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

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

方法一
将整个代码放在gatsby-browser.js的onInitialClientRender中

方法二
复制src文件夹中的html.js并通过script标记添加文件。

方法三
按照这个答案并将整个代码放在

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

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

更新

现在，我通过保留方法 4 并从main.js下onRouteUpdate gatsby-browser.js中的gatsby-browser.js复制整个代码来main.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 ）。