Vite React 项目中使用 JavaScript

先前的 React 项目是基于 CRA + JavaScript的，直接在 js 中书写 jsx 语法。最近将一个 这样的项目迁移到 Vite 2，结果测试时发现，使用 Vite 启动时就会抛出一堆问题，看过 Vite 官方文档的故障排除也没有提及此类问题。

无法解析用于导入分析的源文件

报错如下：

原因

Vite 在启动时会做依赖的预构建，运行时默认都只会对 jsx 与 tsx 做语法转换。不会对 js 做 jsx 的语法转换，因此提示“内容中包含无效的 JS 语法”。

解决办法

当然按照错误提示我们直接将所有 .js 文件改为 .jsx，写个脚本或使用工具批量修改文件类型也不是太麻烦，这是一个解决办法。

为了刨根知底，同时为了项目最低成本的接入 Vite 使用，尽力避免修改代码。得寻找其它办法解决一下。

1. 使用 babel 插件 @babel/plugin-transform-react-jsx

安装 @babel/plugin-transform-react-jsx 插件，让 Vite 在运行时对 js 文件转换

npm i @babel/plugin-transform-react-jsx

2. 修改配置 vite.config.js文件

export default defineConfig({
  plugins: [react({
    babel: {
      plugins: ['@babel/plugin-transform-react-jsx']
    }
  })]
})

esbuild 加载器当前被设置为 js。

注意：预构建加入了 babel 转换，一定程度影响项目的启动速度。

JSX 语法扩展目前没有启用

再次启动验证，又发现一个报错。

X [ERROR] The JSX syntax extension is not currently enabled
    src/App.js:9:4:
      9 │     <div className="App">
        ╵     ^
  The esbuild loader for this file is currently set to "js" but it must be set to
  "jsx" to be able to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to
  do that.

原因

默认情况下，esbuild 应用于 ts、jsx和 tsx 文件。具体到我的项目必须被设置为 jsx 才能生效.

解决办法

可以使用 loader 选项更改 esbuild 配置，将所有 js 文件视为 jsx：

export default defineConfig({
  // ...
  esbuild: {
    loader: "jsx",
  },
  optimizeDeps: {
    esbuildOptions: {
      loader: {
        ".js": "jsx"
      }
    }
  }
})

注意：使用 jsx 加载器加载 js文件会降低性能。

React 未定义

再次启动验证，又发现一个报错。

App.js:8 Uncaught ReferenceError: React is not defined
    at App (App.js:8:3)

原因

JSX 是 依赖 React 的, 18 之前版本一定要导入 React

解决办法

需要在提示错误的文件中引入React 即可，还是有一定工作量的。

再次启动验证，终于运行成功了。My God!😓

参考链接

• 依赖的预构建
• vite-plugin-react