Symfony 4 + VueJs：Webpack Encore配置支持async/await

我之前也碰到过一模一样的问题！这个错误本质是async/await语法依赖的regeneratorRuntime没有被正确引入，而Webpack Encore默认的Babel配置里没包含这个支持。不用去折腾原生Webpack的复杂配置，直接通过Encore的API就能轻松搞定，步骤很简单：

1. 安装必要的Babel依赖 #

首先需要安装两个核心包，它们会帮我们处理runtime的引入逻辑：

# 使用Yarn的话
yarn add @babel/plugin-transform-runtime @babel/runtime --dev

# 使用NPM的话
npm install @babel/plugin-transform-runtime @babel/runtime --save-dev

2. 修改Webpack Encore配置文件 #

打开你的webpack.config.js，在现有的Encore配置链中添加Babel插件的配置：

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

Encore
    // 保留你已有的配置，比如：
    // .setOutputPath('public/build/')
    // .setPublicPath('/build')
    // .addEntry('app', './assets/js/app.js')
    // ... 其他已有配置项

    // 添加Babel插件配置
    .configureBabel((config) => {
        // 引入transform-runtime插件，自动处理regeneratorRuntime
        config.plugins.push('@babel/plugin-transform-runtime');
    })

    // 可选：如果你需要兼容旧浏览器，自动按需引入polyfill
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3; // 启用这个需要先安装core-js@3：yarn add core-js@3 --dev
    })
;

module.exports = Encore.getWebpackConfig();

3. 重新构建并测试 #

运行Encore的构建命令，让配置生效：

# 开发环境
yarn encore dev

# 生产环境
yarn encore production

刷新页面后，Uncaught ReferenceError: regeneratorRuntime is not defined的错误应该就彻底消失了！

简单解释下原理：@babel/plugin-transform-runtime会把regeneratorRuntime作为局部变量引入，既解决了缺失问题，又避免了全局变量污染；如果开启了configureBabelPresetEnv的配置，Babel还会根据你指定的浏览器范围，自动按需引入所需的polyfill，不用手动在代码里导入整个core-js，大大减少打包体积。

内容的提问来源于stack exchange，提问作者Joris