विजुअल स्टूडियो 2015

Question

में बंडल जावास्क्रिप्ट डिबगिंग मैं अपने एप्लिकेशन को बंडल करने के लिए इस सरल कॉन्फ़िगरेशन फ़ाइल के साथ वेबपैक का उपयोग कर रहा हूं।

var path = require('path'); 

module.exports = { 
    debug: true, 
    devtool: 'source-map', 

    context: path.join(__dirname, 'js'), 
    entry: './main.js', 
    output: { 
     path: path.join(__dirname, 'Built'), 
     filename: '[name].bundle.js' 
    } 
}; 

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

एक संकेत है कि स्रोतमैपिंग काम करता है, क्योंकि मुझे कंसोल आउटपुट Unsupported format of the sourcemap में मिलता है। sourcemap उत्पन्न config का उपयोग करके उपरोक्त लगता है कि यह

{"version":3,"sources":["webpack:///webpack/bootstrap 2919a5f916c286b8e21a","webpack:///./main.js","webpack:///./structure_editor/content.js","webpack:///./structure_editor/test_bundle.js"],"names":[],"mappings":";AAAA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA,uBAAe;AACf;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;;;;;;ACtCA;AACA;;AAEA;AACA;;AAEA;;AAEA;;AAEA;;;;;;;ACVA,8C;;;;;;ACAA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA,6B","file":"main.bundle.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\texports: {},\n \t\t\tid: moduleId,\n \t\t\tloaded: false\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.loaded = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(0);\n\n\n\n/** WEBPACK FOOTER **\n ** webpack/bootstrap 2919a5f916c286b8e21a\n **/","document.write(require(\"./structure_editor/content.js\"));\r\nvar TestBundle = require(\"./structure_editor/test_bundle.js\");\r\n\r\nvar test = new TestBundle();\r\ntest.testMe();\r\n\r\n//var StructureEditor = require(\"./structure_editor/structure_editor.js\");\r\n\r\n//var editor = new StructureEditor(0x00FF00);\r\n\r\n//editor.run();\r\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./main.js\n ** module id = 0\n ** module chunks = 0\n **/","module.exports = \"It works from content.js.\";\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./structure_editor/content.js\n ** module id = 1\n ** module chunks = 0\n **/","var TestBundle = function() {\r\n \r\n}\r\n\r\nTestBundle.prototype.testMe = function() {\r\n var a = 10;\r\n var b = 12;\r\n var c = a + b;\r\n document.write(c);\r\n};\r\n\r\nmodule.exports = TestBundle;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./structure_editor/test_bundle.js\n ** module id = 2\n ** module chunks = 0\n **/"],"sourceRoot":""} 

तो मैं समझ सकता हूँ कि इस प्रारूप webpack की वजह से समर्थित नहीं किया जा सकता है: // (हालांकि आईई करता है यह समझ)। हालांकि, अगर मुझे पता था कि वीएस के लिए उचित प्रारूप कैसा दिखता है जैसे मैं ऐसे प्रारूप का उत्पादन करने के लिए वेबपैक को ट्विक कर सकता हूं।

मैं किसी भी विचार, ट्यूटोरियल, के लिए पूछ रहा हूं .. यह काम करने के लिए जो भी हो।

Answer 1

मुझे आपकी समस्या का समाधान मिला।

webpack.config.js में इस प्लगइन

plugins: [ 
    new webpack.SourceMapDevToolPlugin(
    sourceMapFilename, null, 
    "[absolute-resource-path]", "[absolute-resource-path]") 
] 

sourceMapFilename जोड़ने अपने समूह का नाम होना चाहिए।
यदि आप एकाधिक प्रविष्टि बिंदुओं का उपयोग करते हैं तो आप [name] टैग का भी उपयोग कर सकते हैं।

निकालें यह आपके webpack.config.js

devtool: 'source-map' 

से अब जब आप Internet Explorer के साथ वी.एस. में डिबगिंग शुरू आप विच्छेदबिंदु आप अपने .ts फ़ाइलों में स्थापित मारा जाना चाहिए।

स्रोत: https://github.com/webpack/webpack/issues/238

आशा इस मदद करता है।

Answer 2

मेरे पास समस्या का पूर्ण समाधान नहीं है लेकिन मैंने इसे थोड़ा सा संकुचित कर दिया है।

यह सुनिश्चित करने वाली पहली बात यह है कि स्रोत मानचित्र और मूल फ़ाइलों दोनों के पथ विजुअल स्टूडियो के लिए उपलब्ध हैं। मैंने पाया कि इनमें से कुछ अनुरोध लॉगिन पृष्ठ को प्रतिक्रिया के रूप में प्राप्त कर रहे थे। मैंने मानचित्र और टीएस फाइलों के लिए अज्ञात पहुंच प्रदान की। मैंने टीएस फाइलों के लिए पूर्ण, फ़ाइल सिस्टम पथ का उपयोग करने का प्रयास किया जो विजुअल स्टूडियो के लिए काम करता था लेकिन ब्राउज़र इसके बारे में बहुत खुश नहीं थे।

