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

Posted 2023-02-22

【中文标题】在 vue-loader 中配置 Babel (Symfony Encore)

【英文标题】：Configuring Babel inside vue-loader (Symfony Encore)

【发布时间】：2018-12-01 06:59:47

【问题描述】：

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

【参考方案1】：

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

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

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

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

【讨论】：

非常感谢。我很欣赏这些建议，但如果我们使用 v14 而不使用 addPlugin 会更好吗？它现在似乎工作得很好。

v15 比 v14 发生了巨大变化。 Encore 用于样式提取的 ExtractTextPlugin 不适用于 v15，因此带有嵌入样式的单个文件组件存在一些问题（afaik，我可能错了）。可能并不重要，如果它适合你就好了 =)

太棒了！感谢您提供信息.. 再次感谢您的回答！