webpack

Question

का उपयोग कर क्रम पर गतिशील रूप से की आवश्यकता होती है जे एस फ़ाइलें मैं बंदरगाह के लिए घुरघुराना/requirejs webpack करने से एक पुस्तकालय कोशिश कर रहा हूँ और एक समस्या पर ठोकर खाई, इस प्रयास के लिए एक खेल ब्रेकर हो सकता है।

पुस्तकालय मैं बंदरगाह करने की कोशिश एक समारोह है, कि भार और मूल्यांकन करता है कई मॉड्यूल - हमारे एप्लिकेशन में - उनके फ़ाइल नाम है कि हम एक कॉन्फ़िग फ़ाइल से मिलता है पर आधारित है। कोड इस (कॉफी) की तरह दिखता है:

loadModules = (arrayOfFilePaths) -> 
    new Promise (resolve) -> 
    require arrayOfFilePaths, (ms...) -> 
     for module in ms 
     module ModuleAPI 
     resolve() 

require यहाँ क्रम पर कॉल किया जाना चाहिए और व्यवहार करते हैं जैसे कि यह requireJS के साथ किया था। वेबपैक केवल "बिल्ड-प्रोसेस" में क्या होता है इसके बारे में परवाह करता है।

यह कुछ ऐसा है मौलिक के बारे में webpack परवाह नहीं करता है? यदि हां, तो क्या मैं अभी भी इसके साथ आवश्यकता जेएस का उपयोग कर सकता हूं? रनटाइम के दौरान गतिशील रूप से संपत्तियों को लोड करने का एक अच्छा समाधान क्या है?

संपादित करें: loadModule मॉड्यूल, कि इस पुस्तकालय का निर्माण समय पर मौजूद नहीं हैं लोड कर सकते हैं। उन्हें ऐप द्वारा प्रदान किया जाएगा, जो मेरी लाइब्रेरी लागू करता है।

Answer 1

तो मैंने पाया कि कि "app- पर ही उपलब्ध हैं क्रम पर लोड कुछ फाइलें, के लिए मेरी जरूरत संकलन-समय "और" लाइब्रेरी-संकलन-समय "पर नहीं, वेबपैक के साथ आसानी से संभव नहीं है।

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

संपादित करें:

मूल रूप से, के बजाय:

# in my library 
load = (path_to_file) -> 
    (require path_to_file).do_something() 

# in my app (using the 'compiled' libary) 
cool_library.load("file_that_exists_in_my_app") 

मैं यह कर:

# in my library 
load = (module) -> 
    module.do_something() 

# in my app (using the 'compiled' libary) 
module = require("file_that_exists_in_my_app") 
cool_library.load(module) 

पहले कोड require.js में काम किया लेकिन webpack में नहीं।

हिंडसाइट में मुझे लगता है कि रनटाइम पर किसी भी तृतीय-पक्ष-लाइब्रेरी लोड फ़ाइलों को वैसे भी गलत लगता है।

Answer 2

अवधारणा context (http://webpack.github.io/docs/context.html) है, यह गतिशील आवश्यकता बनाने की अनुमति देता है। http://webpack.github.io/docs/code-splitting.html

function loadInContext(filename) { 
    return new Promise(function(resolve){ 
     require(['./'+filename], resolve); 
    }) 
} 

function loadModules(namesInContext){ 
    return Promise.all(namesInContext.map(loadInContext)); 
} 

और निम्नलिखित की तरह उपयोग:

इसके अलावा वहाँ कोड विभाजन अंक परिभाषित करने के लिए एक संभावना है

loadModules(arrayOfFiles).then(function(){ 
    modules.forEach(function(module){ 
     module(moduleAPI); 
    }) 
}); 

---

लेकिन संभावना यह है कि तुम क्या जरूरत नहीं है - आप करेंगे .. सभी आवश्यक मॉड्यूल के साथ एक बंडल के बजाय मात्रा का एक बहुत है, और संभावना यह इष्टतम नहीं होगा

यह मॉड्यूल को परिभाषित करने के लिए बेहतर है आप कॉन्फ़िग फ़ाइल में की आवश्यकता है, और यह अपने निर्माण के लिए शामिल हैं:

// modulesConfig.js 
module.exports = [ 
    require(...), 
    .... 
] 

// run.js 
require('modulesConfig').forEach(function(module){ 
    module(moduleAPI); 
})