recherche

Maison  >  Questions et réponses  >  le corps du texte

Façons de configurer Vite pour prendre en charge l'utilisation de la syntaxe JSX dans les fichiers JS

<p>Vite n'autorise pas l'utilisation de la syntaxe JSX dans les fichiers .js par défaut. </p> <p>J'ai renommé mes fichiers en <code>.jsx</code> (ou <code>.tsx</code>), mais certaines dépendances externes ne peuvent pas être renommées. </p> <p>Exemple d'erreur Vite :</p> <pre class="brush:php;toolbar:false;">✘ [ERREUR] L'extension de syntaxe JSX n'est pas actuellement activée node_modules/somelib/src/someFile.js:122:11 : 122 │ retour <div/></pre> <p>Comment configurer Vite pour prendre en charge les expressions JSX dans tous les fichiers .js ? </p>
P粉571233520P粉571233520459 Il y a quelques jours682

répondre à tous(1)je répondrai

  • P粉877719694

    P粉8777196942023-08-25 14:42:21

    Vous pouvez modifier la configuration d'esbuild en traitant tous les fichiers js comme jsx en utilisant l'option 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",
        ],
      },
    }));
    

    Remarque : il y aura une pénalité de performances lors de l'utilisation du chargeur .jsx pour charger des fichiers .js.

    La réponse vient de cette discussion sur le GitHub de Vite, marquant la (ancienne) réponse incorrecte comme "correcte".

    Mise à jour en mars 2023

    La réponse originale en vite build中无法正常工作,只能在vite dev中正常工作。当前版本在vite@^4.0.0 fonctionne pour les deux.

    Un exemple de référentiel que vous pouvez cloner et tester votre solution.

    répondre
    0
  • Annulerrépondre