链判断运算符特地好用,我就不多说了,搭建vite时,发现用了很多办法,都不能反对
办法一:@vitejs/plugin-react-refresh配置parserPlugins,不失效
import { defineConfig } from 'vite';import reactRefresh from '@vitejs/plugin-react-refresh';export default defineConfig({ plugins: [ reactRefresh({ parserPlugins: ['optionalChaining', 'nullishCoalescingOperator'] }) ]});
办法二:vite-babel-plugin加babel,不失效
import { defineConfig } from 'vite';import reactRefresh from '@vitejs/plugin-react-refresh';import babel from 'vite-babel-plugin';export default defineConfig({ plugins: [ babel(), reactRefresh({ parserPlugins: ['optionalChaining', 'nullishCoalescingOperator'] }) ]});
办法三:@rollup/plugin-babel加babel,不失效
import { defineConfig } from 'vite';import reactRefresh from '@vitejs/plugin-react-refresh';import babel from '@rollup/plugin-babel';export default defineConfig({ plugins: [ babel({ babelHelpers: 'runtime', plugins: [ '@babel/plugin-proposal-nullish-coalescing-operator', '@babel/plugin-proposal-optional-chaining' ] }), reactRefresh({ parserPlugins: ['optionalChaining', 'nullishCoalescingOperator'] }) ]});
办法四:改tsconfig.json,仍然没成果
{ "compilerOptions": { "target": "ES5", "lib": [ "DOM", "DOM.Iterable", "ESNext", "ES2020", "ES2020.Symbol.WellKnown", "ES2020.String", "ES2020.SharedMemory", "ES2020.Promise", "ES2020.Intl", "ES2020.BigInt", "ES2021", "ES2021.Promise", "ES2021.String", "ES2021.WeakRef", "ES2019", "ES2019.Array", "ES2019.Object", "ES2019.String", "ES2019.Symbol", "ES2017", "ES2017.Object", "ES2015", "ES2015.Core" ], "allowJs": false, "skipLibCheck": false, "esModuleInterop": false, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "module": "ESNext", "moduleResolution": "Node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react" }, "include": ["./src"]}
试了这么多办法,都没用,我心田是解体的,没方法,还要到node_modules里找@vitejs/plugin-react-refresh,钻研一下源码,我感觉我在parserPlugins里加optionalChaining和nullishCoalescingOperator,没有成果,我就重点看了这里,而后在源码里强制require这两个babel插件,再yarn add/npm install这两个插件,这次终于起作用了,快乐的我想吐血,心愿尤大大看到这个,优化一下@vitejs/plugin-react-refresh