在vue-loader中配置Babel（Symfony Encore）

Question

我正在使用Symfony Encore为我的项目配置webpack。到目前为止，我已经启用了vue-loader而没有任何问题，但是当我将选项传递给vue-loader时，我很困惑，因为文档对我来说不够清楚，传递或配置任何选项。

我想知道是否有人试图这样做，如果，它是如何正确完成的。

到目前为止，我只启用了vue-loader。

const Encore = require('@symfony/webpack-encore');
const { VueLoaderPlugin } = require('vue-loader');

Encore
  // ...
  .enableVueLoader(function (options) {
    // I need to do something here to enable babel for ES5 target
  })
  .addPlugin(new VueLoaderPlugin()) // because of no support for version 15 yet
  .addEntry('vue/app', './assets/vue/app.js') 

Answer 1

首先，您可能不应该使用[email protected]+作为Encore doesn't support it yet（因此，您也不应该将addPlugin(new VueLoaderPlugin())行添加到Encore配置中）。

其次，您可以通过以下方式配置Babel：

1. 保持原样。对于Babel来说，Encore有相当明智的默认值（如果启用vue-loader则会自动配置）：env预设与>1%浏览器覆盖范围内的目标一起使用。
2. Adding .babelrc configuration file to project folder。

   {
       presets: ['env']
   }

3. Using Babel-specific configuration callback, provided by Encore：

   .configureBabel(function(config) {
     config.presets.push('es2017');
   })

4. By options callback for vue-plugin configuration（不太可取，因为它会与Babel的内部配置冲突，由Encore本身执行。如果你想要vue文件的独立配置，仍然可能有用）：

   .enableVueLoader(function(options) {
     options.loaders = {
       js: { loader: 'babel-loader', options: { presets: ['env'] } }
     };
   });