导入 jquery webpack 反应盖茨比答案

【问题标题】：import jquery webpack react Gatsby导入 jquery webpack 反应盖茨比
【发布时间】：2018-02-23 07:24:32
【问题描述】：

我正在使用 Gatsby 并导入 jquery。

当我运行Gatsby build 时，出现以下错误：

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

这是由于 Gatsby 进行服务器端渲染。

我已经阅读了 GitHub 上的许多问题（this one 是我能找到的最好的问题）。

我的代码如下所示：

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？

【问题讨论】：

标签： javascript reactjs webpack gatsby

【解决方案1】：

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

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

我还建议您找到一个更轻量级的插件，它可以在不依赖 jQuery 的情况下执行相同的操作。在 React 堆栈中使用 jQuery 很可惜。也许其他人可以推荐一个。

【讨论】：

【解决方案2】：

彼得，I recently reported this to jQuery maintainers，但他们礼貌地告诉我......好吧......踢石头。会很好，如果你也能在这件事上纠缠他们一点。

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

解决整个问题的方法是您实际上不必在服务器端导入jQuery 或其插件。所以我的方法是创建 2 个单独的入口点文件 - app.jsx 和 server.jsx - 分别用于客户端包和服务器端包，Layout.jsx 作为共享根组件。

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

我只在 app.jsx 包中导入 jquery，所以在客户端它存在。在服务器端，它永远不会被导入，也不会包含在服务器包中。

大家可以看看my blog's code，我是怎么在里面设置Webpack的，server rendering是怎么设置的。

【讨论】：