Настройте веб-пакет на бис для async и await (Symfony 4 и VueJs)

Я установил проект VueJs в Symfony 4, но был удивлен, когда у меня была ошибка с await и async (Uncaught ReferenceError: регенераторRuntime не определен)

Я нахожу много информации о веб-паке, но не о веб-паке на бис

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

Какая конфигурация у webpack.config.js с поддержкой webpack (Symfony 4)?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
0
2 439
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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

Вы также можете использовать плагин babel без изменения конфигурации веб-пакета.

babel-plugin-transform-async-to-generator

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

например часть нашей конфигурации .babelrc:

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

Согласно https://babeljs.io/docs/en/babel-polyfill

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

И это отлично работает с Webpack Encore.

Другие вопросы по теме