为 async 和 await 配置 webpack encore（Symfony 4 和 VueJs）答案

【问题标题】：Configure webpack encore for async and await (Symfony 4 and VueJs)为 async 和 await 配置 webpack encore（Symfony 4 和 VueJs）
【发布时间】：2018-04-27 07:32:35
【问题描述】：

我在 Symfony 4 中安装了一个 VueJs 项目，但是当我遇到 await 和 async 错误时我很惊讶（未捕获的 ReferenceError: regeneratorRuntime 未定义）

我找到了很多关于 webpack 的信息，但没有找到 webpack encore

https://github.com/babel/babel/issues/5085

带有 webpack encore (Symfony 4) 的 webpack.config.js 的配置是什么？

【问题讨论】：

标签： javascript symfony vue.js symfony4 webpack-encore

【解决方案1】：

你也可以使用 babel 插件，无需更改 webpack 配置

babel-plugin-transform-async-to-generator

https://babeljs.io/docs/plugins/transform-async-to-generator/

例如我们 .babelrc 配置的一部分：

{
  "presets": ["es2015"],
  "plugins": [
    "transform-async-to-generator"
  ],
}

【讨论】：

【解决方案2】：

根据https://babeljs.io/docs/en/babel-polyfill

import "core-js/stable";
import "regenerator-runtime/runtime";

这与 Webpack Encore 配合得很好

【讨论】：

【解决方案3】：

解决办法是

    .configureBabel(function(babelConfig) {
        babelConfig.presets = ['es2015','stage-2']
        babelConfig.plugins = ['transform-runtime']
    })

文件的所有内容

var Encore = require('@symfony/webpack-encore');

Encore
    // the project directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // the public path used by the web server to access the previous directory
    .setPublicPath('/build')
    .cleanupOutputBeforeBuild()
    //.createSharedEntry('assets', ['babel-polyfill'])
    .enableSourceMaps(!Encore.isProduction())
    // uncomment to create hashed filenames (e.g. app.abc123.css)
    // .enableVersioning(Encore.isProduction())

    // uncomment to define the assets of the project
    .addEntry('js/app', './assets/js/app.js')
    .addEntry('vue', './assets/js/Vue/main.js')
    .addStyleEntry('css/app', './assets/scss/style.scss')
    .addStyleEntry('css/vue', './assets/scss/vue.scss')
    // uncomment if you use Sass/SCSS files
    .enableSassLoader()
    .autoProvidejQuery()
    .enableVueLoader()
    .enableSassLoader(function(sassOptions) {}, {
            resolveUrlLoader: false
     })
    .configureBabel(function(babelConfig) {
        babelConfig.presets = ['es2015','stage-2']
        babelConfig.plugins = ['transform-runtime']
    })
;

module.exports = Encore.getWebpackConfig();

当然你必须安装包

npm install babel-preset-stage-2
npm install babel-preset-es2015 (or es2017)

npm install babel-plugin-transform-runtime

【讨论】：