// 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", ], }, }));
您可以透過使用
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中兩者都適用。您可以複製並測試解決方案的範例倉庫。