How to preserve sourcemaps from Babel transpiling to r.js uglifying?

Question

I'm writing ES6 JavaScript modules and using Babel to transpile them to ES5. Babel generates sourcemaps that point back to the original ES6 code. I then use r.js to take those ES5 AMD modules and combine and uglify them. r.js creates a sourcemap that shows the ES5 files. I want the ES6 ones from the first step. My grunt file looks like this:

module.exports = function(grunt) {

  require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks

  // Project configuration.
  grunt.initConfig({
    babel: {
      options: {
        modules: "amd",
        sourceMap: true
      },
      dist: {
        files: {
          "es5/editor.js": "src/editor.js",
          "es5/editor-events.js": "src/editor-events.js"
        }
      }
    },
    requirejs: {
      production: {
        options: {
          baseUrl: "es5",
          mainConfigFile: "es5/require.config.js",
          name: "../node_modules/almond/almond",
          include: ["editor"],
          out: "dist/ed.js",
          optimize: "uglify2",
          generateSourceMaps: true,
          preserveLicenseComments: false
        }
      }
    }
  });

  // Default task(s).
  grunt.registerTask('default', ['babel', 'requirejs']);

};

It compiles everything perfectly. But it loses the nice ES6 sourcemaps. Any way to keep them? Is there a better build process that'll get me to a single, browser-friendly JavaScript file?

Answer 1

you shouldn't use two different steps for building your app. one for transpiling and an other one for bundling. you should have one step instead.

you could use browserify to bundle them and babelify as transpiler. the command would look like this:

browserify app.js -t babelify -d -o bundle.js

Note: -d (debug) will enable the sourcemaps. they will point to the es6 files.