为什么 babelConfig 在 webpack encore 中不起作用？

Question

我想为我的项目添加对 async/await 函数的支持。

我安装

    "@babel/core": "^7.2.0",
    "@babel/plugin-transform-runtime": "^7.2.0",
    "@babel/preset-env": "^7.2.0",
    "@babel/preset-es2015": "^7.0.0-beta.53",
    "@babel/preset-stage-2": "^7.0.0",
    "@babel/runtime": "^7.2.0",

这是我的webpack.config.js

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

Encore
    .setOutputPath('public/build')

    .setPublicPath('/build')

    .addEntry('app', './assets/app.js')

    .enableSourceMaps(!Encore.isProduction())

    .cleanupOutputBeforeBuild()

    .enableBuildNotifications()

    .enableVueLoader()

    .configureBabel(function(babelConfig) {
       babelConfig.presets.push('@babel/preset-env');
       babelConfig.presets.push('@babel/preset-stage-2');
       babelConfig.plugins.push('@babel/plugin-transform-runtime');
    })

;

const config = Encore.getWebpackConfig();

config.externals = {

    mode: 'development',
    // global app config object
    config: JSON.stringify({
        apiUrl: 'http://localhost:80',
        devServer: {
            public: 'http://localhost:3000',
            disableHostCheck: true,
        },
    })
};

config.node = {
    fs: "empty"
};


module.exports = config;

当我运行服务器开发时，出现错误。

    Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Duplicate plugin/preset detected.
If you'd like to use two separate instances of a plugin,
they need separate names, e.g.

  plugins: [
    ['some-plugin', {}],
    ['some-plugin', {}, 'some unique name'],
  ]

我不明白问题是什么。

我还创建了一个 .babelrc 文件并在其中写入了相同的配置。但不幸的是，这并没有帮助（

Answer 1

用于.babelrc像这样更改 babel 配置。该文件应该位于您的项目根目录中

{
  "plugins": ["@babel/plugin-transform-runtime"],
  "presets": [
    [
      "@babel/preset-env",
      ...
    ],
    ...
  ]
}

然后将其从您的webpack.config.js

.configureBabel(function(babelConfig) {
   babelConfig.presets.push('@babel/preset-env');
   babelConfig.presets.push('@babel/preset-stage-2');
   babelConfig.plugins.push('@babel/plugin-transform-runtime');
})