es6 babelify cambia il nome della variabile, la variabile non può essere trovata nell'ispettore

Question

Sto usando i moduli es6 nella mia applicazione, e sto riscontrando un problema durante il debugging nel mio chrome inspector. Quando faccio qualcosa di simile al seguente nel mio codice:

import 'widget' from './widget' 

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

Guardando il file sorgente compilato cui il browser sta leggendo, vedo che il babelify trasformare che è stata applicata ai file js originale ha ribattezzato il 'Widget' variabile in qualcosa come "_widget_Js". Tuttavia, ho compilato il JS insieme alle mappe sorgente, quindi l'ispettore chrome mostra i file JS originali, ma non lo riconosce quando faccio riferimento alla variabile 'widget' originale (è fa vedere la variabile '_widget_Js', ma di certo non voglio dover cercare la variabile tradotta compilata ogni volta che eseguo il debug!).

Qualche suggerimento su come posso ottenere il chrome per riconoscere il nome di importazione originale? Se aiuta, posso fornire maggiori informazioni sulla mia configurazione (gulp + browserify + babelify). Grazie!

Answer 1

Non c'è davvero niente che tu possa fare. Se Chrome implementa il supporto per i mapping nella mappa di origine names, ciò sarà di aiuto.

Answer 2

Come @JMM note i nomi delle variabili di mapping di origine non funzionano attualmente. Babel deve modificare i nomi delle variabili delle importazioni per supportare exported bindings dai moduli ES2015.

Ho creato un plug-in Babel 6 chiamato babel-plugin-transform-es2015-modules-commonjs-simple che importerà i moduli senza modificare i nomi dei simboli, al costo di interrompere il comportamento dei "binding" dei moduli ES6. Spetta a te decidere se vale questo compromesso. Poiché questo concetto non esiste nemmeno in CommonJS, è stato facile per me.

Si tratta di una sostituzione drop-in per 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", 

... più plugin

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

Se si utilizza preset, si tratta di un un po 'più complicato, dal momento che al momento non esiste un modo chiaro per sostituire i plug-in dai preset, ci sono istruzioni o n the repo.

È possibile attivare o disattivare il comportamento in qualsiasi momento con l'opzione noMangle. Il plugin tiene traccia della versione e in effetti della maggior parte del codice sorgente della trasformazione di commonjs di babel nativo.