Komut dizimin Webpack tarafından işlenip işlenmediğini tespit edebilir miyim?

Question

React içinde izomorfik rendering kullanmaya çalışıyorum, bu yüzden statik HTML'leri uygulamamın belgeleri olarak verebiliyorum.

Sorun şu ki, yalnızca istemcide çalışan belirli bir bileşenim var, çünkü window. Çözüm açıktır: Sunucuda işlemek için değil. Evet, sunucu üzerinde işlem yapamıyorum, ancak yine de, webpack paketime dahil edilmesine ihtiyacım var, böylece istemci üzerinde oluşturabiliyorum. webpack donatılacak zaman

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

Ama isServer() da true ve webpack çalışırken ben normalde çalışmak istiyorum: Sorun sunucuda render benim bileşeni engelleyen kodu olmasıdır.

webpack'un çalıştığını nasıl anlarım?

böyle bir şey arıyorum:

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

Şimdi müvekkilim yalnızca bileşeni normalde eğer isServer() ve !isWebpack() hale getirebilir.

Teşekkürler!

DÜZENLEME

Bu benim kurmaya çalışıyorum bileşenidir:

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; 

Beni rahatsız eden webpack paket LiveSchemaEditor.js içeriğini içerdiğini ama yine de istemci üzerinde I AM IN THE SERVER süre yazdırır . Bu mantıklı değil. eklentileri altında webpack config

Answer 1

koyun bu: aldığımızda

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

bir tarayıcıda veya olmasın bu şekilde çalıştırıyorsanız olmadığını kontrol edebilirsiniz:

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(); 
} 

Bu ortam değişkenleri olsun Çünkü Yapı sırasında değiştirilen Webpack, yalnızca sunucu olan kaynakları içermez. Basit, doğrudan bir karşılaştırmayla, bu tür şeyleri her zaman kolay bir şekilde yapmalısınız. Uglify tüm ölü kodları kaldıracaktır.

Daha önce bir işlev kullandıysanız ve yapı derleme sırasında değerlendirilmediğinden, Webpack nelerin atlanabileceğini bilmeyi bilmiyordu.

(NODE_ENV daima birçok kütüphaneler de dahil olmak üzere bu yana, üretim modunda production ayarlı optimizasyonlar için kullanmak tepki edilmelidir -Değişken.)

Answer 2

Ayrıca bu yapabileceğini - Ben

typeof __webpack_require__ === 'function' 

Bunu tahmin etmek her an değişebilir, bu yüzden dikkatli kullanın. :/