您可以透過(guò)使用loader
選項(xiàng)將所有的js檔案視為jsx來(lái)更改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檔案會(huì)有效能損耗。
答案來(lái)自於Vite的GitHub上的這個(gè)討論,將錯(cuò)誤的(舊的)答案標(biāo)記為「正確」。
原始答案在vite build
中無(wú)法正常運(yùn)作,只能在vite dev
中正常運(yùn)作。目前版本在vite@^4.0.0
中兩者都適用。
您可以複製並測(cè)試解決方案的範(fàn)例倉(cāng)庫(kù)。