import jquery webpack react Gatsby

Question

我正在使用Gatsby并导入jquery。

当我运行“Gatsby build”时，会出现以下错误:

WebpackError: jQuery需要带有文档的窗口。

这是因为Gatsby进行了服务器端渲染。

我已经阅读了GitHub上的许多问题（其中这个是我找到的最好的一个）。

我的代码看起来像下面这样:

import React, { Component } from 'react'
import Link from 'gatsby-link'
import LandingScreen from '../components/LandingScreen'
import $ from 'jquery'
import 'fullpage.js/dist/jquery.fullPage.js'
import 'fullpage.js/dist/jquery.fullpage.css'

class TestPage extends Component {

  componentDidMount() {        
    $('#fullpage').fullpage({
        verticalCentered: false
    });
  }

  render(){

    return (
      <main id="fullpage">
        <LandingScreen />
      </main>
    )
  }
 }


export default TestPage

这个出错了，我按照上面GitHub线程尝试了下面的方法，但是还是失败了：

if (typeof window !== 'undefined') {
    import $ from 'jquery'
}

有人能够提供如何导入jquery的建议吗？

- peter flanagan

Answer 1

Gatsby的组件将在Node上运行（那里没有window对象），以生成静态HTML，并作为React组件在客户端浏览器上运行。这就是为什么您会收到此错误消息。

您要使用的插件需要仅在客户端上运行，因为它需要实际的视口尺寸才能操作。Gatsby有一个特殊的 API 可以让您在客户端上运行插件。一个快速的解决方案是在那里加载jQuery并在onClientEntry上初始化您的插件。

我还建议您找到一个更轻量级的插件，它可以在不依赖jQuery的情况下完成相同的工作。在React堆栈中使用jQuery真是太可惜了。也许别人可以推荐一个。

- kbariotis

Answer 2

Peter，我最近向jQuery维护者报告了这个问题，但他们礼貌地告诉我……好吧……让我滚蛋。如果你也能在这方面多加劝说，那就太好了。

目前，jquery 绝对需要 window 对象，因此它不能作为 Node.js 的依赖项工作。（有一个例外：如果你不需要全局 jquery 对象，而只需要一个模块中的本地实例，你可以使用 JSDom 手动初始化它，但那可能不是你的用例）

你解决这个问题的方法是，在服务器端实际上不需要导入 jQuery 或其插件。因此，我的方法是创建两个单独的入口文件 - app.jsx 和 server.jsx - 分别用于客户端捆绑和服务器端捆绑，并将 Layout.jsx 作为共享根组件。

app.jsx 和 server.jsx 是客户端捆绑和服务器端捆绑的入口点，而 Layout.jsx 包含与 html 共享的代码。

我只在app.jsx捆绑包中导入jquery，因此在客户端上它是存在的。在服务器端上它从未被导入，也不包含在服务器捆绑包中。

您可以查看我的博客代码，了解我如何设置Webpack以及如何进行服务器渲染。

- Boris Burkov