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

Question

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

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

我想要实现的是让react忽略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>
)

Answer 1

经过几个小时的挫折，我终于偶然发现了 discussion在 GitHub 上为我解决了这个问题。 Gatsby 里有一个东西叫static folder ，其中一个用例是在捆绑代码之外包含一个小脚本。

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

1. 在项目的根目录下创建一个static文件夹。

2. 将脚本 script.js 放入文件夹 static 中。

3. 将脚本包含在您的react dom中使用react-helmet。

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

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>

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