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"]
}
Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