在 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

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

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

1. 保持原样。 Encore 为 Babel 提供了相当合理的默认值（如果您启用 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（不太可取，因为它会与 Encore 自己执行的 Babel 的内部配置冲突。如果您想要 vue 文件的独立配置，仍然可能有用）：

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