vue.js / webpack：如何正确转换ES6 / ES7？(vue.js/webpack: How to properly transpile ES6/ES7?)

vue.js / webpack：如何正确转换ES6 / ES7？(vue.js/webpack: How to properly transpile ES6/ES7?)

我使用完整的webpack模板设置我的项目。 如何设置它以使用异步功能等ES7功能？ 我读到了关于使用babel插件并尝试以下内容：

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

根据我的理解：这不会转换.vue文件中的异步函数，因为它只查找.js文件。 不知何故，它适用于这些 - 但它然后它给了我箭头功能，再次在IE中不起作用。

包装起来：如何设置转换以使用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?

最满意答案

作为我们讨论的结果：

1）应编辑babel config .babelrc以处理async-await ，例如添加stage-3预设：

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

2）安装此预设

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

纱线： yarn add -D babel-preset-stage-3

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