CODEWITHSUNDEEP
webpackecmascript-6async-awaitvue.jsbabeljs
sandrooco
sandrooco

Reputation: 8736

vue.js/webpack: How to properly transpile ES6/ES7?

I set up my project with the full webpack template. How do I set it up to use ES7 features like async functions? I read about using babel plugins and tried the following:

{
    test: /\.js$/,
    include: [resolve('src'), resolve('test')],
    use: {
        loader: 'babel-loader',
        options: {
            plugins: [require("babel-plugin-transform-async-to-generator")]
        }
    }
}

From my understanding: This won't transpile the async function in .vue files because it only looks for the .js files. Somehow it works for these - but then it gives me arrow functions which don't work in IE again.

To wrap it up: How can I set up transpiling to use ES6 and ES7 features?

Upvotes: 1

Views: 1385

Answers (2)

Sohail
Sohail

Reputation: 4586

FYI, just incase someone else stumbled upon it and was not able to use async/await with Vuejs projects (like me), here is what I did to get it working -

In order to use await/async you will need to install a couple of Babel dependencies. This works with Vuejs project - 

npm install --save-dev babel-polyfill
npm install --save-dev babel-plugin-transform-regenerator

Once installed, you will need to modify your .babelrc file to use the plugin as follows - 

{
    "plugins": ["transform-regenerator"]
}

and also your webpack.config.js file to use the regenerator as follows - 

require("babel-polyfill");

module.exports = {
  entry: ["babel-polyfill", "./app.js"]
};

Make the necessary changes according to your project structure and filename etc.

Posted in https://stackoverflow.com/a/46734082/2074938

Upvotes: 0

Egor Stambakio
Egor Stambakio

Reputation: 18146

As a result of our discussion:

1) the babel config .babelrc should be edited to handle async-await, for example add stage-3 preset: 

"presets": [
    ["env", { "modules": false }],
    "stage-2", 
    "stage-3"
  ],

2) install this preset

npm: npm install --save-dev babel-preset-stage-3

yarn: yarn add -D babel-preset-stage-3

Upvotes: 1

Related Questions