如何在Gatsby.js项目中包含jQuery？_Jquery_Reactjs_Gatsby_Jamstack

如何在Gatsby.js项目中包含jQuery？

jquery reactjs gatsby

如何在Gatsby.js项目中包含jQuery？,jquery,reactjs,gatsby,jamstack,Jquery,Reactjs,Gatsby,Jamstack,我已经用gatsby.js做了一段时间的实验，除了这个问题，一切都进行得很顺利，我不能将jQuery脚本包含到应用程序中，以便在gatsby应用程序渲染后加载，我已经将脚本标记包含到html.js文件中并加载了它，但似乎代码是在react将内容呈现到屏幕之前执行的，我尝试使用simple load script并将其包含在html.js应用程序的componentDidMount方法中。但如果运气不好，下面是我的html.js文件的源代码： html.js import React from "

我已经用gatsby.js做了一段时间的实验，除了这个问题，一切都进行得很顺利，我不能将jQuery脚本包含到应用程序中，以便在gatsby应用程序渲染后加载，我已经将脚本标记包含到

html.js

文件中并加载了它，但似乎代码是在react将内容呈现到屏幕之前执行的，我尝试使用

simple load script

并将其包含在

html.js

应用程序的

componentDidMount

方法中。但如果运气不好，下面是我的

html.js

文件的源代码：

html.js

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

export default class HTML extends React.Component {
  componentDidMount() {
    console.log('hello world');
  }
  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.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,
}

从“React”导入React
从“道具类型”导入道具类型
导出默认类HTML扩展React.Component{
componentDidMount（）{
log（'helloworld'）；
}
render（）{
返回(
{this.props.headComponents}
{this.props.preBodyComponents}
{this.props.postBodyComponents}
)
}
}
HTML.propTypes={
HtmlatAttributes:PropTypes.object，
headComponents:PropTypes.array，
bodyAttributes:PropTypes.object，
preBodyComponents:PropTypes.array，
正文：PropTypes.string，
postBodyComponents:PropTypes.array，
}

正如您所看到的，我替换了

componentDidMount（）

方法来向控制台进行写操作，但是没有任何东西阻止该方法执行

如果有人对此有经验，请分享，谢谢。

如果您想将jQuery作为外部（从CDN加载）添加到gastby，这有点棘手。您需要：

将jquery CDN添加到
```
html.js
```

将

external

添加到

gatsby node.js中的网页配置中

将jQuery添加到

html.js

⚠️ 编辑：这应通过盖茨比ssr完成，请参阅

您可能已经这样做了：

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

，然后添加

// src/html.js
<head>
  <script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossOrigin="anonymous"
  />
</head>

用法现在，在

componentDidMount

中，您可以执行以下操作

import$from'jquery'//重要提示：区分大小写。
componentDidMount（）{
$（'h1'）.css（'color'，'red'）；
}

为什么区分大小写当我们设置

external:{X:Y}

时，我们实际上是在告诉webpack“无论我在哪里

import X

”，在全局范围内查找

。在我们的例子中，webpack将在

窗口中查找jQuery
。jQuery以两个名称将自身附加到窗口：jQuery
和$
。这就是为什么大写的Q很重要
此外，为了举例说明，您还可以执行：external:{foo:jQuery}
并将其像import$from foo
一样使用。它应该仍然有效
希望有帮助
 将jQuery添加到Gatsby项目的另一种方法-使用Gatsby-ssr.js和Gatsby-browser.js：
将jQuery添加到gatsby-ssr.js
如果您还没有根目录，则需要创建一个gatsby-ssr.js
const React = require("react")

export const onRenderBody = ({ setHeadComponents }, pluginOptions) => {
  setHeadComponents([
    <script
      src="https://code.jquery.com/jquery-3.4.1.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
      crossOrigin="anonymous">
    </script>,
  ])
}

此方法将代码放入common.js中
您还可以使用其他API来运行代码：doc
免责声明
这是一个有点黑客，一般来说，不建议将jQuery与Gatsby一起使用，但对于快速修复，它工作得很好
此外，《盖茨比指南》不推荐使用html.js：
定制html.js是一种变通解决方案，适用于gatsby-ssr.js中无法使用适当API的情况。考虑使用OnnReordObor或OnPrimeNordHTML代替上面的方法。作为进一步考虑，Gatsby主题中不支持自定义html.js。改用前面提到的API方法
逗号不应该在}之后和render（）之前吗？@muka.gergely你在说什么？JS中的方法之间没有逗号。值得注意的是，这些说明可以在网页文档中找到。另外，你应该接受这个答案。我同意达维坎特的观点，但是，我认为德雷克恩圭做了额外的努力，并具体说明了盖茨比到底要做什么。文档讨论了一个通用的解决方案，而这个答案是正确的。例如，一些新用户不知道在文档中添加exports.onCreateWebpackConfig vs module.exports。我在build上遇到一个网页错误，无法找到模块“jQuery”有人知道原因吗？
const $ = require("jquery")

export const onInitialClientRender = () => {
  $(document).ready(function () {
    console.log("The answer is don't think about it!")
  });
}