स्रोत मानचित्र और वेबपैक के साथ डिबगिंग टाइपस्क्रिप्ट

Question

मेरे पास टाइपस्क्रिप्ट में लिखा गया प्रोजेक्ट है और मैं इसे डीबग करने में सक्षम होना चाहता हूं (या तो Chrome Dev Tools या Intellij में)।

पहले मैंने देखा कि टाइपस्क्रिप्ट की import कार्यक्षमता समर्थित नहीं थी। तो मैंनेके साथका उपयोग करने की कोशिश की लेकिन यह पूरी तरह विफल रहा। भले ही मेरा एप्लिकेशन काम कर रहा था (एक bundle.js फ़ाइल होने के कारण जिसमें सभी कोड हैं) यह दिए गए स्रोत मानचित्रों के साथ कोड से मेल नहीं खा पाएगा और यह डिबगिंग असंभव बना देगा।

वेबपैक का उपयोग करना बंद करने के बाद मैंने require.js को require is not defined त्रुटि को हल करने की निर्भरता के रूप में जोड़ने की कोशिश की। यह काम करता है लेकिन अब मैं फिर से अटक गया हूं और यह प्राप्त कर रहा हूं:

Uncaught ReferenceError: exports is not defined

मुझे नहीं पता कि यह क्यों काम नहीं कर रहा है। मैं अपना आवेदन काम करना चाहता हूं (या तो वेबपैक के माध्यम से या ट्रांसलेशन के बाद आयात विवरणों को हल करने में सक्षम होना) और फिर भी टाइपस्क्रिप्ट-उत्पादित स्रोत-मानचित्रों का उपयोग करके कोड को डीबग करने में सक्षम होना चाहिए। इसे कैसे प्राप्त किया जा सकता है?

tsconfig.json

{ 
    "compilerOptions": { 
    "module": "commonjs", 
    "target": "es6", 
    "sourceMap": true 
    }, 
    "include": [ 
    "scripts/**/*" 
    ], 
    "exclude": [ 
    "node_modules" 
    ] 
} 

webpack.config.js:

module.exports = { 
    resolve: { 
     extensions: [/*'.ts', '.tsx', */'.js'] 
    }, 
    entry: './scripts/main.js', 
    output: { 
     path: '/', 
     filename: 'app.js' 
    }, 
    module: { 
     rules: [ 
      { test: /\.js$/, loader: 'source-map-loader', enforce: 'pre' } 
     ], 
     loaders: [ 
      { test: /\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/ }, 
      {test: /\.css$/, loader: "style!css"} 
     ] 
    }, 
    watch: true 
}; 

Answer 1

साथ डिबगिंग सक्षम करने के लिए

मैं मामले में मेरी config फ़ाइलें संलग्न कर रहा हूँ कुछ वहाँ गुम होती है वेबपैक, devtool: "source-map" को अपने webpack.config.js पर जोड़ें।

require.js का उपयोग कर फ़ाइलों को लोड करने के लिए, "module": "amd"tsconfig.json में बदलें। require.jscommonjs मॉड्यूल लोड करने का समर्थन नहीं करता है।

Answer 2

मैं यहां एक उत्तर पोस्ट करने जा रहा हूं। यह उत्तर आपके लिए काम कर सकता है (चरण 5 देखें)। यह व्यक्ति से व्यक्ति में बहुत भिन्न होता है। शोध में इतने सारे दिन बिताए जाने के बाद, GitHub से रॉबिन-ए-मीड की पोस्ट वह थी जिसने इसे खींचा था।

प्रारंभ करने से पहले, मुख्य समस्या वीएस कोड डीबगिंग कॉन्फ़िगरेशन फ़ाइल के अंदर स्रोत मैपिंग के यूआरएल में झूठ लगती है, और यह कैसे (वीएस कोड) एप्लिकेशन को देखता है। यह आपके द्वारा उपयोग किए जा रहे किसी भी बैक-एंड स्टैक से स्वतंत्र है (ई.जी. एक्सप्रेस, .NET कोर, Django, आदि)। केवल एक चीज जिसे आपको अवगत होना चाहिए, यह है कि जब आपका एप्लिकेशन चल रहा है तो Google Chrome सफलतापूर्वक जेनरेट किए गए स्रोत मानचित्र को लोड करता है।

उपयोग किया:

