要在Vue组件中禁止Babelify转换箭头函数,你可以在Babel配置文件中设置exclude选项。下面是一个包含代码示例的解决方法:
在项目根目录中创建一个名为.babelrc的文件。
在.babelrc文件中添加以下内容:
{
"presets": [
["@babel/preset-env", {
"targets": {
"browsers": [
"> 1%",
"last 2 versions"
]
}
}],
"@vue/babel-preset-jsx"
],
"plugins": [
["@babel/plugin-transform-arrow-functions", { "spec": false }]
]
}
上述配置中,我们使用了@babel/preset-env预设来设置兼容性,@vue/babel-preset-jsx预设用于支持Vue的JSX语法。我们还添加了@babel/plugin-transform-arrow-functions插件,并将spec选项设置为false来禁用箭头函数的转换。
npm install --save-dev @babel/core @babel/preset-env @babel/plugin-transform-arrow-functions @vue/babel-preset-jsx
在上述示例中,handleClick方法是一个箭头函数。由于我们在Babel配置中禁用了箭头函数的转换,所以它将保持不变。
这样,Babelify将不会转换Vue组件中的箭头函数。