ब्राउज़र डीबगिंग की अनुमति देने के लिए वेबपैक कॉन्फ़िगर करें

130

मैं वेबपैक के लिए नया हूं और इसका उपयोग करने के लिए मैं एक मौजूदा वेब एप्लिकेशन को परिवर्तित कर रहा हूं।

मैं अपने जेएस को बंडल करने और छोटा करने के लिए वेबपैक का उपयोग कर रहा हूं जो कि तैनात होने पर बहुत अच्छा है, हालांकि यह विकसित होने के दौरान डिबग करना बहुत चुनौतीपूर्ण है।

आमतौर पर मैं जेएस मुद्दों को डीबग करने के लिए क्रोम के डीबगर में निर्मित का उपयोग करता हूं। (या फ़ायरफ़ॉक्स पर फ़ायरबग)। हालाँकि वेबपैक के साथ सब कुछ एक फाइल में भर जाता है और यह उस तंत्र का उपयोग करके डीबग करना चुनौतीपूर्ण हो जाता है।

क्या बंडल को जल्दी से चालू और बंद करने का कोई तरीका है? या चालू और बंद करना?

मैंने यह देखने के लिए देखा है कि क्या कुछ स्क्रिप्ट लोडर कॉन्फ़िगरेशन या अन्य सेटिंग है, लेकिन यह अंडाकार नहीं दिखता है।

मेरे पास मॉड्यूल की तरह काम करने के लिए सब कुछ बदलने और आवश्यकता के उपयोग के लिए अभी तक समय नहीं है। इसलिए मैं अपनी लोडिंग के लिए बस आवश्यकता ("स्क्रिप्ट !/ file.js") पैटर्न का उपयोग करता हूं।

javascript webpack

— जिम
स्रोत

3

क्या आपने इस समस्या का हल ढूंढना समाप्त कर दिया? मैं उपलब्ध चर को देखने के लिए JS कंसोल का उपयोग करना पसंद करता हूं। मेरा मुख्य मुद्दा यह है कि वेबपैक इन सभी चरों को मॉड्यूल के अंदर छिपा देता है, इसलिए वे दुर्गम हो जाते हैं

— user1496984

2

वास्तव में कभी कोई समाधान नहीं मिला इसलिए हमने दुर्भाग्य से वेबपैक का उपयोग किया।

— जिम

अब आप क्या उपयोग करते हैं? वेबपैक लिखने के समय अभी भी सबसे लोकप्रिय बिल्ड टूल जैसा लगता है जो मुझे मिल सकता है।

— रिचर्ड

100

आप अपने स्रोत कोड और बंडल्ड / मिनीकृत के बीच मैपिंग को संरक्षित करने के लिए स्रोत के नक्शे का उपयोग कर सकते हैं ।

Webpack डेवलपर टूल में डिबगिंग को बढ़ाने के लिए devtool विकल्प प्रदान करता है, जो आपके लिए बंडल फाइल का स्रोत मानचित्र बनाता है । यह विकल्प कमांड लाइन से या आपके webpack.config.js कॉन्फ़िगरेशन फ़ाइल में उपयोग किया जा सकता है ।

नीचे आप बंडल फ़ाइल (उत्पन्न करने के लिए कमांड लाइन का उपयोग कर एक काल्पनिक उदाहरण मिल सकते हैं bundle.js ) उत्पन्न स्रोत मानचित्र फ़ाइल (के साथ bundle.js.map )।

$ webpack --devtool source-map ./entry.js bundle.js
Hash: b13b8d9e3292806f8563
Version: webpack 1.12.2
Time: 90ms
        Asset     Size  Chunks             Chunk Names
    bundle.js  1.74 kB       0  [emitted]  main
bundle.js.map  1.89 kB       0  [emitted]  main
   [0] ./entry.js 85 bytes {0} [built]
   [1] ./hello.js 59 bytes {0} [built]

index.html

<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

entry.js

var hello = require('./hello.js');
document.body.innerHTML += 'It works ' + hello();

hello.js

module.exports = function () {
  return 'Hello world!';
};

यदि आप अपने ब्राउज़र में index.html खोलते हैं (मैं क्रोम का उपयोग करता हूं लेकिन मुझे लगता है कि यह अन्य ब्राउज़रों में भी समर्थित है), तो आप टैब स्रोतों में देखेंगे कि आपके पास फ़ाइल के नीचे बंडल फ़ाइल है: // योजना और स्रोत फ़ाइलों के तहत विशेष वेबपैक: // योजना।

और हां, आप डिबगिंग शुरू कर सकते हैं जैसे कि आपके पास मूल स्रोत कोड था! एक पंक्ति में एक ब्रेकपॉइंट लगाने और पृष्ठ को रीफ्रेश करने का प्रयास करें।

— dreyescat
स्रोत

2

bundle.map js फ़ाइल को इंगित करता है लेकिन क्या होगा यदि वास्तविक js फ़ाइल में tsx या ts कहने का मानचित्र भी हो?

— कन्या कोवासिक

4

मैं अपनी स्थापना के लिए बेहतर लगता है उत्पादन और विकास मोड का उपयोग कर अपनी परियोजना https://webpack.js.org/guides/production/ इसका भी शामिल कैसे डिबग करने के लिए अपने कोड मैप करने के लिए

devtool: 'inline-source-map'

— एम-फरहान
स्रोत

3

स्रोत मानचित्र बहुत उपयोगी हैं जैसा कि पहले ही बताया गया है।
लेकिन कभी-कभी चयन करने के लिए कि कौन सा स्रोत मानचित्र उपयोग करना दर्द हो सकता है।

वेबपैक स्रोत मानचित्र समस्या में से एक पर यह टिप्पणी आवश्यकताओं के आधार पर किस स्रोत मानचित्र का उपयोग करने के लिए उपयोगी हो सकती है।

— अभिनव सिंगी
स्रोत

1

यहाँ एक नज़र है

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

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

यहाँ छवि विवरण दर्ज करें

— केला
स्रोत

10

डिमिनिफ़ाइंग, मिनिमाइजिंग को अक्षम करने के समान नहीं है क्योंकि टिप्पणियाँ अभी भी छीन ली गई हैं, लाइन नंबर अब मेल नहीं खाते हैं, और चर नाम समान नहीं हैं। कहा जा रहा है कि यह बेहतर है तो कुछ भी नहीं।

— जिम

1

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

प्रारूपण करने से पहले:

स्वरूपण के बाद।

— Jolly1234
स्रोत