我已经尝试了gatsby.js一段时间，除此问题外，其他一切都进行得很好，我无法将jQuery脚本包含在应用程序中，因此在呈现gatsby应用程序后即可加载，包括在内脚本标签放到html.js文件中并加载了它，但是似乎代码是在react将内容呈现到我尝试使用simple-load-script并将其包含在{{1}上的屏幕上之前执行的componentDidMount应用中的}方法。但是没有运气，这是我的html.js文件的源代码：
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,
}
方法以写到控制台，但并没有阻止该方法执行的东西。
如果有任何经验，请分享，谢谢。
答案 0 :(得分：17)
将jQuery添加到您的Gatsby项目中的另一种方法-使用gatsby-ssr.js和gatsby-browser.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>,
])
}
它将把您的脚本标签放置在 注意：如果您正在运行开发环境，则需要再次运行它以使gatsby-ssr.js正常工作
如果您还没有根目录，则需要在根目录下创建一个gatsby-browser.js。这将是您输入代码的地方：
const $ = require("jquery")
export const onInitialClientRender = () => {
$(document).ready(function () {
console.log("The answer is don't think about it!")
});
}
此方法将您的代码放入common.js 您也可以使用其他API来运行代码：Gatsby Browser API文档
这有点hacky，通常来说，不建议将jQuery与Gatsby一起使用，但是为了快速修复，它工作得很好。
此外，Gatsby指南不建议html.js：
当gatsby-ssr.js中无法使用适当的API时，自定义html.js是一种解决方法。考虑使用onRenderBody或onPreRenderHTML代替上述方法。进一步考虑，Gatsby主题不支持自定义html.js。请改用提到的API方法。
答案 1 :(得分：2)
如果要将jQuery作为外部（从CDN加载）添加到gastby，则有点棘手。您需要：
html.js external添加到gatsby-node.js中的webpack配置中html.js 您可能已经完成了此操作：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>
但是有一个警告：它是交叉 O 绑定，而不是跨源绑定。
此时，即使您在$中使用componentDidMount，它仍然会引发错误，因为webpack不了解jquery。
external添加到gatsby-node.js中的webpack配置中我们需要将有关jQuery的信息告知webpack。
//gatsby-node.js
exports.onCreateWebpackConfig = ({
actions,
}) => {
const { setWebpackConfig } = actions;
setWebpackConfig({
externals: {
jquery: 'jQuery', // important: 'Q' capitalized
}
})
}
现在，您可以在componentDidMount中
import $ from 'jquery' // important: case sensitive.
componentDidMount() {
$('h1').css('color', 'red');
}
设置external: { X: Y }时，实际上是在告诉webpack“无论我在哪里import X”，都应在全局范围内查找Y。在我们的情况下，webpack将在jQuery中寻找window。 jQuery将自己附加到具有两个名称的窗口：jQuery和$。这就是大写Q很重要的原因。
另外，为说明起见，您也可以执行以下操作：external: { foo: jQuery }并像import $ from foo一样使用它。它仍然应该工作。
希望有帮助！