vite5+react18+antd5.8项目兼容chrome70解决问题记录vite5+react18+antd5.8

问题1：白屏 globalThis

Uncaught ReferenceError: globalThis is not defined

解决办法：index.html 里面head标签增加下面代码

<script>
  this.globalThis || (this.globalThis = this);
</script>

##　问题２　白屏 js无法解析

报错： Uncaught SyntaxError: Unexpected token =
原因: vite默认是浏览器直接解析，
解决办法，使用中间件模式，或者打包后npm run build进行查看 ##　问题3 编译后依然白屏
报错：使用http-server 在dist 目录启动服务，依然白屏
原因：vite 默认使用esbuild进行编译，而esbuild默认没有对js进行pollyfill
解决办法，vite.config.js配置优化

 build: {
    outDir: "dist",
    minify: "esbuild",
    target: ["chrome70", "es2015"],
    cssCodeSplit: true,
    cssTarget: "chrome70",
    chunkSizeWarningLimit: 2000,
    sourcemap: true,
    rollupOptions: {
      output: {
        // Static resource classification and packaging
        chunkFileNames: "assets/js/[name]-[hash].js",
        entryFileNames: "assets/js/[name]-[hash].js",
        assetFileNames: "assets/[ext]/[name]-[hash].[ext]",
      },
    },
  },

问题4 antd样式异常

现象： antd所有组件显示异常
原因：antd 默认是使用css-in-js，Ant Design 的 CSS-in-JS 默认通过 :where 选择器降低 CSS Selector 优先级，以减少用户升级时额外调整自定义样式的成本，不过 :where 语法的兼容性在低版本浏览器比较差。详见antd官方文档
解决办法：使用StyleProvider进行包裹

<StyleProvider
  hashPriority="high"
  transformers={[legacyLogicalPropertiesTransformer]}
>
  <App>
    <MyApp />
  </App>
</StyleProvider>

##　最终效果

项目地址