Question

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

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

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

Answer 1

有多种方法可以在GatsbyJS中添加脚本...

要在特定页面上执行脚本

创建您的script.js文件并将其放置在/src文件夹内的任何位置。
转到要在其中执行脚本的页面（例如/pages/myPage.js），然后使用require()在useEffect()内部执行脚本，如下所示：
```
 useEffect(() => {
   // This runs the script
   const myScript = require('../script.js')
 }, [])

 return <div />
```

要在客户端上运行它，可以检查window文件中的script.js对象：

 if(typeof window !== 'undefined' && window.document) {
    // Your script here...
 }

如果要在每个组件/页面中全局执行脚本，则可以使用html.js文件。

首先，您必须通过运行以下命令来提取文件（以防万一您没有提取文件）：

cp .cache/default-html.js src/html.js

在您的html.js文件中：

<script dangerouslySetInnerHTML= {{ __html:`
  // your script here...
`}} />

Answer 2

如果您想使用Gatsby插件（对我而言，该插件与使用Helmet这样的外部库没有什么不同（插件毕竟是npm软件包）），则可以使用gatsby-plugin-load-script。

您可以提供src属性的URL或本地路径。如果要将JS存储在本地文件中，例如some-minified-js.min.js，请确保将其存储在项目根目录的static目录中。

执行此操作后，就可以通过全局对象进行访问：

global.<object or func name here>

例如，我试图通过一个缩小的文件包含一个很小的JS库，因此我将文件存储在/static/my-minified-library.min.js中，然后：

安装了插件：npm i --save gatsby-plugin-load-script
将此添加到了我的gatsby-config.js

plugins: [
    {
      resolve: "gatsby-plugin-load-script",
      options: {
        src: "/my-minified-library.min.js",
      },
    },
  ],

像这样访问我的react组件：

useEffect(() => {
  const x = new global.MyImportedLibraryObject();
}, []}

Answer 3

React适用于动态DOM。但是要通过浏览器呈现它，您的Web服务器应该发送一个静态索引页，其中React将作为另一个script标签被包含。

因此，请查看您的index.html页面，您可以在public文件夹中找到该页面。例如，您可以在其中将script标记插入标头部分。

Answer 4

Gatsby在src文件夹中使用html.js。不是像大多数React项目那样的index.html。

示例html.js文件：

import React from "react"
import PropTypes from "prop-types"

export default class HTML extends React.Component {
  render() {
    return (
      <html {...this.props.htmlAttributes}>
        <head>
          <meta charSet="utf-8" />
          <meta httpEquiv="x-ua-compatible" content="ie=edge" />
          <meta
            name="viewport"
            content="width=device-width, initial-scale=1, shrink-to-fit=no"
          />
          {this.props.headComponents}
        </head>
        <body {...this.props.bodyAttributes}>
          {this.props.preBodyComponents}
          <div
            key={`body`}
            id="___gatsby"
            dangerouslySetInnerHTML={{ __html: this.props.body }}
          />
          {this.props.postBodyComponents}
        </body>
      </html>
    )
  }
}

HTML.propTypes = {
  htmlAttributes: PropTypes.object,
  headComponents: PropTypes.array,
  bodyAttributes: PropTypes.object,
  preBodyComponents: PropTypes.array,
  body: PropTypes.string,
  postBodyComponents: PropTypes.array,
}

要在dangerouslySetInnerHTML内使用src/html.js添加自定义Javascript：

<script
  dangerouslySetInnerHTML={{
    __html: `
            var name = 'world';
            console.log('Hello ' + name);
        `,
  }}
/>

您可以尝试在其中添加js，但是请注意，您的js可能无法正常工作。您可以随时查看react-helmet以获得更多动态应用程序，并将脚本添加到<head>。

盖茨比文档：https://www.gatsbyjs.org/docs/custom-html/

Answer 5

经过数小时的挫折，我终于在GitHub上偶然发现discussion，为我解决了这个问题。在盖茨比，有一种叫做static folder的东西，一个用例是在捆绑的代码之外包括一个小的脚本。

其他处于相同情况的人，请尝试按以下步骤操作：

在项目的根目录创建一个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>

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

Answer 6

您可以使用Gatsby插件"gatsby-plugin-load-script."

轻松完成此操作

只需执行以下操作：

在gatsby应用程序的根目录下创建一个名为static的文件夹
将脚本放入其中
在gatsby-config.js

    {
      resolve: 'gatsby-plugin-load-script',
      options: {
        src: '/test-script.js', // Change to the script filename
      },
    },

Answer 7

只需在根文件夹上创建@ViewChild文件

并为您的脚本文件夹添加以下模式

gatsby-ssr.js

然后，在dom结束时，您将看到脚本的链接

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

7 个答案: