Cara untuk mengkonfigurasi Vite untuk menyokong menggunakan sintaks JSX dalam fail JS

Question

Vite tidak membenarkan penggunaan sintaks JSX dalam fail .js secara lalai.

Saya telah menamakan semula fail saya kepada .jsx (atau .tsx), tetapi saya mempunyai beberapa kebergantungan luaran yang tidak boleh dinamakan semula.

Contoh ralat vite:

✘ [ERROR] Sambungan sintaks JSX tidak didayakan pada masa ini

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

Bagaimana untuk mengkonfigurasi Vite untuk menyokong ungkapan JSX dalam semua fail .js?

Answer 1

Anda boleh menukar konfigurasi esbuild dengan menganggap semua fail js sebagai jsx menggunakan pilihan loader:

// 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",
    ],
  },
}));

Nota: Akan ada penalti prestasi apabila menggunakan pemuat .jsx untuk memuatkan fail .js.

Jawapannya datang daripada perbincangan ini di GitHub Vite, menandakan jawapan yang salah (lama) sebagai "betul".

Dikemas kini Mac 2023

Jawapan asal dalam vite build中无法正常工作，只能在vite dev中正常工作。当前版本在vite@^4.0.0 berfungsi untuk kedua-duanya.

Satu repositori contoh yang anda boleh klon dan menguji penyelesaian anda.