दोनों नोड और ब्राउज़र में वेबपैक बाहरी

Question

मेरे पास एक आइसोमोर्फिक रिएक्ट एप्लिकेशन है जो ब्राउज़र और सर्वर दोनों में चलता है। मैं दो अलग-अलग वेबपैक चलाकर दो अलग-अलग प्रविष्टि बिंदुओं और विभिन्न कॉन्फ़िगरेशन के माध्यम से दोनों के लिए एक ही कोड बनाता हूं।

समस्या यह है कि बाह्य स्क्रिप्ट टैग (इस उदाहरण में Google मानचित्र) के माध्यम से ब्राउज़र विंडो पर मौजूद बाहरी फ़ाइल सर्वर पर नोड में चलते समय स्पष्ट रूप से मौजूद नहीं होगी। कोड प्रविष्टि बिंदु फ़ाइल को छोड़कर समान है।

index.html:

// index.html 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=XXX"></script> 

सरलीकृत config:

// Server Webpack config 
{ 
    entry: 'server.js', 
    target: 'node', 
    externals: { 
     google: google 
    } 
} 

// Client Webpack config 
{ 
    entry: 'client.js', 
    target: 'browser', 
    externals: { 
     google: google 
    } 
} 

घटक:

// The view which builds and runs fine in 
// the client but doesn't run on the server. 
var React = require('react'), 
    css = require('./style.css'), 
    google = require('google'); // Nope, not on the server obviously! 

var Component = React.createClass({ 

    render: function() { 
     return (
      <div> 
       // Do maps stuff 
      </div> 
     ); 
    } 

}); 
module.exports = Component; 

मेरा प्रश्न है मैं यह कैसे संभाल चाहिए?

Error: Cannot find module 'google' 

मेरे पास वर्तमान में एक समाधान है जिसे मैं पूरी तरह से उत्सुक नहीं हूं।

// Server Webpack config 
{ 
    entry: 'server.js', 
    target: 'node', 
    externals: { 
     google: google 
    }, 
    plugins: [ 
     new webpack.DefinePlugin({ 'ENV.browser': false }), 
    ] 
} 

// Client Webpack config 
{ 
    entry: 'client.js', 
    target: 'browser', 
    externals: { 
     google: google 
    }, 
    plugins: [ 
     new webpack.DefinePlugin({ 'ENV.browser': true }), 
    ] 
} 

// The component 
var React = require('react'), 
    css = require('./style.css'); 

if (ENV.browser) { 
    var google = require('google'); 
} 

var Component = React.createClass({ 

    render: function() { 
     return (
      <div> 
       if (ENV.browser) { 
        // Do maps stuff 
       } 
      </div> 
     ); 
    } 

}); 
module.exports = Component; 

Answer 1

आपने मॉड्यूल Dustan Kasten से एक विचार के अनुसार, एक NOOP साथ बदलने के लिए NormalModuleReplacementPlugin उपयोग कर सकते हैं:

{ 
    plugins: [ 
    new webpack.NormalModuleReplacementPlugin(/^google$/, 'node-noop'), 
    ], 
}