我正在尝试在 React 中使用同构渲染,以便可以将静态 HTML 作为文档输出为我的应用程序。
问题是我有一个仅在客户端上运行的特定组件,因为它引用了 window
。解决方案很明显:不在服务器上渲染它。是的,我不能在服务器上渲染它,但我仍然需要将它包含在我的 webpack
包中,以便我可以在客户端上渲染它。问题是,阻止我的组件在服务器上呈现的代码是:
function isServer() {
return ! (typeof window != 'undefined' && window.document);
}
但是 isServer()
在 webpack
捆绑时也是 true
,我希望它在 webpack
正在运行。
那么,我如何检测到 webpack
正在运行?
我正在寻找这样的东西:
function isWebpack() {
// what do I put here?
}
如果 isServer()
和 !isWebpack()
现在我可以正常渲染我的客户端组件。
谢谢!
编辑
这是我正在尝试构建的组件:
function isServer() {
return ! (typeof window != 'undefined' && window.document);
}
import React from 'react';
const LED = React.createClass({
render: function () {
if(!isServer()) {
var LiveSchemaEditor = require('../../src/components/LiveSchemaEditor.js');
return <LiveSchemaEditor />;
}
return <div>I AM IN THE SERVER</div>;
}
});
export default LED;
困扰我的是 webpack
包包含 LiveSchemaEditor.js
的内容,但它仍然打印 I AM IN THE SERVER
时客户。这没有意义。
最佳答案
把它放在你的 webpack 配置中的插件下:
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production'),
APP_ENV: JSON.stringify('browser')
}
}),
您可以通过这种方式检查您是否在浏览器中运行:
if (process.env.APP_ENV === 'browser') {
const doSomething = require('./browser-only-js');
doSomething();
} else {
const somethingServer = require('./server-only-js');
somethingServer();
}
if (process.env.APP_ENV !== 'browser') {
const somethingServer = require('./server-only-js');
somethingServer();
}
因为这些环境变量在构建过程中会被替换,所以 Webpack 不会包含仅服务器的资源。您应该始终以简单的方式做这些事情,并进行简单直接的比较。 Uglify 将删除所有死代码。
由于您之前使用过一个函数并且在构建过程中没有评估该函数,Webpack 无法知道它可以跳过什么要求。
(在生产模式下,NODE_ENV
-变量应始终设置为 production
,因为包括 React 在内的许多库都使用它进行优化。)
关于javascript - 我可以检测我的脚本是否正在被 Webpack 处理吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32217165/