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

Question

我正在尝试在 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 时客户。这没有意义。

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-变量应始终设置为 production，因为包括 React 在内的许多库都使用它进行优化。)