个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-03 13:23:04 24 4
gpt4 key购买 nike

我已经尝试使用 gatsby.js 一段时间了，除了这个问题之外，一切都很顺利，我无法将 jQuery 脚本包含到应用程序中，以便它在 gatsby 应用程序渲染后加载，我已经包含了script 标记到 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,
}

如您所见，我替换了 componentDidMount() 方法来写入控制台，并且没有任何东西阻止该方法执行。

如果有人有这方面的经验，请分享，谢谢。

最佳答案

如果你想将 jQuery 作为外部(从 CDN 加载)添加到gastby，这有点棘手。您需要:

  • 将 jquery CDN 添加到 html.js
  • 将 external 添加到 gatsby-node.js 中的 webpack 配置

将 jQuery 添加到 html.js

⚠️ Edit: This should be done via gatsby-ssr, please refer @rosszember answer for context..

您可能已经这样做了: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 配置

我们需要向 webpack 通报 jQuery。

//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 将在 window 中查找 jQuery。 jQuery 将自身附加到具有 2 个名称的窗口:jQuery 和 $。这就是为什么大写的 Q 很重要。

另外，为了说明这一点，您还可以执行: external: { foo: jQuery } 并像 import $ from foo 一样使用它。它应该仍然有效。

希望有帮助!

关于jquery - 如何在 Gatsby.js 项目中包含 jQuery？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54468240/

24 4 0
文章推荐： reactjs - 使用 redux thunk 测试异步操作
文章推荐： twitter-bootstrap - react : Render new row every 4th column
文章推荐： reactjs - React 测试库 - 检查空 div 是否存在
文章推荐： jquery - 使用 Jquery 和 Bootstrap 以及 Es6 Import for React App
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com