<p dir="auto">When babel transforms ES6 module format into CommonJS format, the variable names become mangled, e.g.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import _ from 'underscore'"><pre class="notranslate"><code class="notranslate">import _ from 'underscore'
</code></pre></div>
<p dir="auto">becomes</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="var _underscore = require('./underscore')
var _underscore2 = _interopRequireDefault(_underscore)"><pre class="notranslate"><code class="notranslate">var _underscore = require('./underscore')
var _underscore2 = _interopRequireDefault(_underscore)
</code></pre></div>
<p dir="auto">.. _underscore is only used once, and <code class="notranslate">_underscore2</code> is now the module (almost - see below). This makes debugging difficult since the source maps at present do not support symbol name mapping, and may not for some time: see <a href="https://code.google.com/p/chromium/issues/detail?id=327092" rel="nofollow">https://code.google.com/p/chromium/issues/detail?id=327092</a></p>
<p dir="auto">The benefits of using ES6 module format go away pretty quickly when they come at the consequence of effective debugging. While I guess you can sort of "know" that they get transmogrified into "_variablename2", the gui tools in the debugger don't work, and it just makes it harder to work with the code.</p>
<p dir="auto">Probably related: every reference to a default import within the code now refers to</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="_underscore2[&quot;default&quot;]"><pre class="notranslate"><code class="notranslate">_underscore2["default"]
</code></pre></div>
<p dir="auto">... I can't think why the symbol wouldn't be defined as the property referenced inline up front, same as the original import statement, rather than requiring all the references in code to be de-optimized this way.</p>
<p dir="auto">I assume this all has to do with some implementation detail of the module transformation process, and I imagine if it was easy not to do this, then it wouldn't already :) But it would be a big help to fix it -  it's kind of a showstopper for switching to ES6 module format.</p>
<p dir="auto">X-post from <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="113064352" data-permission-text="Title is private" data-url="https://github.com/webpack/webpack/issues/1544" data-hovercard-type="issue" data-hovercard-url="/webpack/webpack/issues/1544/hovercard" href="https://github.com/webpack/webpack/issues/1544">webpack/webpack#1544</a>:</p>
<p dir="auto">For example, if I have the js:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="    import React, {PropTypes} from &quot;react&quot;;

    import Branding from &quot;./Branding&quot;;

    const Layout = ({children, customSignIn}) =&gt; (
        &lt;div className=&quot;container&quot; style={{marginTop: 60}}&gt;
            &lt;div className=&quot;well&quot; style={{padding: 50}}&gt;

                &lt;div className=&quot;panel-body&quot;&gt;
                    &lt;div className=&quot;col-lg-6&quot; style={{textAlign: &quot;center&quot;}}&gt;
                        &lt;Branding customSignIn={customSignIn} /&gt;
                    &lt;/div&gt;
                    &lt;div className=&quot;col-lg-6&quot;&gt;
                        {children}
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    );

    Layout.propTypes = {
        children:     PropTypes.node,
        customSignIn: PropTypes.string,
    };

    export {Layout as default};"><pre class="notranslate">    <span class="pl-k">import</span> <span class="pl-v">React</span><span class="pl-kos">,</span> <span class="pl-kos">{</span><span class="pl-v">PropTypes</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"react"</span><span class="pl-kos">;</span>

    <span class="pl-k">import</span> <span class="pl-v">Branding</span> <span class="pl-k">from</span> <span class="pl-s">"./Branding"</span><span class="pl-kos">;</span>

    <span class="pl-k">const</span> <span class="pl-v">Layout</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">{</span>children<span class="pl-kos">,</span> customSignIn<span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"container"</span> <span class="pl-c1">style</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span><span class="pl-c1">marginTop</span>: <span class="pl-c1">60</span><span class="pl-kos">}</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
            <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"well"</span> <span class="pl-c1">style</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span><span class="pl-c1">padding</span>: <span class="pl-c1">50</span><span class="pl-kos">}</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>

                <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"panel-body"</span><span class="pl-c1">&gt;</span>
                    <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"col-lg-6"</span> <span class="pl-c1">style</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span><span class="pl-c1">textAlign</span>: <span class="pl-s">"center"</span><span class="pl-kos">}</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
                        <span class="pl-c1">&lt;</span><span class="pl-ent">Branding</span> <span class="pl-c1">customSignIn</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">customSignIn</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
                    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
                    <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"col-lg-6"</span><span class="pl-c1">&gt;</span>
                        <span class="pl-kos">{</span><span class="pl-s1">children</span><span class="pl-kos">}</span>
                    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
                <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
            <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-v">Layout</span><span class="pl-kos">.</span><span class="pl-c1">propTypes</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
        <span class="pl-c1">children</span>:     <span class="pl-v">PropTypes</span><span class="pl-kos">.</span><span class="pl-c1">node</span><span class="pl-kos">,</span>
        <span class="pl-c1">customSignIn</span>: <span class="pl-v">PropTypes</span><span class="pl-kos">.</span><span class="pl-c1">string</span><span class="pl-kos">,</span>
    <span class="pl-kos">}</span><span class="pl-kos">;</span>

    <span class="pl-k">export</span> <span class="pl-kos">{</span><span class="pl-v">Layout</span> <span class="pl-k">as</span> <span class="pl-s1">default</span><span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Webpack+babel produces:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="    &quot;use strict&quot;;

    Object.defineProperty(exports, &quot;__esModule&quot;, {
        value: true
    });

    function _interopRequireDefault(obj) { return obj &amp;&amp; obj.__esModule ? obj : { &quot;default&quot;: obj }; }

    var _react = __webpack_require__(3);

    var _react2 = _interopRequireDefault(_react);

    var _Branding = __webpack_require__(283);

    var _Branding2 = _interopRequireDefault(_Branding);

    var Layout = function Layout(_ref) {
        var children = _ref.children;
        var customSignIn = _ref.customSignIn;
        return _react2[&quot;default&quot;].createElement(
            &quot;div&quot;,
            { className: &quot;container&quot;, style: { marginTop: 60 } },
            _react2[&quot;default&quot;].createElement(
                &quot;div&quot;,
                { className: &quot;well&quot;, style: { padding: 50 } },
                _react2[&quot;default&quot;].createElement(
                    &quot;div&quot;,
                    { className: &quot;panel-body&quot; },
                    _react2[&quot;default&quot;].createElement(
                        &quot;div&quot;,
                        { className: &quot;col-lg-6&quot;, style: { textAlign: &quot;center&quot; } },
                        _react2[&quot;default&quot;].createElement(_Branding2[&quot;default&quot;], { customSignIn: customSignIn })
                    ),
                    _react2[&quot;default&quot;].createElement(
                        &quot;div&quot;,
                        { className: &quot;col-lg-6&quot; },
                        children
                    )
                )
            )
        );
    };

    Layout.propTypes = {
        children: _react.PropTypes.node,
        customSignIn: _react.PropTypes.string
    };

    exports[&quot;default&quot;] = Layout;
    module.exports = exports[&quot;default&quot;];"><pre class="notranslate">    <span class="pl-s">"use strict"</span><span class="pl-kos">;</span>

    <span class="pl-v">Object</span><span class="pl-kos">.</span><span class="pl-en">defineProperty</span><span class="pl-kos">(</span><span class="pl-s1">exports</span><span class="pl-kos">,</span> <span class="pl-s">"__esModule"</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
        <span class="pl-c1">value</span>: <span class="pl-c1">true</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-k">function</span> <span class="pl-en">_interopRequireDefault</span><span class="pl-kos">(</span><span class="pl-s1">obj</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">return</span> <span class="pl-s1">obj</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">obj</span><span class="pl-kos">.</span><span class="pl-c1">__esModule</span> ? <span class="pl-s1">obj</span> : <span class="pl-kos">{</span> <span class="pl-s">"default"</span>: <span class="pl-s1">obj</span> <span class="pl-kos">}</span><span class="pl-kos">;</span> <span class="pl-kos">}</span>

    <span class="pl-k">var</span> <span class="pl-s1">_react</span> <span class="pl-c1">=</span> <span class="pl-en">__webpack_require__</span><span class="pl-kos">(</span><span class="pl-c1">3</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-k">var</span> <span class="pl-s1">_react2</span> <span class="pl-c1">=</span> <span class="pl-en">_interopRequireDefault</span><span class="pl-kos">(</span><span class="pl-s1">_react</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-k">var</span> <span class="pl-s1">_Branding</span> <span class="pl-c1">=</span> <span class="pl-en">__webpack_require__</span><span class="pl-kos">(</span><span class="pl-c1">283</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-k">var</span> <span class="pl-s1">_Branding2</span> <span class="pl-c1">=</span> <span class="pl-en">_interopRequireDefault</span><span class="pl-kos">(</span><span class="pl-s1">_Branding</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-k">var</span> <span class="pl-v">Layout</span> <span class="pl-c1">=</span> <span class="pl-k">function</span> <span class="pl-v">Layout</span><span class="pl-kos">(</span><span class="pl-s1">_ref</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">var</span> <span class="pl-s1">children</span> <span class="pl-c1">=</span> <span class="pl-s1">_ref</span><span class="pl-kos">.</span><span class="pl-c1">children</span><span class="pl-kos">;</span>
        <span class="pl-k">var</span> <span class="pl-s1">customSignIn</span> <span class="pl-c1">=</span> <span class="pl-s1">_ref</span><span class="pl-kos">.</span><span class="pl-c1">customSignIn</span><span class="pl-kos">;</span>
        <span class="pl-k">return</span> <span class="pl-s1">_react2</span><span class="pl-kos">[</span><span class="pl-s">"default"</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span>
            <span class="pl-s">"div"</span><span class="pl-kos">,</span>
            <span class="pl-kos">{</span> <span class="pl-c1">className</span>: <span class="pl-s">"container"</span><span class="pl-kos">,</span> <span class="pl-c1">style</span>: <span class="pl-kos">{</span> <span class="pl-c1">marginTop</span>: <span class="pl-c1">60</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
            <span class="pl-s1">_react2</span><span class="pl-kos">[</span><span class="pl-s">"default"</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span>
                <span class="pl-s">"div"</span><span class="pl-kos">,</span>
                <span class="pl-kos">{</span> <span class="pl-c1">className</span>: <span class="pl-s">"well"</span><span class="pl-kos">,</span> <span class="pl-c1">style</span>: <span class="pl-kos">{</span> <span class="pl-c1">padding</span>: <span class="pl-c1">50</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
                <span class="pl-s1">_react2</span><span class="pl-kos">[</span><span class="pl-s">"default"</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span>
                    <span class="pl-s">"div"</span><span class="pl-kos">,</span>
                    <span class="pl-kos">{</span> <span class="pl-c1">className</span>: <span class="pl-s">"panel-body"</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
                    <span class="pl-s1">_react2</span><span class="pl-kos">[</span><span class="pl-s">"default"</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span>
                        <span class="pl-s">"div"</span><span class="pl-kos">,</span>
                        <span class="pl-kos">{</span> <span class="pl-c1">className</span>: <span class="pl-s">"col-lg-6"</span><span class="pl-kos">,</span> <span class="pl-c1">style</span>: <span class="pl-kos">{</span> <span class="pl-c1">textAlign</span>: <span class="pl-s">"center"</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
                        <span class="pl-s1">_react2</span><span class="pl-kos">[</span><span class="pl-s">"default"</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span><span class="pl-s1">_Branding2</span><span class="pl-kos">[</span><span class="pl-s">"default"</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">customSignIn</span>: <span class="pl-s1">customSignIn</span> <span class="pl-kos">}</span><span class="pl-kos">)</span>
                    <span class="pl-kos">)</span><span class="pl-kos">,</span>
                    <span class="pl-s1">_react2</span><span class="pl-kos">[</span><span class="pl-s">"default"</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span>
                        <span class="pl-s">"div"</span><span class="pl-kos">,</span>
                        <span class="pl-kos">{</span> <span class="pl-c1">className</span>: <span class="pl-s">"col-lg-6"</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
                        <span class="pl-s1">children</span>
                    <span class="pl-kos">)</span>
                <span class="pl-kos">)</span>
            <span class="pl-kos">)</span>
        <span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span><span class="pl-kos">;</span>

    <span class="pl-v">Layout</span><span class="pl-kos">.</span><span class="pl-c1">propTypes</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
        <span class="pl-c1">children</span>: <span class="pl-s1">_react</span><span class="pl-kos">.</span><span class="pl-c1">PropTypes</span><span class="pl-kos">.</span><span class="pl-c1">node</span><span class="pl-kos">,</span>
        <span class="pl-c1">customSignIn</span>: <span class="pl-s1">_react</span><span class="pl-kos">.</span><span class="pl-c1">PropTypes</span><span class="pl-kos">.</span><span class="pl-c1">string</span>
    <span class="pl-kos">}</span><span class="pl-kos">;</span>

    <span class="pl-s1">exports</span><span class="pl-kos">[</span><span class="pl-s">"default"</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-v">Layout</span><span class="pl-kos">;</span>
    <span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-s1">exports</span><span class="pl-kos">[</span><span class="pl-s">"default"</span><span class="pl-kos">]</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Notice all the instances of <code class="notranslate">_react2["default"]</code>... these don't minify well because the "default" is not minified. What would be better would be if webpack added a <code class="notranslate">var _reactDefault = _react2["default"];</code> declaration at the top and used that instead.</p>
<p dir="auto">Notice it also "inlined" my PropTypes definition and the usage became <code class="notranslate">_react.PropTypes</code>. Again, this is less minifiable than if it had generated <code class="notranslate">var _reactPropTypes = _react.PropTypes</code>.</p>
<p dir="auto">This pattern isn't specific to React, but React code certainly suffers greatly from it.</p>