我可以检测Webpack是否正在处理我的脚本吗？ [英] Can I detect if my script is being processed by Webpack?

问题描述

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

I'm trying to use isomorphic rendering in React so I can output static HTMLs as documentation for my application.

问题是我有一个特定的组件仅在客户端上运行，因为它引用窗口。解决方案很明显：不要在服务器上呈现它。是的，我无法在服务器上呈现它，但我仍然需要将它包含在我的 webpack 包中，以便我可以在客户端上呈现它。问题是，阻止我的组件在服务器上呈现的代码是：

The problem is that I have a particular component that only runs on the client, because it references window. The solution is obvious: Not to render it on the server. Yes, I can not to render it on the server, but still, I need it to be included in my webpack bundle so I can render it on the client. The problem is that, the code that prevents my component from rendering on the server is:

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

但 isServer（） webpack 正在捆绑时，>也是 true ，我想让它在 webpack时正常工作正在运行。

But isServer() is also true when webpack is bundling, and I want it to work normally while webpack is running.

那么，如何检测 webpack 是否正在运行？

So, how do I detect that webpack is running?

我正在寻找这样的东西：

I'm looking for something like this:

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

现在，如果 isServer（）和！isWebpack（）。

谢谢！

编辑

这是我正在尝试构建的组件：

This is the component I'm trying to build:

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 的内容，但在客户端仍会打印我在服务器。这没有意义。

What's bugging me is that the webpack bundle includes the content of LiveSchemaEditor.js but it still prints I AM IN THE SERVER while on client. This doesn't make sense.

推荐答案

将它放在插件下的webpack配置中：

Put this in your webpack config under plugins:

new webpack.DefinePlugin({
    'process.env': {
        NODE_ENV: JSON.stringify('production'),
        APP_ENV: JSON.stringify('browser')
    }
}),

这样你就可以检查你是否在浏览器中运行：

With that you can check if you're running in a browser or not this way:

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将删除所有死代码。

Because these environment variables get replaced during the build, Webpack will not include resources that are server-only. You should always do these kinds of things in an easy way, with a simple, direct compare. Uglify will remove all dead code.

由于您之前使用过函数并且在构建期间未评估函数，因此Webpack无法知道它可以跳过的要求。

Since you used a function before and the function is not evaluated during build, Webpack wasn't able to know what requires it could skip.

（ NODE_ENV -variable应始终设置为 production 在生产模式下，因为包括React在内的许多库都使用它进行优化。）

(The NODE_ENV-variable should always be set to production in production mode, since many libraries including React use it for optimisations.)

这篇关于我可以检测Webpack是否正在处理我的脚本吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！