如何在Vite项目的Js文件内写JSX？

React项目一般只有组件会写.jsx，而路由routes目录下引入组件后，需要设置文件router.js后缀为router.jsx，才能正确编译不报错，如果不写为jsx文件，会爆如下错误：

代码语言：javascript复制

Uncaught SyntaxError: Unexpected token '<' 

这对使用create-react-app创建react项目的老铁是难以想象的，webpack几乎不会出现这种错误，原因是webpack配置有关于babel的配置——加载器（babel-loader）可以识别。

解决方法：

在vite.config.js文件内添加如下代码：

代码语言：javascript复制

esbuild: {
    loader: 'jsx',
    include: /src/.*.jsx?$/,
    exclude: []
},

上述代码是简单但不完备的，仅是在创建项目后，添加了上述代码，也可以进行性能优化~

jsx vite

0 人点赞