Breakpoint debugging minfied/mangled/compiled variables

Question

Working on building JavaScript sourcemaps into my workflow and I\'ve been looking for some documentation on a particular part of debugging source maps. In the picture below I\'m

Answer 1

There's still no solution to mapping variable names in Javascript source maps, but there's a solution for Babel 6. As we've adopted ES2015, the mangled import names became a major pain point during development. So I created an alternative to the CommonJS module transform that does not change the import names called babel-plugin-transform-es2015-modules-commonjs-simple.

As long as you aren't writing modules that depend on exporting dynamic bindings it is a drop-in replacement for the default babel commonjs module transform:

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

and .babelrc:

"plugins": ["transform-es2015-modules-commonjs-simple"]

This will compile ES2015 modules to CommonJS without changing any of the symbol names of imported modules. Caveats are described in the readme.

This won't help you with minifying/uglifying, though, so the best solution seems to be to just don't use minification during development. Then at least it's only a problem if you have to debug something on a production web site.