使用 babel 转换 vue 模板而不是 buble

Posted 2023-02-22

【中文标题】使用 babel 转换 vue 模板而不是 buble

【英文标题】：Use babel for transpiling vue template instead of buble

【发布时间】：2019-06-26 09:51:37

【问题描述】：

我正在尝试使用@babel/plugin-proposal-optional-chaining，所以我可以在我的 vue 模板中使用 user?.name || 'Oops' 。我已将插件添加到我的 babel.config.js 中，但它仍然出现 vue-loader 错误。经过一番搜索，似乎 vue 使用 buble 而不是 babel 来转换模板标签内的 js。

有没有办法使用 babel 代替 buble 来转译模板中的 js？

【问题讨论】：

看起来没有配置vue-template-compiler的选项，但由于Babel插件在<script>块中工作，解决方法是使用返回user?.name的计算属性.

是的，这是我的后备解决方案，但太糟糕了。

【参考方案1】：

如果您使用的是 webpack，请在 build/webpack..conf.js 上尝试此操作 （替换测试匹配的位置并根据您的喜好进行调整）

module.exports = 
  module: 
    rules: [
      
        test: /\.vue$/,
        loader: 'vue-loader',
        options: 
          loaders: 
            js: 'babel-loader'
          
        
      ,
      
        test: /\.js$/,
        use: [
          loader: "babel-loader",
          options:  presets: ['es2015'], compact: false   // Add here your options!
        ]
      ,
      ...
    ]
    ...
  
  ...

也许你必须安装和配置 babel 并使用文件 .babelrc 来添加提案和 babel-loader

如果不是 webpack，请添加更多关于你的项目结构和编译/转译方式的信息（或迁移到 webpack，转译的好朋友）。

如果您需要更多帮助，请告诉我。

希望它对至少有一点帮助 :)

【讨论】：

我使用 Vue CLI 来初始化应用程序，所以 webpack 配置是自动生成的。我尝试了您的配置（并添加了对 node_modules 的排除），这导致“无法安装模板”，但至少开发服务器启动了。使用 Vues 检查工具，我可以看到 webpack 配置，它很大，我不知道发生了什么。如果你想看：pastebin.com/Jm2nTYKZ 让那个 babel 插件工作对我来说并不是那么重要，所以也许我应该放弃。

而且仅供参考，插件在 .js 或