0

Our code in production needs to be minified/uglified ES 5 but in the source we're using ES 6 (and transforming with Babel).

I'm trying to figure the correct workflow to maintaining source maps to the original ES 6 source code after running UglifyJS on the transpiled code.

We're using GruntJS.

Any existing solutions?

krulik
  • 976
  • 1
  • 10
  • 31

1 Answers1

1

Firsly, some build config would make the question easier to answer. But assuming you run Babel and Uglify seperately. Say like this:

grunt.initConfig({
  babel: {
    options: {
      sourceMap: true
    },
    dist: {
      files: {
        "dist/app.js": "src/app.js"
      }
    }
  },
  uglify: {
    my_target: {
      files: {
        'dist/app.min.js': ['dist/app.js']
      }
    }
  }      
});

You need to use the babel-plugin-uglify as follows:

grunt.initConfig({
  babel: {
    options: {
      sourceMap: true,
      plugins: ["uglify:after"]
    },
    dist: {
      files: {
        "dist/app.min.js": "src/app.js"
      }
    }
  }      
});
mikeapr4
  • 2,830
  • 16
  • 24
  • Thanks! I'll test this and update. In our current build we delete the babel source maps before uglifying. Do we need to move this step after the uglify task or remove it altogether? – krulik Apr 26 '17 at 15:56
  • Not sure I understand why you would delete the babel source maps during the build process, if you don't want source maps in certain flows (say production build) you'd be better off turning them off in babel. – mikeapr4 Apr 26 '17 at 16:06
  • Thanks, you've made me realize its totally redundant. It's an artifact of initial exploration with Babel. – krulik Apr 27 '17 at 07:03
  • Unfortunately this plugin doesn't work with Babel 6. – krulik May 28 '17 at 10:28