• दृश्य स्टूडियो कोड ver 1.13.1
• NodeJS 7.4.0
• Windows 10 64-बिट
• Webpack 2.5 (Webpack 3 के लिए भी लागू करना चाहिए)
• टाइपस्क्रिप्ट 2।3

स्थापित करें गूगल क्रोम एक्सटेंशन:

1) बाईं तरफ के वर्ग आइकन पर क्लिक करें।

2,3) कॉमा के बिना "क्रोम के लिए डीबगर" टाइप करें और इंस्टॉल पर क्लिक करें।

कॉन्फ़िगर डिबगर:

4) बग आइकन पर क्लिक करें।

5) गियर आइकन पर क्लिक करें। यह "launch.json" खुल जाएगा जिसका उपयोग विजुअल स्टूडियो कोड में डिबगिंग को कॉन्फ़िगर करने के लिए किया जाता है।

अब। यह वह जगह है जहां यह वास्तव में मुश्किल हो जाता है। यह वह हिस्सा है जो आपके लिए काम कर सकता है या नहीं।

6) निम्नलिखित दर्ज करें:

फिर, धन्यवाद robin-a-meade from GitHub जिसका कोड यह काम किया जाता करने के लिए चला जाता है। यह यूआरएल में http://localhost के साथ एक Google क्रोम इंस्टेंस लॉन्च करने जा रहा है। फिर, यह वेबपैक मैपिंग की खोज के लिए webpack:// पथ का उपयोग करेगा। यह वास्तव में मुश्किल है और आपको यह देखने के लिए विभिन्न संयोजनों के साथ प्रयास करना पड़ सकता है कि कौन सा काम करता है।

{ 
      "name": "Launch Firefox", 
      "type": "firefox", 
      "firefoxExecutable": "C:/Program Files/Mozilla Firefox/firefox.exe", 
      "request": "launch", 
      "reAttach": true, 
      "webRoot": "${workspaceRoot}", 
      "sourceMaps": "server", 

      "pathMappings": [ 
       { 
        "url": "webpack:///", 
        "path": "${webRoot}/" 
       } 
      ], 
      "url": "localhost" 
     } 

Webpack विन्यास जोड़ें::

devtool:

{ 
      "name": "Launch Chrome against localhost, with sourcemaps", 
      "type": "chrome", 
      "request": "launch", 
      "url": "http://localhost", 
      "sourceMaps": true, 
      "webRoot": "${workspaceRoot}", 
      "diagnosticLogging": true, 
      "sourceMapPathOverrides": { 
       "webpack:///./*": "${webRoot}/*" 
      } 
     } 

आप Firefox का उपयोग कर रहे हैं, यह एक का उपयोग कर की कोशिश करने के लिए "स्रोत-नक्शा"

अपने वेबपैक विन्यास। यह modules.export ऑब्जेक्ट के तहत जाना चाहिए।

वेबपैक के साथ प्रोजेक्ट चलाएं/बनाएं; इस स्रोत-नक्शा उत्पन्न करनी चाहिए (यदि स्रोत नक्शा उत्पन्न होता है की जाँच करें, अन्यथा कुछ भी नहीं काम करेगा!):

तो फिर तुम जाने के लिए तैयार किया जाना चाहिए: प्रेस "प्ले बटन" डिबगिंग में और यह होना चाहिए काम कर रहे हो!

याद रखें, (यदि आप अपने आयात के सभी है और आवश्यकता है जहां) किसी भी फाइल है कि आपका मुख्य .js के लिए आयातित फ़ाइल नहीं, एक है करने के लिए सक्षम नहीं होगा ब्रेकपॉइंट सेट

यदि यह काम नहीं करता है, तो उन यूआरएल की सूची देखें जो आपकी मदद कर सकते हैं।

1. https://github.com/angular/angular-cli/issues/2453 (चमत्कार पेज है कि मुझे मदद की बाहर)
2. Debug webpack bundled node ts with Visual Studio Code
3. VS Code: "Breakpoint ignored because generated code not found" error
4. https://github.com/Microsoft/vscode-chrome-debug
5. https://github.com/Microsoft/vscode/issues/25349
6. https://github.com/angular/angular-cli/issues/1223
7. https://github.com/Microsoft/vscode-chrome-debug/issues/40 (पृष्ठ के नीचे)
+०१२३५१६४१०६
8. https://stackoverflow.com/a/42405563/1057052

soruce नक्शे पैदा करने के लिए: How do I generate sourcemaps when using babel and webpack?