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

Question

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?

Try to add `stage-3` to presets (change `"stage2"` to `["stage-2", "stage-3"]`), install via `npm install --save-dev babel-preset-stage-3`. — Egor Stambakio, May 29 '17 at 14:45
For vue loader loaders are supposed to be specified inside its options: https://vue-loader.vuejs.org/en/configurations/advanced.html . I guess that babel loader should pick up .babelrc, so Babel config can be specified there. — Estus Flask, May 29 '17 at 14:52
@wostex: Where do I have to change this? There's no literal in my whole project specifying "stage-2" or similar... — sandrooco, May 29 '17 at 15:01
@estus: It's strange, the docs don't seem to be in line with the boilerplate - so confusing. — sandrooco, May 29 '17 at 15:01
@Sandrooco my comment was about `babel.rc` - all editions should go there. — Egor Stambakio, May 29 '17 at 15:02
@wostex: My project (from the boilerplate) doesn't have any babel.rc :s — sandrooco, May 29 '17 at 15:49
Your problem seems to be that `async`/`await` is an ES8 feature. — Bergi, May 29 '17 at 15:50
@Bergi Any idea on how to use the babel plugins with the webpack boilerplate? — sandrooco, May 29 '17 at 16:21
@Sandrooco I've installed `vue init webpack project-name` - there's `babel.rc` inside, doublecheck it. — Egor Stambakio, May 29 '17 at 16:22
In which folder should it be? I'm sure there isn't any! Any chance that I screwed up the setup? — sandrooco, May 29 '17 at 16:27
OK @wostex it worked by adding a `.babelrc` (there was really none!) and the `stage-3` thing. :) thanks! — sandrooco, May 29 '17 at 20:14

score 1 · Accepted Answer · edited May 29 '17 at 21:58

1

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

edited May 29 '17 at 21:58

sandrooco

8,016
9
48
86

answered May 29 '17 at 20:19

Egor Stambakio

17,836
5
33
35

score 0 · Answer 2 · answered Oct 13 '17 at 16:21

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

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

2 Answers2