电脑做服务器发布网站吗,网站开发简历,上市公司网站建设,完成网站群建设背景和意义
在修复React项目热更新失效的问题时#xff0c;经过一系列问题排查和依赖升级#xff0c;最终成功修复了问题并为后续开发规避了类似的问题。
依赖升级
Vite版本升级
原React项目Vite版本升级到^4.4.5
Vite 4 在构建和开发服务器的性能上进行了优化#xff…背景和意义
在修复React项目热更新失效的问题时经过一系列问题排查和依赖升级最终成功修复了问题并为后续开发规避了类似的问题。
依赖升级
Vite版本升级
原React项目Vite版本升级到^4.4.5
Vite 4 在构建和开发服务器的性能上进行了优化提升了启动速度和热更新速度并且修复了特殊情况下热更新问题。
npm install vite^4.4.5
vitejs/plugin-react版本升级
如只升级Vite删除node_modules重新安装依赖会报版本兼容错误错误如下 vitejs/plugin-react 升级到^4.3.2
npm i -D eslint-plugin-react-refresh
编码注意事项
由于如下编码习惯问题同样会引起局部热更新无法工作 未保证一致的组件出口为了保证热更新工作你必须保证Tsx文件只导出React组件
Fast Refresh | Gatsby Tsx文件呈现 React 组件但也导出由非 React 组件导入的值。例如组件文件还导出一个常量并且ts文件导入它。在这种情况下请考虑将常量迁移到单独的文件并将其导入到两个文件中。这将重新启用快速刷新功能。其他情况通常也可以用类似的方法解决。 具体报错示例 代码出处 Tsx文件使用匿名导出组件也会引起热更新失效swr-graphql/issues Anonymous arrow functions cause Fast Refresh to not preserve local component state. · Issue #6 · praveenweb/swr-graphql · GitHub
好的写法 预防方案
增加使用Eslint检查
GitHub - ArnaudBarre/eslint-plugin-react-refresh: Validate that your components can safely be updated with fast refresh 安装eslint-plugin-react-refresh
npm i -D eslint-plugin-react-refresh 找到eslint配置文件增加如下内容
{plugins: [react-refresh],rules: {react-refresh/only-export-components: warn}
} 你亦或者可以选择“error”的警示方式排查写法 Eslint全局排查解决
npm run lint 最后在解决了热更新失效的问题后我们运行了 npm run lint 命令进行全局排查和解决潜在的代码问题。 通过以上的依赖升级、编码注意事项和预防措施我们成功修复了 React 项目热更新失效的问题并且为后续开发规避了类似的问提。
