我可以检测Webpack是否正在处理我的脚本吗？

Question

我正在尝试在React中使用同构渲染,因此我可以输出静态HTML作为我的应用程序的文档.

问题是我有一个只在客户端上运行的特定组件,因为它引用了window.解决方案很明显:不要在服务器上呈现它.是的,我不能在服务器上呈现它,但仍然,我需要将它包含在我的webpack包中,以便我可以在客户端上呈现它.问题是,阻止我的组件在服务器上呈现的代码是:

function isServer() {
    return ! (typeof window != 'undefined' && window.document);
}

但isServer()也是true在webpack捆绑时,我希望它在webpack运行时正常工作.

那么,我如何检测到它webpack正在运行？

我正在寻找这样的东西:

function isWebpack() {
    // what do I put here?
}

现在我可以正常渲染我的客户端组件if 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在客户端仍然可以打印.这没有意义.

Answer 1

把它放在插件下的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-variable应始终设置为production生产模式,因为包括React在内的许多库都将其用于优化.)

Answer 2

你也可以这样做 -

typeof __webpack_require__ === 'function'

我猜这可能会随时改变,所以谨慎使用.:/