गतिशील मॉड्यूल के साथ कोड विभाजन?

Question

मैं प्रतिक्रिया के भीतर वेबपैक कोड कोडिंग सुविधा का उपयोग कर रहा हूं। मैं एक ऐप बना रहा हूं जहां उपयोगकर्ता एक विकल्प का चयन करेगा, और संबंधित प्रतिक्रिया घटक प्रस्तुत करेगा। हालांकि, मुझे लगता है कि कॉमनजे require.ensure का उपयोग करके केवल हार्ड कोडित तारों के साथ काम करता है। जब मैं चर का उपयोग करता हूं ऐसा लगता है कि यह काम कर रहा है, तो घटक बाहर निकलते हैं। लेकिन जब मैं नेटवर्क टैब को देखता हूं तो मुझे लगता है कि यह कोड को विभाजित नहीं करता है - यह किसी भी नए बंडल को लोड नहीं करता है। जहां मैं हार्ड कोड कहता हूं, हर बार एक नया बंडल के लिए एक कॉल होता है।

यहाँ क्या काम कर रहा है:

executeDynamic(component){ 
    var that = this; 
    switch(component){ 
     case 'SolidButton': 
      require.ensure([], function(require){ 
       DynamicModule = require(`./elements/SolidButton/index.js`); 
       that.forceUpdate(); 
      }); 
      break; 
     case 'ThreeDButton': 
      require.ensure([], function(require){ 
       DynamicModule = require(`./elements/ThreeDButton/index.js`); 
       that.forceUpdate(); 
      }); 
      break; 
     case 'NoPreview': 
      require.ensure([], function(require){ 
       DynamicModule = require(`./elements/NoPreview/index.js`); 
       that.forceUpdate(); 
      }); 
      break; 
     default: 
      break; 
    }  
} 

यहाँ है कि मैं क्या काम करना चाहते हैं:

executeDynamic(component){ 
    var that = this; 
    require.ensure([], function(require) { 
     DynamicModule = require(`./elements/${component}/index.js`); 
     that.forceUpdate(); 
    }); 
} 

Answer 1

मैं अंत में यह मिल गया !! मैंने गतिशील आवश्यकता को अपनी फ़ाइल में ले जाया है, इसलिए नीचे मेरे प्रतिक्रिया घटक से फ़ाइल को कॉल किया गया है, और फिर फ़ाइल की सामग्री। ऐसा करने के लिए आपको bundle-loader पैकेज स्थापित करना होगा।

तो यह वह जगह है जहाँ मैं कॉल करते हैं, घटक मैं लोड करना चाहते हैं के नाम के साथ this में गुजर।

loadLiveCode(that, component) { 
    req(component, function(result) { 
     DynamicModule = result; 
     that.forceUpdate(); 
    }); 
} 

और dynamicRequire.js फ़ाइल है कि हमारे गतिशील कॉल कि बंडल-लोडर का इस्तेमाल करता है की आवश्यकता होती है रखती है:

module.exports = function loadAsync(expr, callback) { 
    var bundledResult = require("bundle!./elements/" + expr + "/index.js"); 
    bundledResult(function(result) { 
    callback(result); 
    }); 
};