es6 babelify Änderungen Variable Name, Variable kann nicht im Inspektor gefunden werden

Question

Ich verwende es6 Module in meiner Anwendung, und ich stoße auf ein Problem beim Debuggen in meinem Chrom-Inspektor. Wenn ich so etwas wie die folgenden in meinem Code tun:

import 'widget' from './widget' 

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

in der kompilierten Quelldatei sucht, die der Browser zu lesen ist, sehe ich, dass die babelify Transformation, die auf die ursprünglichen js Dateien angewendet wurde, hat die ‚Widget‘ umbenannt Variable in etwas wie '_widget_Js'. Allerdings habe ich die JS zusammen mit Quellkarten kompiliert, so dass der Chrom-Inspektor die ursprünglichen JS-Dateien zeigt, aber nicht erkennt, wenn ich auf die ursprüngliche 'Widget'-Variable referenziere (tut siehe' _widget_Js 'Variable, aber ich möchte die kompilierte übersetzte Variable nicht jedes Mal nachsehen müssen, wenn ich debugge!).

Irgendwelche Vorschläge, wie ich Chrom erhalten kann, um den ursprünglichen Importnamen zu erkennen? Wenn es hilft, kann ich weitere Informationen zu meinem Setup bereitstellen (gulp + browserify + babelify). Vielen Dank!

Answer 1

Es gibt wirklich nichts, was Sie tun können. Wenn Chrome Unterstützung für die Zuordnungen in der Quellkarte names implementiert, wird das etwas helfen.

Answer 2

Wie @JMM Notizen Quelle Mapping Variablennamen funktioniert derzeit nicht. Babel muss die Variablennamen der Importe ändern, um exported bindings von ES2015-Modulen zu unterstützen.

Ich habe ein Babel 6-Plugin namens babel-plugin-transform-es2015-modules-commonjs-simple erstellt, das Module importieren wird, ohne die Symbolnamen zu ändern, auf Kosten des Bindungsverhaltens von ES6-Modulen. Es liegt an Ihnen zu entscheiden, ob sich dieser Kompromiss lohnt. Da dieses Konzept nicht einmal in CommonJS existiert, war es für mich einfach, es zu machen.

Es ist ein Drop-in-Ersatz für babel-plugin-transform-es2015-modules-commonjs:

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

.babelrc:

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

... mehr Plugins

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

Wenn Sie Voreinstellungen verwenden, es ist ein etwas kniffliger, da es derzeit keine klare Möglichkeit gibt, Plugins von Presets zu überschreiben, gibt es Anweisungen o n the repo.

Sie können das Verhalten jederzeit mit der Option noMangle ein- oder ausschalten. Das Plugin verfolgt die Version und in der Tat einen Großteil des Quellcodes des nativen babel commonjs transform.