Issue 1:
When babel transforms ES6 module format into CommonJS format, the variable names become mangled, e.g.

import _ from 'underscore'

becomes

var _underscore = require('./underscore')
var _underscore2 = _interopRequireDefault(_underscore)

.. _underscore is only used once, and _underscore2 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 https://code.google.com/p/chromium/issues/detail?id=327092

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.

Probably related: every reference to a default import within the code now refers to

_underscore2["default"]

... 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.

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.

Issue 2:
X-post from webpack/webpack#1544:

For example, if I have the js:

import React, {PropTypes} from "react";

import Branding from "./Branding";

const Layout = ({children, customSignIn}) => (
<div className="container" style={{marginTop: 60}}>
<div className="well" style={{padding: 50}}>

<div className="panel-body">
<div className="col-lg-6" style={{textAlign: "center"}}>
<Branding customSignIn={customSignIn} />
</div>
<div className="col-lg-6">
{children}
</div>
</div>
</div>
</div>
);

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

export {Layout as default};

Webpack+babel produces:

"use strict";

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

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": 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["default"].createElement(
"div",
{ className: "container", style: { marginTop: 60 } },
_react2["default"].createElement(
"div",
{ className: "well", style: { padding: 50 } },
_react2["default"].createElement(
"div",
{ className: "panel-body" },
_react2["default"].createElement(
"div",
{ className: "col-lg-6", style: { textAlign: "center" } },
_react2["default"].createElement(_Branding2["default"], { customSignIn: customSignIn })
),
_react2["default"].createElement(
"div",
{ className: "col-lg-6" },
children
)
)
)
);
};

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

exports["default"] = Layout;
module.exports = exports["default"];

Notice all the instances of _react2["default"]... these don't minify well because the "default" is not minified. What would be better would be if webpack added a var _reactDefault = _react2["default"]; declaration at the top and used that instead.

Notice it also "inlined" my PropTypes definition and the usage became _react.PropTypes. Again, this is less minifiable than if it had generated var _reactPropTypes = _react.PropTypes.

This pattern isn't specific to React, but React code certainly suffers greatly from it.