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')

Solution 1

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');

Solution 2

The code is not 100% correct, babel first argument can be an array, if we want to pass multiple files:

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');

Solution 3

I will prefer to maintain app.js as my final js output. It's a preferred naming convention. So like every other person, if babel works for you, then

webpack.confog.js

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

With this I still maintain public/js and entry point through out my application.

But I prefer using the solution I posted here: Laravel Mix: Configure Babel for IE11 compatibility (transformations and polyfills)