1. घर
  2. सवाल और जवाब
  3. वेबपैक + बेबेल लोडर स्रोत मानचित्र संदर्भ खाली फ़ाइल

वेबपैक + बेबेल लोडर स्रोत मानचित्र संदर्भ खाली फ़ाइल

2016-08-29 17 views
13

मेरे पास एक es6 प्रोजेक्ट है जिसे मैं वेबपैक + बेबेल लोडर का उपयोग करके बंडल करता हूं। जब मैं devtools खोलता हूं तो मैं नीचे 'वेबपैक: //' और मेरे सभी स्रोत (es6) देख सकता हूं।वेबपैक + बेबेल लोडर स्रोत मानचित्र संदर्भ खाली फ़ाइल

समस्याएं हैं: breakpoints पर नहीं पहुंचते हैं और समारोह के संदर्भ मुझे एक फ़ाइल नाम 'पर ले जाने वाली d41d

जो निम्नलिखित सामग्री है:

undefined 


/** WEBPACK FOOTER ** 
** 
**/

अगर मैं करने के लिए दस्तावेज़ स्क्रिप्ट से अंदर घुसते हैं ?

module.exports = { 

    debug: true, 
    devtool: 'cheap-module-eval-source-map', 
    entry: "entry.js", 
    output: { 
     path: "C:/html5/", 
     filename: "bundle.js" 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       exclude: /(node_modules|bower_components)/, 
       loader: 'babel', 
       query: { 
        presets: ['es2015'], 
        plugins: ['transform-object-assign'], 
        sourceMaps: ['inline'] 
       } 
      } 
     ] 
    } 
};
: मेरे बंडल में एक समारोह मैं करने के लिए मिल के रूप में अच्छी तरह से

मेरी webpack.config.js फ़ाइल d41d मामले में package.json की

और हिस्सा यह मदद कर सकता है: पहले से

"devDependencies": { 
    "ava": "^0.16.0", 
    "babel-core": "^6.14.0", 
    "babel-loader": "^6.2.5", 
    "babel-plugin-transform-object-assign": "^6.8.0", 
    "babel-preset-es2015": "^6.13.2", 
    "cheerio": "^0.22.0", 
    "chokidar-cli": "^1.2.0", 
    "eslint": "^3.3.1", 
    "html-to-js": "0.0.1", 
    "jsdoc": "^3.4.0", 
    "jsdom": "^9.4.2", 
    "minami": "^1.1.1", 
    "obfuscator": "^0.5.4", 
    "sinon": "^1.17.5", 
    "uglify-js": "^2.7.3", 
    "webpack": "^1.13.2", 
    "yargs": "^5.0.0" 
    }, 
    "dependencies": { 
    "jquery": "^3.1.0" 
    }

धन्यवाद।

स्रोत

2016-08-29 Gal Ziv

उत्तर

4

बेबेल ने एक अलग स्रोतमैप प्रारूप here पेश किया और वेबपैक ने इसे सही तरीके से संभाल नहीं लिया।
फिक्स को this PR में विलय कर दिया गया था, और वेबपैक 1.14.0 में जारी किया गया था।

स्रोत

2016-12-07 12:55:16

+2

एक आकर्षण धन्यवाद की तरह काम करता है। redux के लिए भी .. :) –

8

यह भी आज ही मेरे लिए हो रहा शुरू कर दिया,

मुझे यकीन है कि क्या समस्या की जड़ है नहीं कर रहा हूँ, लेकिन cheap-module-eval-source-map से devtool स्विचिंग sourceMap को कुछ समय के लिए समस्या तय किया है।

स्रोत

2016-08-30 22:01:56

+1

मैंने वेबपैक की साइट पर उल्लिखित सभी संभावित devtools विकल्पों का उपयोग किया। सभी के परिणामस्वरूप एक ही आउटपुट –

+0

मुझे यकीन है कि आपने इसके बारे में सोचा है, लेकिन सुनिश्चित करें कि आप प्रत्येक बदलाव के बाद अपने devserver (या चल रहे वेबपैक) को पुनरारंभ कर रहे हैं क्योंकि चल रहा सर्वर वेबपैक कॉन्फ़िगरेशन में परिवर्तन नहीं उठाता है। –

+0

मैं devserver का उपयोग नहीं करते हैं। मैं इसे हर बार मैन्युअल रूप से चलाता हूं। लेकिन –

0

इस धागे के बहुत देर हो चुकी है। लेकिन, सोचा कि यह भविष्य के पाठकों की मदद करने जा रहा है। मैं बस ईएस 6 + बेबेल + वेबपैक संयोजन का अभ्यास कर रहा हूं और इस वीडियो में आया हूं जो बेबेल और वेबपैक का उपयोग कर ES6/ES2015 के लिए पर्यावरण विकसित करने की व्याख्या करता है।

https://www.youtube.com/watch?v=wy3Pou3Vo04

मैं बिल्कुल के रूप में है कि वीडियो में उल्लेख किया है और कोई मुद्दों के साथ मेरे लिए काम किया की कोशिश की। मामले में किसी को भी स्रोत कोड के साथ परेशानी हो रही है, तो/वीडियो:

Package.json

 
{ 
    ... 
    "devDependencies": { 
    "babel-core": "^6.14.0", 
    "babel-loader": "^6.2.5", 
    "babel-preset-es2015": "^6.14.0", 
    "webpack": "^1.13.2" 
    }, 
    "dependencies": { 
    "jquery": "^3.1.0" 
    } 
}

Message.js

 
export default class Message { 
    show(){ 
     alert("Hello world!"); 
    } 
}

app.js

 
import msg from './Message.js' 
import $ from 'jquery' 

$(function(){ 
    $("#ShowBtn").on("click", function(){ 
     var o = new msg(); 
     o.show(); 
    }); 
});

index.htm

<html> 
 
<head> 
 
\t <title></title> 
 
\t <script type="text/javascript" src="build/app.all.js"></script> 
 
</head> 
 
<body> 
 
\t <button id="ShowBtn">Show</button> 
 
</body> 
 
</html>

webpack.config.js

 
var path = require('path'); 
var webpack = require('webpack'); 

module.exports = { 
    devtool: 'source-map', 
    entry: ['./src/app.js'], 
    output: { 
     path: './build', 
     filename: 'app.all.js' 
    }, 
    module:{ 
     loaders:[{ 
      test: /\.js$/, 
      include: path.resolve(__dirname, "src"), 
      loader: 'babel-loader', 
      query:{ 
       presets: ['es2015'] 
      } 
     }] 
    }, 
    watch: true //optional 
};

केवल एक बात मैं उचित स्रोत नक्शे के लिए ऊपर स्रोत कोड में जोड़ा है "devtool: 'स्रोत-मानचित्र'" webpack.config.js में (बेशक, उस वीडियो में उल्लिखित नहीं है)।

स्रोत

2016-09-09 18:02:49 user203687

+0

के सिर के लिए धन्यवाद बहुत देर हो चुकी है। मैंने थोड़ी देर के लिए छोड़ा लेकिन बीमार परीक्षण रविवार को जब मैं काम पर वापस आ गया। परिणाम के साथ बीमार अद्यतन। धन्यवाद! –

संबंधित मुद्दे

 संबंधित मुद्दे