vue 项目中使用 jsx webpack 配置支持 jsx 文件
·
vue + webpack 项目中想要使用 jsx文件,
需要对webpack 配置做一下调整
安装 babel 插件
npm install @babel/preset-env @babel/preset-react --save-dev
npm install @vue/babel-plugin-jsx -D
rules 规则 中对.js 这一项,添加一项.jsx
{
test:/\.(js|jsx)$/,
exclude:/node_modules/,
use:{
loader:'babel-loader',
options:{
presets:['@babel/preset-env','@babel/preset-react'],
}
}
}
在引入的时候配置无需添加.jsx 扩展名
在extensions中添加.jsx 扩展名
// 配置文件扩展名,引入的时候可以不需要加后缀名了
extensions: [ '*', '.js', 'jsx', '.ts', '.vue', '.json']
在 babel 配置中插件添加一行
{
"plugins": ["@vue/babel-plugin-jsx"]
}
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)