vite不支持optional Chaining（链判断运算符）和 nullishCoalescingOperator
【vite不支持optional Chaining（链判断运算符）和 nullishCoalescingOperator】链判断运算符特别好用，我就不多说了，搭建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
文章图片
经楼下小伙伴提醒发现最新版谷歌浏览器支持链判断运算符，那就啥也不用配置了
推荐阅读
- 今日份H5
- gorm缺陷
- Fourth|Fourth season twenty-first episode,Ross invited Rachel to his wedding,what will happen?
- 用vite+lerna配合verdaccio发布自己的前端包
- vite+vue3+vue-router项目中vue-router报错的问题
- Vite + Vue3 初体验 —— Vue3 篇
- vite+vue3+typescript+pnpm-workspace-monorepo 项目搭建记录
- Vite + Vue3 初体验 —— Vite 篇
- vite|vite + vue3 + ts 使用总结
- 用 vite 构建项目，同时支持微前端