Möglichkeiten, Vite für die Unterstützung der Verwendung der JSX-Syntax in JS-Dateien zu konfigurieren

Question

Vite erlaubt standardmäßig nicht die Verwendung der JSX-Syntax in .js-Dateien.

Ich habe meine Dateien in .jsx (oder .tsx) umbenannt, aber ich habe einige externe Abhängigkeiten, die nicht umbenannt werden können.

Vite-Fehlerbeispiel:

✘ [FEHLER] Die JSX-Syntaxerweiterung ist derzeit nicht aktiviert

    node_modules/somelib/src/someFile.js:122:11:
      122 │ return <div/>

Wie konfiguriere ich Vite für die Unterstützung von JSX-Ausdrücken in allen .js-Dateien?

Answer 1

您可以通过使用loader选项将所有的js文件视为jsx来更改esbuild配置：

// vite.config.ts
import {defineConfig} from 'vite'

// https://vitejs.dev/config/
export default defineConfig(() => ({
  esbuild: {
    loader: "tsx", // OR "jsx"
    include: [
      // Add this for business-as-usual behaviour for .jsx and .tsx files
      "src/**/*.jsx",
      "src/**/*.tsx",
      "node_modules/**/*.jsx",
      "node_modules/**/*.tsx",

      // Add the specific files you want to allow JSX syntax in
      "src/LocalJsxInJsComponent.js",
      "node_modules/bad-jsx-in-js-component/index.js",
      "node_modules/bad-jsx-in-js-component/js/BadJSXinJS.js",
      "node_modules/bad-jsx-in-js-component/ts/index.ts",
      "node_modules/bad-jsx-in-js-component/ts/BadTSXinTS.ts",

      // --- OR ---

      // Add these lines to allow all .js files to contain JSX
      "src/**/*.js",
      "node_modules/**/*.js",

      // Add these lines to allow all .ts files to contain JSX
      "src/**/*.ts",
      "node_modules/**/*.ts",
    ],
  },
}));

注意：使用.jsx加载器加载.js文件会有性能损耗。

答案来自于Vite的GitHub上的这个讨论，将错误的（旧的）答案标记为“正确”。

更新于2023年3月

原始答案在vite build中无法正常工作，只能在vite dev中正常工作。当前版本在vite@^4.0.0中两者都适用。

您可以克隆并测试解决方案的示例仓库。