जो मैं समझता हूं उससे, Source SourceDDToolPlugin प्लगइन की कॉन्फ़िगरेशन के लिए निम्न शॉर्टकट है। प्लगइन पर सीधे जाकर आपको जेनरेट किए गए स्रोत मानचित्रों पर अधिक नियंत्रण मिलेगा।

devtool: 'source-map' 

इसका मतलब है कि ऊपर दी गई रेखा को निम्नलिखित की तरह बदलना होगा।

config.plugins.push(new webpack.SourceMapDevToolPlugin({ 
    filename: '[file].map', 
    moduleFilenameTemplate: "[resource-path]", 
    fallbackModuleFilenameTemplate: "[resource-path]?[hash]" 
})); 

नोट [absolute-resource-path] मैक्रो जो फ़ाइल सिस्टम पथ है कि दृश्य स्टूडियो वेबसाइट के माध्यम से उन्हें लोड के बिना फ़ाइलों को एक्सेस करने का उपयोग कर सकते का परिणाम देगा। ये स्त्रोत प्रॉपर्टी में आउटपुट हैं, बैकस्लैश के साथ दूसरी बैकस्लैश (सी: \ प्रोजेक्ट्स \ ... उदाहरण के लिए) से बच निकला है। जैसा कि मैंने ऊपर उल्लेख किया है, यह ब्राउज़र में डीबगिंग तोड़ दिया।

इसके अलावा, [संसाधन-पथ] मैक्रो डिबगिंग के दौरान हल किया प्रतीत होता है जैसे कि यह स्रोत मानचित्र वाले फ़ोल्डर के सापेक्ष है। यह मेरे सेटअप के लिए सही नहीं था। मैंने एक उपसर्ग जोड़ा और इसे हल करने के लिए निम्न के जैसा कुछ इस्तेमाल किया।

"../../app/[resource-path]" 

अगले अंक मैपिंग संपत्ति (मानचित्र फ़ाइलों के भीतर) के भीतर लाइनों से कुछ के लिए पिछले घटकों के साथ किया गया था। यह explanation of the source map format यहां बहुत उपयोगी था लेकिन बहुत कुछ, आपको यह जानने की जरूरत है कि अर्ध कोलन अलग-अलग रेखाएं हैं और प्रत्येक पंक्ति में अल्पविराम से अलग सेगमेंट अलग-अलग हो सकते हैं। खंड निम्नलिखित जानकारी को एन्कोड कर सकते हैं।

• जेनरेट किए गए स्तंभ
• मूल फ़ाइल इस
• मूल लाइन नंबर
• मूल स्तंभ
• में और अगर उपलब्ध मूल नाम दिखाई दिया।

मैंने पाया है कि अगर मैं लाइनों है कि दृश्य स्टूडियो मानचित्र संसाधित कर सकते हैं और मैं मूल फाइलों में breakpoints आदि (टाइपप्रति फ़ाइलों को जावास्क्रिप्ट में परिवर्तित किया गया जो तब समाहित किया गया था सेट कर सकते हैं की छोर से किसी भी कम क्षेत्रों से हटाया मेरे मामले में)।

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

• नियमित अभिव्यक्तियों के साथ एक प्रतिस्थापन ऑपरेशन सक्षम करें। खोज क्षेत्र में निम्न अभिव्यक्ति का उपयोग करें और प्रतिस्थापित करने के लिए मान के रूप में $ 1 का उपयोग करें।

  , \ s * [^ \ s \ ";] {1,3}? (; | \")

यह किसी भी सेगमेंट है कि केवल 1 शामिल की जगह लेगा, लाइनों के अंत में 2 या 3 अक्षर।

यह संभव है कि लाइनों के सिरों पर ब्रेकपॉइंट्स सेट करने में समस्याएं होंगी लेकिन मैं अब तक इसे तोड़ने में सक्षम नहीं हूं। मैंने नोटिस किया कि जब ऐसी त्रुटियां थीं जो डीबगर में निष्पादन को रोकती थीं कि रेखाएं हमेशा मेल नहीं खातीं - शायद इस हेरफेर का नतीजा?

मैंने एक छोटा कंसोल एप्लिकेशन भी लिखा जो किसी दिए गए फ़ोल्डर में सभी मानचित्र फ़ाइलों पर यह संशोधन करेगा। मैं इसे अपने निर्माण के अंत में स्वचालित रूप से चलाता हूं।

static void Main(string[] args) 
    { 
     var sourceMapFolder = new DirectoryInfo(args[0]); 

     foreach (var sourceMapFile in sourceMapFolder.EnumerateFiles("*.map")) 
     { 
      var sourceMapFilePath = sourceMapFile.FullName; 

      var regex = new Regex(",\\s*[^\\s\\\";]{1,3}?(;|\\\")"); 

      var oldContent = File.ReadAllText(sourceMapFilePath); 

      var newContent = regex.Replace(oldContent, "$1"); 

      File.WriteAllText(sourceMapFilePath, newContent); 
     } 
    } 

मैं चाहे वह Webpack जो खंडों या दृश्य स्टूडियो जो उन्हें निपटने किया जाना चाहिए नहीं पैदा किया जाना चाहिए करने के लिए के रूप में अनिश्चित हूं।

अद्यतन: मैंने विजुअल स्टूडियो के लिए कनेक्ट साइट पर Bug बनाया जो इस समस्या को शामिल करता है।