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

小编典典

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

reactjs

我是React的新手，我猜这里有些基本的东西我不太了解。默认的盖茨比页面如下所示。有没有办法使用本地.js文件呢？

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

我想实现的是让反应忽略，script.js但仍然让客户端使用它。默认的盖茨比页面如下所示，是否可以在该页面上做类似的事情？

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>
)

阅读 418

2020-07-22

共1个答案

小编典典

经过数小时的挫折，我终于偶然发现了在GitHub上为我解决的讨论。在Gatsby中，有一个叫做“
静态文件夹”的东西，一个用例是在捆绑的代码之外包括一个小的脚本。

在相同情况下的其他任何人，请尝试如下进行操作：

创建一个文件夹static到您的项目的根目录。
将您的脚本script.js放在文件夹中static。
使用react-helmet 将脚本包含在您的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>

这样可以节省我的时间，希望可以为其他人节省时间。

2020-07-22