es6 babelify परिवर्तन परिवर्तनीय नाम, चर निरीक्षक

Question

में नहीं पाया जा सकता है मैं अपने आवेदन में es6 मॉड्यूल का उपयोग कर रहा हूं, और मुझे अपने क्रोम इंस्पेक्टर में डीबगिंग करते समय समस्या आ रही है। जब मैं अपने कोड में निम्नलिखित की तरह कुछ करना:

import 'widget' from './widget' 

class SomeClass { 
    componentDidMount(){ 
    debugger; // widget is not defined here according to chrome console! 
    widget.doSomething(); 
    } 
} 

संकलित स्रोत फ़ाइल जो ब्राउज़र पढ़ रही है को देखते हुए, मैं देख रहा हूँ babelify को बदलने कि है कि मूल js फ़ाइलों के लिए लागू किया गया था नाम दिया गया है 'विजेट' '_widget_Js' जैसे कुछ में परिवर्तनीय। हालांकि, मैंने जेएस को स्रोत मानचित्रों के साथ संकलित किया है, इसलिए क्रोम इंस्पेक्टर मूल जेएस फाइलों को दिखाता है, लेकिन जब मैं मूल 'विजेट' चर (करता है '_widget_Js' चर को देखता हूं, तो इसे पहचान नहीं आता है, लेकिन मैं निश्चित रूप से संकलित अनुवादित चर को हर बार डीबग करना नहीं चाहता हूं!)।

मूल आयात नाम को पहचानने के लिए क्रोम कैसे प्राप्त किया जा सकता है इस पर कोई सुझाव? अगर यह मदद करता है, तो मैं अपने सेटअप (gulp + browserify + babelify) पर अधिक जानकारी प्रदान कर सकता हूं। धन्यवाद!

Answer 1

वास्तव में ऐसा कुछ भी नहीं है जो आप कर सकते हैं। यदि क्रोम स्रोत मानचित्र names में मैपिंग के लिए समर्थन लागू करता है, तो इससे कुछ हद तक मदद मिलेगी।

Answer 2

जैसा कि @ जेएमएम नोट्स स्रोत मैपिंग वेरिएबल नाम वर्तमान में काम नहीं करते हैं। ES2015 मॉड्यूल से exported bindings का समर्थन करने के लिए बेबेल को आयात के परिवर्तनीय नामों को बदलना होगा।

मैंने babel-plugin-transform-es2015-modules-commonjs-simple नामक एक बेबेल 6 प्लगइन बनाया है जो ES6 मॉड्यूल के "बाइंडिंग" व्यवहार को तोड़ने की लागत पर प्रतीक नामों को बदलने के बिना मॉड्यूल आयात करेगा। यह तय करने के लिए आप पर निर्भर है कि क्या यह व्यापार योग्य है या नहीं। चूंकि यह अवधारणा कॉमनजेएस में भी मौजूद नहीं है, इसलिए यह मेरे लिए आसान था। एक

{ 
    plugins: [ 
     "transform-es2015-arrow-functions", 
     "transform-es2015-tempalte-literals", 

... और प्लग इन

 ["transform-es2015-modules-commonjs-simple", { 
      noMangle: true 
     }], 
     "sourceMaps": true 
    ] 
} 

आप प्रीसेट का उपयोग कर रहे हैं, तो यह है:

> npm install babel-plugin-transform-es2015-modules-commonjs-simple --save-dev 

.babelrc:

यह babel-plugin-transform-es2015-modules-commonjs के लिए एक ड्रॉप में प्रतिस्थापन है थोड़ा trickier, चूंकि प्रीसेट से प्लगइन ओवरराइड करने के लिए वर्तमान में कोई स्पष्ट तरीका नहीं है, तो निर्देश हैं ओ एन the repo।

आप noMangle विकल्प के साथ किसी भी समय व्यवहार को चालू या बंद कर सकते हैं। प्लगइन मूल बैबेल कॉमनज ट्रांसफॉर्म के संस्करण और वास्तव में स्रोत कोड को ट्रैक करता है।