CODEWITHSUNDEEP
laravel-5webpackbabeljslaravel-mix
B nM
B nM

Reputation: 409

how to compile js to es5 with laravel mix?

I have laravel Vue app and it works perfectly with chrome and firefox. but it doesn't work on Edge or IE11 and the console shows error on arrow function!? How to compile or transpile to es5 with laravel mix and webpack? could you show the correct configuration for webpack.mix.js? tnx alot

Upvotes: 4

Views: 3805

Answers (3)

Marcelo The Mage Coder
Marcelo The Mage Coder

Reputation: 2212

UPDATE February 2020

If anyone still need help with this, mix already provide a babel compilation to es5:

A slight variation of mix.scripts() is mix.babel(). Its method signature is identical to scripts; however, the concatenated file will receive Babel compilation, which translates any ES2015 code to vanilla JavaScript that all browsers will understand.

You can use it like this:

mix.babel(['public/js/es6file.js'], 'public/js/app.es5.js')

DOCS

Upvotes: 4

B nM
B nM

Reputation: 409

after a lot of search, I've found out that this Vuecomponent causes the error "https://github.com/godbasin/vue-select2" how can I compile it to es5.

the edge console error: Expected identifier, string or number

and the corresponding line that it shows is this:

setOption(val = []) {
      this.select2.empty();
      this.select2.select2({
----->     ...this.settings,
        data: val
      });
      this.setValue(this.value);
    },

sorry for taking your time

Upvotes: 0

Ewomazino Ukah
Ewomazino Ukah

Reputation: 2366

In order to compile your es6 code to es5 follow the following steps:

1) install the babel-env preset

npm install @babel/preset-env --save

And then declare it in your .babelrc in the root directory:

{
  "presets": ["@babel/preset-env"]
}

2) compile your code using 

npm run dev //for dev environment

or

npm run prod // for production environment

Upvotes: 2

Related Questions