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

Proper way to include a .js file in gatsby which executes its code on all the pages

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

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

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

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

中

方法二
已将 html.js 复制到 src 文件夹并通过 script 标签添加文件。

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

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

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

更新

目前，我通过保留方法 4 并将整个代码从 gatsby-browser.js 中的 main.js 复制到 onRouteUpdate 下，如下所示：

const $ = require("jquery");

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

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

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

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

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

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

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

Called when the Gatsby browser runtime first starts.

脚本将在第一次呈现时以及使用锚点而不是使用 @reach/router（<Link> 和 navigate）浏览页面时触发。