React 服务器端，webpack答案

【问题标题】：React serverside, webpackReact 服务器端，webpack
【发布时间】：2016-06-15 13:33:39
【问题描述】：

我想在服务器端渲染一个 React 应用程序并且有依赖关系处理问题。

更准确地说，我想从cdn加载jquery并能够做到

require('jquery')

在我的应用程序文件中。在客户端一切正常，我有一个 webpack 配置文件，如下所示：

# webpack.config.js 
externals : {
    "jquery": "jQuery",
}

jquery 被简单地加载到一个 html 文件中：

# index.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

我无法在服务器端进行这项工作。如果我理解得很好，这与 webpack 无关，它只是一个捆绑器，它的工作不是实际加载文件。再说一次，如果我理解得很好，这应该由我的节点服务器来完成，它实际呈现 React 组件。

# server.js
var reactRender = require('react-render');
reactRender({path: '/abs/path/to/component.js', ...});

问题是 require('jquery') 在这种情况下不起作用。在这里 (using webpack on server side of nodejs) 我找到了一个关于如何使用 webpack 服务器端的示例，但它没有解决未安装在 node_modules 中的外部组件的问题。

我也尝试使用 script.js (https://github.com/ded/script.js) 首先从 CDN 加载 jquery 然后渲染应用程序，但它需要文档组件，这是未定义的服务器端。

# this does not work
$script(['https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'], 'bundle');
$script.ready('bundle', function() {
    reactRender(...)
});

任何想法都非常感谢！谢谢

【问题讨论】：

回答完后，我意识到您实际上需要在服务器端使用jquery功能，对吗？如果是这样，我可以提供另一个可能对您有用的答案。
嗨 cspotcode，当然，我需要 jquery 服务器端。谢谢！
好的，我编辑了我的答案。我希望它有所帮助。

标签： jquery node.js reactjs webpack

【解决方案1】：

为什么不根据你调用 webpack 的位置有条件地设置 externals 属性？使用环境变量或其他东西

【讨论】：

你的意思是像 try { var $ = require('jquery') } catch(e) { var $ } 在我的文件中？问题是我在服务器端需要它。

【解决方案2】：

过去我使用domino 结合jquery 来操作HTML 服务器端。 Domino 是 DOM 的 JavaScript 实现。我不是反应专家，但这可能对你有用：

npm install --save domino jquery

然后：

// Create a window object.  See also: https://github.com/fgnass/domino#usage
const domino = require('domino');
const window = domino.createWindow('');
const document = window.document;

// Create a jquery instance
const $ = require('jquery')(window);

【讨论】：

谢谢cspotcode，我去看看，采纳答案！