Question

我想在服务器端渲染一个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无关，webpack只是一个捆绑包，它的工作就是不实际加载文件。再一次，如果我理解得很好，这应该由我的节点服务器完成，它实际上呈现了React组件。

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

问题是require（＆＃39; jquery＆＃39;）在此上下文中不起作用。在这里（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(...)
});

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

Answer 1

过去我使用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);

Answer 2

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

反应服务器端，webpack

2 个答案: