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

Question

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

是否可以使用babel而不是buble来转换模板中的js？

Answer 1

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

mid

也许您必须使用文件.babelrc安装和配置babel才能添加提案和babel-loader

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

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

希望它至少对您有帮助：）

Answer 2

试试vue-template-babel-compiler

它使用 Babel 为 Optional Chaining(?.) 启用 Nullish Coalescing(??)、Vue.js SFC 和许多新的 ES 语法。

Github Repo: vue-template-babel-compiler

演示

用法

1.安装

npm install vue-template-babel-compiler --save-dev

2.配置

1. Vue-CLI

DEMO project for Vue-CLI

// vue.config.js
module.exports = {
    chainWebpack: config => {
        config.module
            .rule('vue')
            .use('vue-loader')
            .tap(options => {
                options.compiler = require('vue-template-babel-compiler')
                return options
            })
    }
}

2. Nuxt.js

DEMO project for Nuxt.js

// nuxt.config.js
export default {
  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    loaders: {
      vue: {
        compiler: require('vue-template-babel-compiler')
      }
    },
  },
  // ...
}

Please refer to REAMDE for detail usage

支持 Vue-CLI, Nuxt.js, Webpack ，任何环境都使用 vue-loader。