title: Babel ES6 Modules: Why is babel renaming imports
body: <p>When running babel over my ES6 imports it renames my imports all the way through my source:</p>
  
  <pre><code>import {foo as bar} from './bar';
  console.log(bar);
  </code></pre>
  
  <p>becomes</p>
  
  <pre><code>'use strict';
  var _bar = require('./bar');
  console.log(_bar.foo);
  </code></pre>
  
  <p>A named import is renamed from:</p>
  
  <pre><code>import {bar} from './bar';
  console.log(bar);
  </code></pre>
  
  <p>to</p>
  
  <pre><code>'use strict';
  var _bar = require('./bar');
  console.log(_bar.bar);
  </code></pre>
  
  <p>And it is even worse with default imports, since a 2 is also added:</p>
  
  <pre><code>import bar from './bar';
  console.log(bar);
  </code></pre>
  
  <p>becomes</p>
  
  <pre><code>'use strict';
  function _interopRequireDefault(obj) { return obj &amp;&amp; obj.__esModule ? obj : { 'default': obj }; }
  var _bar = require('./bar');
  var _bar2 = _interopRequireDefault(_bar);
  console.log(_bar2['default']);
  </code></pre>
  
  <p>Why is babel doing this? Background: When debugging an application in Chrome, I need to go to the source file to find out how the variable has been renamed to get its current value since Chrome does not know that <code>bar</code> has been renamed to <code>_bar.bar</code> ... It makes debugging with tools like WebStorm almost impossible ...</p>
  
  <p>Why can't babel transform the named import to</p>
  
  <pre><code>'use strict';
  var _bar = require('./bar');
  var bar = _bar.bar;
  console.log(bar);
  </code></pre>
  
  <p>and the default import to</p>
  
  <pre><code>'use strict';
  function _interopRequireDefault(obj) { return obj &amp;&amp; obj.__esModule ? obj : { 'default': obj }; }
  var _bar = require('./bar');
  var _bar2 = _interopRequireDefault(_bar);
  var bar = _bar2['default']
  console.log(bar);
  </code></pre>