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

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

javascript reactjs gatsby

如何在Gatsby页面上包含本地javascript？,javascript,reactjs,gatsby,Javascript,Reactjs,Gatsby,我是个十足的新手，我想这里有些基本的东西我不太明白。默认的盖茨比页面如下所示。有没有办法使用类似这样的本地.js文件 <script src="../script/script.js"></script> React使用动态DOM。但是，为了通过浏览器呈现它，web服务器应该发送一个静态索引页，其中React将作为另一个脚本标记包含在内所以，看看您的index.html页面，您可以在public文件夹中找到它。例如，您可以在页眉部分插入脚本标记。盖茨比在src文件夹中

我是个十足的新手，我想这里有些基本的东西我不太明白。默认的盖茨比页面如下所示。有没有办法使用类似这样的本地.js文件

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

React使用动态DOM。但是，为了通过浏览器呈现它，web服务器应该发送一个静态索引页，其中React将作为另一个

脚本

标记包含在内

所以，看看您的

index.html

页面，您可以在

public

文件夹中找到它。例如，您可以在页眉部分插入

脚本标记。
盖茨比在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,
}

您可以尝试在那里添加js，但请注意，js可能无法按预期工作。您可以随时查看更多动态应用程序，并将脚本添加到

盖茨比文档：
经过几个小时的挫折，我终于偶然发现GitHub为我解决了这个问题。在盖茨比中，有一个东西叫做，对于它，一个用例是在捆绑代码之外包含一个小脚本
任何其他处于相同情况的人，请尝试按以下步骤操作：
在项目根目录下创建一个文件夹static

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

使用react头盔将脚本包括在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>
)

以及脚本元素
<Helmet>
    <script src={withPrefix('script.js')} type="text/javascript" />
</Helmet>



这会节省我几个小时的时间，希望这能为其他人节省时间。
在GatsbyJS中添加脚本有很多方法…
在特定页面上执行脚本

创建一个无状态的scriptComponent.js
文件，并将其放在/src
文件夹中

在scriptComponent.js
中，使用require（）
执行useffect（）
中的脚本，如下所示：
 useEffect(() => {
   // This runs the script
   const myScript = require('../script.js')
 }, [])

 return <div />


最后，转到要在其中执行脚本的页面（例如/pages/myPage.js
），并添加组件



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

首先，您必须通过运行以下命令来提取文件（如果您没有这样做）：

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


在html.js
文件中：



如果您想使用Gatsby插件，对我来说，这与使用外部库（比如Hellm）没有什么不同（插件毕竟是npm包），那么您可以使用
您可以提供src
属性的url或本地路径。如果要将JS存储在本地文件中，例如一些缩小的JS.min.JS
——请确保存储在项目根目录下的静态
目录中
完成此操作后，您可以通过全局对象访问：
global.<object or func name here>

在我的react组件中访问，如下所示：
使用盖茨比插件可以很容易地做到这一点
只需这样做：
在盖茨比应用程序的根目录下创建一个名为static
的文件夹
把你的脚本放进去
在gatsby config.js
只需在根文件夹上创建gatsby ssr.js
文件
并为脚本文件夹添加以下模式
import React from 'react'

export const onRenderBody = ({ setPostBodyComponents }) => {
  setPostBodyComponents([
    <script
      key="https://code.jquery.com/jquery-3.2.1.slim.min.js"
      src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
      integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
      crossOrigin="anonymous"
      defer
    />,
    <script
      key="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
      integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
      crossOrigin="anonymous"
      defer
    />,
    <script
      key="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
      src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
      integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
      crossOrigin="anonymous"
      defer
    />
  ])
}

从“React”导入React
导出常量onRenderBody=（{setPostBodyComponents}）=>{
SetPostBody组件([
,
,
])
}

然后，在dom的末尾，您将看到指向脚本的链接
它适用于盖茨比开发模式，但未在盖茨比构建中正确包含文件。有什么建议吗？我也有很多建议。有人知道是否可以在标记之外包含脚本吗？为了提高加载速度（或者这几乎不会影响任何事情？）@Mayron如果您希望在导航时始终加载脚本，一个解决方案是在componentDidMount期间加载脚本，例如，请参见以下内容：。您也可以使用盖茨比ssr将其加载到身体底部，但也可以阅读以下内容：@Mayron也看到了这个答案：这是否适用于外部js？公众认为这是一种反应方式。
 useEffect(() => {
   // This runs the script
   const myScript = require('../script.js')
 }, [])

 return <div />

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

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

global.<object or func name here>

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

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

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

import React from 'react'

export const onRenderBody = ({ setPostBodyComponents }) => {
  setPostBodyComponents([
    <script
      key="https://code.jquery.com/jquery-3.2.1.slim.min.js"
      src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
      integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
      crossOrigin="anonymous"
      defer
    />,
    <script
      key="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
      integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
      crossOrigin="anonymous"
      defer
    />,
    <script
      key="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
      src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
      integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
      crossOrigin="anonymous"
      defer
    />
  ])
}