Convert ES6 to ES2015 using babel and laravel-mix

Question

I have ES6 JavaScript code in my Vue components. In order to support IE 11 I need to convert it to ES5 code using babel and laravel-mix. How do I do that?

Here is my webpack.mix.js file.

let mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
.js('resources/assets/js/admin-app.js', 'public/js')

Answer 1

The code is not 100% correct: babel first argument should be an array:

mix.js('resources/assets/js/app.js', 'public/js')
     .babel(['public/js/app.js'], 'public/js/app.es5.js')
     .sass('resources/assets/sass/app.scss', 'public/css');

Answer 2

There's a mix.babel() command that can handle this.

It's identical to mix.scripts() so it requires a little more legwork. I cheat and do this and then serve the es5.js to IE:

mix.js('resources/assets/js/app.js', 'public/js')
  .babel('public/js/app.js', 'public/js/app.es5.js')
  .sass('resources/assets/sass/app.scss', 'public/css');