बेबेल और वेबपैक में गतिशील रूप से मॉड्यूल कैसे लोड करें?

Question

मैं ES6 में गतिशील मॉड्यूल लोडिंग सुविधा का उपयोग करने की कोशिश कर रहा हूं और ऐसा लगता है कि यह वास्तव में अभी तक लागू नहीं हुआ है। लेकिन ES6 Module Loader Polyfill जैसे विकल्प हैं जो माना जाता है कि समय के लिए चाल चलनी चाहिए।

तो मेरे पास बैबेल और वेबपैक का उपयोग कर ES5 के लिए एक ES6 प्रोजेक्ट पारदर्शी है, और यह अपने आप ठीक काम करता है। लेकिन मेरा पूरा कोड एक bundle.js फ़ाइल में विलय कर दिया गया है जिसे मैं मॉड्यूल में विभाजित करना चाहता हूं। और जब मैंने उल्लिखित पॉलीफिल का प्रयास किया, तो यह भीतर से कुछ त्रुटि फेंकता है और परियोजना भी शुरू नहीं होगी।

index.js:6 Uncaught TypeError: Cannot read property 'match' of undefined 

और लाइन 6 में लिखा है:

{ 
    "dependencies": { 
    "es6-module-loader": "^0.17.11", 
    "events": "^1.1.0", 
    "flux": "^2.1.1", 
    "fs": "0.0.2", 
    "react": "^15.0.2", 
    "react-addons-css-transition-group": "^15.0.2", 
    "react-dom": "^15.0.2", 
    "react-router": "^2.4.0", 
    "react-tap-event-plugin": "^1.0.0", 
    }, 
    "devDependencies": { 
    "babel-core": "^6.8.0", 
    "babel-loader": "^6.2.4", 
    "babel-preset-es2015": "^6.6.0", 
    "babel-preset-react": "^6.5.0", 
    "html-webpack-plugin": "^2.16.1", 
    "react-hot-loader": "^1.3.0", 
    "transfer-webpack-plugin": "^0.1.4", 
    "webpack": "^1.13.0", 
    } 
} 

किसी कृपया मुझे Webpack और कोलाहल के साथ गतिशील मॉड्यूल लोड हो रहा है की एक काम उदाहरण को इंगित कर सकते हैं:

var filePrefix = 'file:' + (process.platform.match(/^win/) ? '/' : '') + '//'; 

यहाँ मेरी package.js फ़ाइल है?

Answer 1

यहां वास्तव में तीन चीजें हैं ... dynamicimporting, आलसी लोडिंग, और कोड विभाजन/बंडलिंग।

हालांकि, सबसे transpilers require.ensure को System.load कॉल परिवर्तित करने का समर्थन नहीं करते तो आप ऐसा करने के लिए सीधे अगर आप चाहते हैं: System.import विधि, पाली से भरे ES6 Module Loader साथ गतिशील आयात लेकिन नहीं गतिशील code splitting की अनुमति देगा गतिशील कोड विभाजन का उपयोग करने के लिए।

गतिशील कोड विभाजन तब होता है जब आप एक प्रविष्टि बिंदु के भीतर बाल बंडल बनाते हैं, जिसे आप गतिशील रूप से आलसी लोड कर सकते हैं। इसके लिए मैं promise-loader जो require.ensure की तुलना में अधिक अनुकूल एक सा है का उपयोग कर की सिफारिश करेंगे:

import LoadEditor from 'promise?global,[name]!./editor.js'; 

... 

if (page === 'editor') { 
    LoadEditor().then(Editor => { 
    // Use the Editor bundle... 
    }) 
} 

Webpack अब टूट जाएगा editor.js मॉड्यूल और यह सभी के लिए एक अलग बंडल जो तुरंत या गतिशील लोड किया जा सकता में निर्भरता है (जैसा दिखाया है ऊपर)। अंत में, ऐप के आकार के आधार पर, मुझे लगता है कि आपको splitting the vendor code out पर भी विचार करना चाहिए।

अद्यतन

System.import कल्पना से हटा दिया और बस import() द्वारा की जगह किया गया था। नए वेबपैक दस्तावेज़ों में वेबपैक में page that discusses dynamic imports और उनकी सीमाएं हैं।