Gatsby JS 中的自定义 Javascript答案

【问题标题】：Custom Javascript in Gatsby JSGatsby JS 中的自定义 Javascript
【发布时间】：2018-05-27 15:34:18
【问题描述】：

我创建了一些我希望在每次页面加载或刷新时触发的小脚本函数。下面是一个为第三方库 Anime JS 构建的示例，但它大多是任意的，因为它对于我的所有脚本函数都是同一个问题。

import anime from 'animejs'

    if (typeof window !== `undefined`) {
      var bioLayerIn = anime.timeline();
      bioLayerIn
      .add({
        targets: ['.color-layer'],
        translateX: '100%',
        easing: 'easeInOutQuint',
        duration: 400
      })
      .add({
        targets: ['.color-layer'],
        translateX: '200.1%',
        easing: 'easeInOutQuint',
        duration: 430,
        delay:5
      });
      }

由于某种原因，它仅在我编辑脚本并保存它时运行一次，并且在我对脚本进行更改并再次保存之前不再运行。我不确定如何让 Gatsby/React 运行 javascript 函数传统上运行的方式，即每次加载/刷新页面时。我确信这与 Gatsby 链接和路由页面的方式有关。

我知道 Gatsby 处理自定义 JS 的方式有所不同，因为它是基于框架构建的，但 Gatsby 的文档中没有明确的答案来解释这一点。 This 页面讨论了添加自定义 js，但如果它用于第三方库，则不讨论

目前我的脚本位于 /src/js/custom.js

【问题讨论】：

标签： javascript reactjs gatsby static-site anime.js

【解决方案1】：

这是因为代码只会在加载后运行（切换页面时不会重新加载）。我需要使用https://www.gatsbyjs.org/docs/browser-apis/#onRouteUpdate 来挂钩 gatsby-browser.js 中的路由更改事件

Source

【讨论】：

你不能只使用 React 的lifecycle methods 吗？
我不确定。我可以吗？
不，你不能，因为组件只会安装一次。您可以添加听众window.addEventListener('load', this.invokeMe);