Debugging with webpack, ES6 and Babel

This is an issue with Javascript source maps, which don’t currently support mapping symbol names, and babel, which changes the names of import-ed modules when compiling to CommonJS from ES2105 module syntax.

Babel does this to fully support the fact that ES2015 modules export bindings by resolving all references to imports whenever they are used in code, instead of at import time.

If you aren’t writing modules that depend on exporting bindings (as is likely, since you couldn’t actually do this with CommonJS), then you may prefer to preserve variable names when transpiling ES2015. I created an alternative to the native babel commonjs module transform for Babel 6 that preserves variable names: babel-plugin-transform-es2015-modules-commonjs-simple. This is a drop-in replacement for babel-plugin-transform-es2015-modules-commonjs, the native babel transform.

You can use this with webpack or node. A typical config might be:

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

The module babel-preset-es2015-webpack is a fork of the standard es2015 preset that does not include the module transform, because you want to use the alternate version. This works for node also. These modules are used in .babelrc:

{
    "presets": [
        "es2015-webpack"
    ],
    "plugins": [
        "transform-runtime",
        ["transform-es2015-modules-commonjs-simple", {
            "noMangle": true
        }]
    ]
}

transform-runtime is usually a good idea to include in any substantive project to avoid extra repetition of generated code. Typical module config in webpack.config.js:

module: {
    loaders: [
        {
            loader: "babel-loader",
            include: [path.resolve(__dirname, "src")]                
        }
    ]
},
devtool: '#inline-source-map'

The resulting code won’t change the names of imports, so debugging with source maps will provide you with access to symbols.