在 vue-loader (Symfony Encore) 中配置 Babel

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

首先，您可能不应该使用 vue-loader@15.0+ 作为 Encore doesn't support it yet（因此，您也不应该在 Encore 配置中添加 addPlugin(new VueLoaderPlugin()) 行）。

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

保持原样。 Encore 为 Babel 提供了非常合理的默认设置（如果启用 vue-loader，它会自动配置）：env preset 在 >1% 浏览器覆盖范围内与目标一起使用。
Adding .babelrc configuration file to project folder.
```
{
    presets: ['env']
}
```

Using Babel-specific configuration callback, provided by Encore:

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

By options callback for vue-plugin configuration（不太可取，因为它会与 Babel 的内部配置发生冲突，由 Encore 本身执行。如果你想要独立配置 vue 文件，它仍然有用）：
```
.enableVueLoader(function(options) {
  options.loaders = {
    js: { loader: 'babel-loader', options: { presets: ['env'] } }
  };
});
```

在 vue-loader (Symfony Encore) 中配置 Babel

Configuring Babel inside vue-loader (Symfony Encore)

webpack

vue.js

vue-loader

webpack-encore

symfony4