如何在Gatsby页面上包含本地javascript? [英] How to include local javascript on a Gatsby page?

问题描述

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

I'm a total React newbie and I guess there is something fundamental I don't quite understand here. A default Gatsby page looks like this. Is there a way to use a local .js file somewhat like this?

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

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

What I would like to achieve is to have react ignore script.js but still have the client side use it. A default Gatsby page looks like this, is it possible to do somerthing like that there?

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

推荐答案

经过数小时的挫折，我终于偶然发现讨论在GitHub上为我解决了这个问题.在盖茨比，有一个叫做静态文件夹的东西，其中一个用例包括捆绑代码之外的一个小脚本.

After several hours of frustration I finally stumbled upon discussion on GitHub that solved this for me. In Gatsby, there is a thing called static folder, for which one use case is including a small script outside of the bundled code.

在相同情况下的其他任何人，请尝试按以下步骤进行操作:

Anyone else in the same situation, try proceeding as follows:

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

将脚本script.js放在文件夹static中.

将脚本包含在具有react-helmet 的react dom中.

Include the script in your react dom with react-helmet.

因此，对于我在原始问题中发布的代码，例如:

So in the case of the code I posted in my original question, for instance:

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>

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

This would have saved hours of my time, hopefully this does it for someone else.

这篇关于如何在Gatsby页面上包含本地javascript?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！