jQuery 在 webpack 中需要一个带有文档的窗口答案

【问题标题】：jQuery requires a window with a document in webpackjQuery 在 webpack 中需要一个带有文档的窗口
【发布时间】：2016-08-31 03:25:06
【问题描述】：

我正在使用 ReactJS.net（服务器端渲染），当我在 Webpack 中使用 jquery 时出现错误这是我的错误

渲染“Components.ToDoListSkeleton”时出错 “react_0LmYYfSk30qdrKJQe4McUQ”：错误：jQuery 需要一个带有文档在 module.exports (Script Document [5]:51:87) -> module.exports=global.document?factory(global,true):function(w){if(!w.document){throw new Error("jQuery 需要一个带有文档的窗口");}return factory(w);};}else {factory(global);} // 如果 window 不是，则传递这个尚未定义在新的 ToDoListSkeleton（脚本文档 [5]:26:903）在 ReactCompositeComponentMixin._constructComponentWithoutOwner (脚本文档 [2]:8271:28) 在 ReactCompositeComponentMixin._constructComponent (脚本文档 [2]:8253:22) 在 ReactCompositeComponentMixin.mountComponent (脚本文档 [2]:8172:22) 在 ReactReconciler.mountComponent（脚本文档 [2]:1977:36）在脚本文档 [2]:19549:37 在 Mixin.perform（脚本文档 [2]:3788:21）在 renderToStringImpl（脚本文档 [2]:19544:25）在 renderToString（脚本文档 [2]:19574:11） at Script Document [7] [temp]:1:16 Line: 19549 Column:37

这是我的 webpack 配置

"use strict";

var path = require('path');
var WebpackNotifierPlugin = require('webpack-notifier');
var webpack = require("webpack");
module.exports = {
    context: path.join(__dirname, 'Content'),
    entry: {
        server: './server'
    },
    output: {
        path: path.join(__dirname, 'build'),
        filename: '[name].bundle.js'
    },
    module: {
        loaders: [
            // Transform JSX in .jsx files
            { test: /\.jsx$/, loader: 'jsx-loader?harmony' },
            { test: require.resolve("jquery"), loader: "expose?$!expose?jQuery" }
        ]
    },
    resolve: {
        // Allow require('./blah') to require blah.jsx
        extensions: ['', '.js', '.jsx']
    },
    externals: {
        //// Use external version of React (from CDN for client-side, or
        //// bundled with ReactJS.NET for server-side)
        react: "React"
    },
    plugins: [
      new WebpackNotifierPlugin(),
      new webpack.ProvidePlugin({
          $: "jquery", 
          jQuery: "jquery", 
          "window.jQuery": "jquery",    
      })
    ]
};

任何帮助或建议将不胜感激，谢谢。

【问题讨论】：

标签： reactjs webpack reactjs.net

【解决方案1】：

jQuery 仅设计用于浏览器，并且不支持服务器端渲染。您需要从您想要在服务器端使用的任何代码中删除 jQuery。

【讨论】：

感谢您的回复，但您能告诉我如何通过 webpack 捆绑库吗？我的情况是我有许多外部库，例如 bootraps、jQuery、moment js，我不想放它在脚本
这不是真的。有一个jsdom 包可用于服务器端渲染。
@maxple - 当然可以，但是如果您想进行服务器端渲染，您实际上需要 jQuery 的哪些部分？ jsdom 是一个非常重的依赖项，你最好重写你的代码，使其不与 jQuery 耦合。
需要 jsdom 以便他们可以使用 jquery 来操作服务器上的文档。我不太确定您所说的严重依赖是什么意思。当您说它不应该与 jquery 绑定时，您是什么意思？喜欢写纯js吗？