Question

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

问题是我有一个只在客户端上运行的特定组件，因为它引用了public class MainViewPagerAdapter extends PagerAdapter { public CalendarModel[] DateList; private Context mContext; private LayoutInflater mInflater; private RelativeLayout mDateAreaLayoutInflated; public MainViewPagerAdapter(Context mContext, CalendarModel[] mDateList) { this.mContext = mContext; this.DateList = mDateList; } @Override public boolean isViewFromObject(View view, Object object) { return view == ((RelativeLayout) object); } @Override public Object instantiateItem(final ViewGroup container, final int position) { //Just instantiate items,nothing special here } @Override public void destroyItem(ViewGroup container, int position, Object object) { ((ViewPager) container).removeView((RelativeLayout) object); } @Override public int getCount() { return DateList.length; }。解决方案很明显：不要在服务器上呈现它。是的，我无法在服务器上呈现它，但仍然需要将它包含在我的window包中，以便我可以在客户端上呈现它。问题是，阻止我的组件在服务器上呈现的代码是：

webpack

但function isServer() { return ! (typeof window != 'undefined' && window.document); }捆绑时isServer()也是true，我希望它在webpack正在运行时正常工作。

那么，我如何检测到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。这没有意义。

Answer 1

将它放在plugins下的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在内的许多库都将其用于优化。）

Answer 2

您也可以这样做 -

typeof __webpack_require__ === 'function'

我猜这可能会随时改变，所以请谨慎使用。：/

Answer 3

这对我有用。

if(typeof process.env.NODE_ENV === "undefined") {
    // Not webpack
} else {
    // Its webpack
}

Answer 4

在Node.js global.global中是周期参考，Webpack没有创建该周期：

function is_node() {
    return typeof global !== 'undefined' && global.global === global;
}

Answer 5

ComponentDidMount 仅在浏览器中运行，因此您可以像这样使用它：

//file level const (cache the result)
const LiveSchemaEditor;

//...

componentDidMount() {
    LiveSchemaEditor  = require('../../src/components/LiveSchemaEditor.js');
    this.setState({ editor: <LiveSchemaEditor/> });
}

render() {
    if(!this.state.editor){
        return <div>loading...</div>;
    }

    return this.state.editor;
}

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

5 个答案: