为什么babelConfig在Webpack Encore中不起作用?

时间:2018-12-05 12:45:12

标签: vue.js webpack babel webpack-encore

我想为我的项目添加对异步/等待功能的支持。

我安装

    "@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文件,并在其中写入了相同的配置。但是很遗憾,这没有帮助(

1 个答案:

答案 0 :(得分:0)

使用.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');
})