vue.js/webpack：如何正确转译 ES6/ES7？答案

【问题标题】：vue.js/webpack: How to properly transpile ES6/ES7?vue.js/webpack：如何正确转译 ES6/ES7？
【发布时间】：2017-10-29 21:48:24
【问题描述】：

我使用full webpack template 设置我的项目。如何设置它以使用异步函数等 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 功能？

【问题讨论】：

尝试将stage-3添加到预设（将"stage2"更改为["stage-2", "stage-3"]），通过npm install --save-dev babel-preset-stage-3安装。
对于 vue 加载器，应该在其选项中指定加载器：vue-loader.vuejs.org/en/configurations/advanced.html。我猜 babel loader 应该会选择 .babelrc，所以可以在那里指定 Babel config。
@wostex：我必须在哪里进行更改？在我的整个项目中没有指定“stage-2”或类似的文字......
@estus：很奇怪，这些文档似乎与样板文件不一致——太混乱了。
@Sandrooco 我的评论是关于babel.rc - 所有版本都应该去那里。

标签： webpack ecmascript-6 async-await vue.js babeljs

【解决方案1】：

作为我们讨论的结果：

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

【讨论】：

【解决方案2】：

仅供参考，以防其他人偶然发现它并且无法将 async/await 用于 Vuejs 项目（如我），这是我为使其正常工作所做的 -

为了使用 await/async，您需要安装几个 Babel 依赖项。这适用于 Vuejs 项目 -

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

安装后，您需要修改 .babelrc 文件以使用该插件，如下所示 -

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

还有你的 webpack.config.js 文件来使用再生器，如下所示 -

require("babel-polyfill");

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

根据您的项目结构和文件名等进行必要的更改。

发表于https://stackoverflow.com/a/46734082/2074938

【讨论】：