Es6 babelify changes the variable name, the variable cannot be found in the inspector

Question

I am using es6 modules in my application and I am encountering a problem while debugging my chrome inspector. When in my code I do something like the following:

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

Looking at the compiled source file that the browser reads, I see that the babelify transform that was applied to the js source files renamed the widget variable to something like "_widget_Js". However, I compiled JS along with the source maps, so the chrome inspector shows the JS source files, but does not recognize it when I refer to the widget source variable (she sees the variable "_widget_Js", but I certainly don’t want to look for the compiled the translated variable every time I debug it!).

Any suggestions on how I can get chrome to find out the original import name? If this helps, I can provide additional information about my setup (gulp + browserify + babelify). Thanks!

Answer 1

You really can't do anything. If Chrome implements matching support in the original names map, this will help a little.

Answer 2

As @JMM notes, source mapping variable names do not currently work. Babylon needs to change import variable names to support exported bindings from ES2015 modules.

I created a Babel 6 plugin called babel-plugin-transform-es2015-modules-commonjs-simple that will import modules without changing the symbol names due to breaking the "bindings" behavior of ES6 modules. You decide if this is a compromise. Since this the concept does not even exist in CommonJS, it was easy to do for me.

This is a replacement for 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", 

... more plugins

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

If you use presets, this is a little more complicated, because there is currently no clear way to redefine plugins from presets, there are repo instructions.

You can enable or disable the behavior at any time using the noMangle option. The plugin keeps track of the version and really most of the source code of the babel commonjs built-in conversion.