Convert ES6 to ES2015 using babel and laravel-mix

laravel babeljs laravel-mix
Bereket Gobeze picture Bereket Gobeze · Sep 16, 2018 · Viewed 12.3k times · Source

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

Darryl E. Clarke picture Darryl E. Clarke · Sep 16, 2018

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

Related questions

Polyfill for ie

I'm trying to add a polyfill to my vue.js 2.0/Laravel5.3 application because in internet explorer 11 I receive an error: vuex requires a Promise polyfill in this browser. So I've followed the docs I'm using ecm 6 so I did: npm …

Read More
How Do I Get the Query Builder to Output Its Raw SQL Query as a String?

Given the following code: DB::table('users')->get(); I want to get the raw SQL query string that the database query builder above will generate. In this example, it would be SELECT * FROM users. How do I do …

Read More
How to Create Multiple Where Clause Query Using Laravel Eloquent?

I'm using the Laravel Eloquent query builder and I have a query where I want a WHERE clause on multiple conditions. It works, but it's not elegant. Example: $results = User::where('this', '=', 1) ->where('that', '=', 1) …

Read More