使用babel来传输vue模板，而不是buble

Question

我正在尝试使用@babel/plugin-proposal-optional-chaining，这样我就可以在我的vue模板中使用{{ user?.name || 'Oops' }}。我已经将插件添加到了babel.config.js中，但它仍然会出现vue加载程序错误。经过一些搜索，vue似乎使用buble而不是babel来传输模板标签中的js。

有没有一种方法可以使用babel而不是buble来传输模板中的js？

Answer 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加载器

如果不是webpack，请添加更多关于您的项目结构和编译/传输方式的信息(或迁移到webpack是传输的好朋友)。

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

希望它能帮助至少一点：)