रनटाइम पर संसाधन लोड करने के लिए वेबपैक का उपयोग करने का कोई तरीका?

Question

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

उदाहरण:

var jQuery = require('jQuery'); 
var sol = require('some-other-lib'); 
var myConfig = require('/real/production/url/myconfig.json'); 

console.log(myConfig.myFavoriteSetting); 

उदाहरण में ऊपर मैं चाहता myconfig.json संकल्प लिया और कार्यावधि में भरी हुई है।

संभवतः संबंधित प्रश्नों:

• how to use webpack to load CDN or external vendor javascript lib in js file, not in html file
• Webpack - dynamic require and paths
• Require JS files dynamically on runtime using webpack

Answer 1

मुझे लगता है कि क्या आप चाहते हैं require.ensure, webpack के कोड बंटवारे है। आपके द्वारा सुनिश्चित किए जाने वाले मॉड्यूल को एक अलग बंडल में रखा जाता है, और जब आपका 'सुनिश्चित' रनटाइम पर निष्पादित होता है, तो वेबपैक रनटाइम स्वचालित रूप से अजाक्स के माध्यम से बंडल प्राप्त करता है। सुनिश्चित करने के लिए कॉलबैक सिंटैक्स पर ध्यान दें - बंडल लोड होने पर आपका कॉलबैक चलता है। आपको अभी भी उस बिंदु पर वांछित मॉड्यूल की आवश्यकता है; .ensure बस सुनिश्चित करता है कि वे उपलब्ध हैं।

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

Answer 2

वेबपैक 2 के साथ, आप System.import का उपयोग कर सकते हैं। यह वादा एपीआई का उपयोग करता है। AFAIK, वर्तमान में ब्राउज़र में async/प्रतीक्षा कोड चलाने का कोई तरीका नहीं है। मेरा मानना ​​है कि बेबेल केवल एसिंक को पार कर सकता है/ES2015 तक प्रतीक्षा कर सकता है, इसलिए नोड (v6.x) का नवीनतम संस्करण इसे चला सकता है। मुझे नहीं लगता कि ब्राउज़र इसे समझने में सक्षम हैं क्योंकि पारदर्शी कोड जेनरेटर का उपयोग करता है।

System.import के लिए कृपया ध्यान दें कि कुछ पुराने ब्राउज़र (आईई 11 और नीचे मुझे विश्वास है) आपको वादा API को पॉलीफिल करने की आवश्यकता होगी। इसके लिए polyfill.io देखें।

यदि आप वास्तव में ब्राउज़र में async/await का उपयोग करना चाहते हैं, तो आप ES2015 के लिए पूर्ण पॉलीफ़िल करने में सक्षम हो सकते हैं।

Answer 3

मेरे पास एक फ़ाइल (config.json) के साथ एक ही मामला था।

मैं Copy-Webpack-Plugin

new CopyWebpackPlugin([ 
    // Copy directory contents to {output}/ 
    { from: 'config.json' } 
    ]) 

उसके बाद से इसे कॉपी करने का निर्णय लिया, मेरी फाइल उत्पादन का निर्माण निर्देशिका में था। मैं अपने webpack.config फ़ाइल में मेरी फाइल संदर्भ के लिए 'बाहरी' संपत्ति का इस्तेमाल किया:

externals: { 
    'config': "require('./config.json')" 
    } 

मेरी js फ़ाइल में जो config.json लोड:

import config from 'config' 

'config' लोड की आवश्यकता होती है ('। /config.json) जो आउटपुट बिल्ड निर्देशिका में से एक है।

मुझे पता है कि यह मुश्किल है लेकिन मुझे मेरी समस्या का कोई और समाधान नहीं मिला।शायद यह किसी की मदद करेगा।

संपादित

मैं आदेश का निर्माण करने की वजह से import config from 'config' इसके बिना समझ में आता नहीं था में webpack का इस्तेमाल किया था।

externals: { 
    './config.json': "require('./config.json')" 
    } 

और

var config = require('./config.json') //replace import config from 'config' 

webpack के बिना, जावास्क्रिप्ट को समझने var config = require('./config.json') क्योंकि यह सही रास्ता है: यही कारण है कि मैं की जगह है।

और जब मैं webpack के साथ निर्माण, यह require('./config.json') जब यह './config.json' देखता द्वारा बदल सकता है इसलिए यह