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

Posted 2021-05-06

我正在使用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') 

答案

首先，您可能不应该使用vue-loader@15.0+作为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'] } } }; });