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

Galling

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

Demantoid

I'm getting "mix.combine() requires a full output file path as the second argument.", when trying with "mix.js('resources/assets/js/app.js', 'public/js') .js('resources/assets/js/admin-app.js', 'public/js') .babel('resources/assets/js/spa.js', 'public/js')" – Galling

You need to specify the output file. I have a js file name app.es5.js in my babel line. – Demantoid

Would something like this work? "mix..js('resources/assets/js/spa.js', 'public/js/spa.js') .babel('public/js/spa.js', 'public/js/spa.js')" – Galling

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

Axial

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

Lissettelissi