वेबपैक प्लगइन: संकलन के बाद मैं मॉड्यूल को कैसे संशोधित और पुन: पार्स कर सकता हूं?

Question

मैं एक वेबपैक प्लगइन पर काम कर रहा हूं और निर्माण के दौरान मॉड्यूल को संशोधित करने का तरीका नहीं समझ सकता। मुझे क्या करना कोशिश कर रहा हूँ:

• कलेक्ट डेटा एक कस्टम लोडर के माध्यम से (ठीक)
• के बाद सभी मॉड्यूल लोड किया गया है, मेरी लोडर (ठीक)
• सम्मिलित कोड मैं में उत्पन्न द्वारा एकत्रित डेटा एकत्र निर्माण में एक मौजूदा मॉड्यूल (नीचे वर्णित अनुसार यह सुनिश्चित करना, यह सुनिश्चित नहीं है कि यह सबसे अच्छा तरीका है)
• उस मॉड्यूल को 'अपडेट करें' ताकि कोड जो मैंने जोड़ा है उसे पार्स हो जाता है और इसकी 'वेबपैक में बदलना आवश्यक है कॉल (कर सकते हैं' यह सही ढंग से करने के तरीके को समझें)

वर्तमान में मैं संकलक पर 'इस संकलन' में शामिल हूं, फिर संकलन पर 'अतिरिक्त-खंड-संपत्ति'। पहले खंड को पकड़ना (केवल एक, वर्तमान में, जैसा कि मैं अभी भी विकास में हूं), उस खंड में मॉड्यूल के माध्यम से पुन: सक्रिय करना जिसे मैं संशोधित करना चाहता हूं। तब:

• मॉड्यूल के _cachedSource.source._source._value करने के लिए अपने उत्पन्न स्रोत जोड़
• रिक्त स्ट्रिंग पर ._cachedSource.hash की स्थापना (के रूप में (मैं भी मॉड्यूल के ._source._value को जोड़कर की कोशिश की) इस अगले कदम के काम करने के लिए आवश्यक हो)
• मैं .rebuildModule()

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

मैं मॉड्यूल को कैसे 'अपडेट' संशोधित कर सकता हूं ताकि वेबपैक मेरे अतिरिक्त स्रोत को मूल रूप से पार्स किए गए स्रोत के समान व्यवहार कर सके? क्या पुनर्निर्माण मॉड्यूल() के अलावा मुझे कुछ करने की ज़रूरत है? क्या मैं इस प्रक्रिया को निर्माण प्रक्रिया में बहुत देर से कर रहा हूं? या क्या मैं इसके बारे में गलत तरीके से जा रहा हूं?

Answer 1

मुझे पता चला कि यह एक सुंदर दर्द रहित फैशन में कैसे किया जाए।

चीजें मैं गलत था:

• शायद बहुत देर हो चुकी में hooking? सबसे पुराना प्लगइन जहां आप इसे पूरा कर सकते हैं संकलन की 'मुहर' प्लगइन है। नाम के बावजूद, यह प्लगइन हुक मुहर समारोह में पहली पंक्ति के रूप में निष्पादित करता है, इसलिए कोई सीलिंग अभी तक नहीं हुई है। इस बिंदु पर सभी मॉड्यूल लोड हो गए हैं।
• rebuildModule() एक अच्छा विचार है, क्योंकि यह खरोंच से मॉड्यूल को फिर से लोड करता है नहीं है: फ़ाइल के स्रोत लोड और किसी भी लागू लोडर के माध्यम से पारित कर दिया है, और जब कि प्रक्रिया समाप्त होने module वस्तु की _source संपत्ति अंततः पुन: सौंपा गया है।
  • इस बिंदु पर rebuildModule() का उपयोग वास्तव में महान अगर वहाँ के रूप में यह इस कॉल में लोड किया जा रहा था मॉड्यूल स्रोत को संशोधित करने के लिए एक रास्ता थे होगा (अर्थात गतिशील रूप से एक लोडर समारोह है कि केवल इस के पुनर्निर्माण पर प्रयोग किया जाता है आवंटित)।हम तो sourceMap व्यवहार जब एक मॉड्यूल के स्रोत भरी हुई है ऐसा होता है कि का लाभ लेने के लिए सक्षम हो जाएगा (नीचे देखें)

मैं कैसे यह काम कर रहा है: '

• में हुक compilation एस 'सील' प्लगइन, संकलन के module एस के माध्यम से पुनरावृत्त करें और जिसे आप चाहते हैं उसे ढूंढें
• मॉड्यूल के स्रोत को संशोधित करें, उदाहरण के लिए module._source._value += extraCode;
• मॉड्यूल रीपार्स

  :

  module.parse.parse(module._source.source(), { 
      current: module, 
      module.module, 
      compilation: compilation, 
      options: compilation.options 
  }); 
  

पार्स NormalModule के build विधि है, जो अधिक या कम या ज्यादा तुरंत कहा जाता है के बाद स्रोत सामान्य मॉड्यूल निर्माण प्रक्रिया के दौरान लोड किया गया है से लिया जाता है।

यह कार्यान्वयन मेरे अंतिम आउटपुट में संशोधित और विश्लेषण स्रोत प्राप्त करता है। चूंकि NormalModuleMixin की doBuild विधि में कुछ स्रोत मैप सामान हैं, और चूंकि मैं उन कार्यों के बाद स्रोत में जोड़ रहा हूं, इसलिए मुझे लगता है कि स्रोत मैप अब गड़बड़ हो जाएगा। तो, कोड चरण को प्रतिबिंबित करने के लिए अगला चरण स्रोतमैप प्राप्त कर रहा है। सुनिश्चित नहीं है कि स्रोत मैप को मैन्युअल रूप से अपडेट करने और मैन्युअल रूप से अपडेट करने के लिए या ऊपर दिए गए विचार को देखें, लोडर को गतिशील रूप से लागू करने का प्रयास करें और पार्सिंग के बजाय rebuildModule() को कॉल करें।

यदि आप उपर्युक्त में से कोई भी करने का बेहतर तरीका जानते हैं, तो कृपया मुझे बताएं!

Answer 2

एक और विचार मेरे दिमाग में आता है। यदि वेबपैक संकलन से पहले कुछ प्रीप्रोकैसिंग करते हैं तो क्या होगा?

1. लीवरेज बेबेल + कस्टम प्लगइन, या यहां तक ​​कि कस्टम कोड पार्सर, जो आपको आवश्यक डेटा एकत्र करने के लिए, और फिर temp फ़ाइल में सहेजने के लिए।
2. इस temp फ़ाइल के साथ वेबपैक को एक साथ चलाएं।

यह temp फ़ाइल वर्चुअल फ़ाइल हो सकती है। https://github.com/rmarscher/virtual-module-webpack-plugin/ का संदर्भ लें।

... यदि आपने बिल्ड समय पर फ़ाइल सामग्री जेनरेट की है तो आपके स्रोत कोड द्वारा मॉड्यूल के रूप में उपभोग करने की आवश्यकता है, लेकिन आप इस फ़ाइल को डिस्क पर नहीं लिखना चाहते हैं।