如何在 Gatsby 页面上包含本地 JavaScript？

我是一个完全的 React 新手，我想这里有些基本的东西我不太明白。默认的 Gatsby 页面如下所示。有没有办法像这样使用本地 .js 文件？

<script src="../script/script.js"></script>

我想要实现的是让反应忽略script.js但仍然让客户端使用它。默认的 Gatsby 页面看起来像这样，是否可以在那里做类似的事情？

import React from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"

const IndexPage = () => (
  <Layout>
    <SEO title="Home" keywords={[`gatsby`, `application`, `react`]} />
    <h1>Hi people</h1>
    <p>Welcome to your new Gatsby site.</p>
    <p>Now go build something great.</p>
    <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
      <Image />
    </div>
    <Link to="/page-2/">Go to page 2</Link>
  </Layout>
)

经过几个小时的沮丧之后我终于偶然发现讨论 https://github.com/gatsbyjs/gatsby/issues/11013#issuecomment-453698163在 GitHub 上为我解决了这个问题。盖茨比里有一种东西叫静态文件夹 https://www.gatsbyjs.org/docs/static-folder/，其中一个用例是在捆绑代码之外包含一个小脚本。

遇到同样情况的其他人，请尝试按以下步骤操作：

1. 创建文件夹static到你的项目的根目录。

2. 把你的脚本script.js在文件夹中static.

3. 将脚本包含在你的react dom中带反应头盔.

因此，就我在原始问题中发布的代码而言，例如：

import React from "react"
import Helmet from "react-helmet"
import { withPrefix, Link } from "gatsby"

import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"

const IndexPage = () => (
  <Layout>
    <Helmet>
        <script src={withPrefix('script.js')} type="text/javascript" />
    </Helmet>
    <SEO title="Home" keywords={[`gatsby`, `application`, `react`]} />
    <h1>Hi people</h1>
    <p>Welcome to your new Gatsby site.</p>
    <p>Now go build something great.</p>
    <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
      <Image />
    </div>
    <Link to="/page-2/">Go to page 2</Link>
  </Layout>
)

注意进口

import Helmet from "react-helmet"
import { withPrefix, Link } from "gatsby"

和脚本元素。

<Helmet>
    <script src={withPrefix('script.js')} type="text/javascript" />
</Helmet>

这会节省我几个小时的时间，希望对其他人也能如此。