👨🏻‍💻 工程 - Vite React 项目实战杂记 - 《驽马十驾 🐎》

:::info 🎯 一堆实战踩坑 Trace，不定期更新。 :::

Vite 直接出包目前主要针对浏览器支持 ESM，但是官方推出了使用类似 SystemJS 的方案兼容 module 的加载。 ```typescript // vite.config.js import legacy from ‘@vitejs/plugin-legacy’

export default { plugins: [ legacy({ targets: [‘defaults’, ‘not IE 11’] }) ] }


- Vite 对 AntDesign 的兼容需要做一些处理 ，需要在 less 配置中增加 modifyVars 做主题色注入。
- Vite 的本地代理调试线上地址，可以使用 localHTML 的方式，将线上 HTML 代理到本地的文件上，拼凑本地的 H5 devServer 返回的 HTML 格式。
:::info
对于 HTTPS 的情况，建议使用 Charles 代理到本地的 HTTPS dev 服务上，同时本地的浏览器支持 insecure localhost 调试。具体方法可以自行 Google。<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/84679/1647865860153-ddabdaa8-497b-4628-b9cf-5afef5cae0c2.png#clientId=u47f5525f-1630-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=567&id=u7a879749&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1134&originWidth=1528&originalType=binary&ratio=1&rotation=0&showTitle=false&size=207326&status=done&style=none&taskId=u8a60139e-9927-4f57-8e38-422f77270f1&title=&width=764)
:::
```html
<!DOCTYPE html>
<html lang="zh_cn">
<head>
  <script type="module" src="http://localhost:3334/@vite/client"></script>
  <script type="module">
    import RefreshRuntime from "http://localhost:3334/@react-refresh"
    RefreshRuntime.injectIntoGlobalHook(window)
    window.$RefreshReg$ = () => { }
    window.$RefreshSig$ = () => (type) => type
    window.__vite_plugin_react_preamble_installed__ = true
  </script>
  <meta charset="utf-8">
  <link rel="icon" href="https://img.alicdn.com/tfs/TB1t_RLl5_1gK0jSZFqXXcpaXXa-48-48.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#000000">
  <meta name="description" content="Web App">
  <title>Web App</title>
</head>
<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <script>
    window.g_config = { /* */ };
  </script>
  <div id="root"></div>
  <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.
      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.
      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  <script type="module" src="http://localhost:3334/src/index.tsx"></script>
</body>
</html>

调试线上的 HRM 功能需要在配置文件中配置 ws 服务为本地，否则默认会将 ws 的请求发送到服务端。 :::info

对于 HTTPS 的本地服务，需要将 protocol 改为：wss :::

{
server: {
  /**
  * 修改了本地的 devServer 中 HMR 模块打开的路径
  * 因为要支持线上代理，所以需要指向本地
  * @doc https://vitejs.dev/config/#server-hmr
  */
  hmr: {
    protocol: 'ws',
    host: 'localhost',
    port: '3334',
  },
},
}

部分使用了 Webpack 路径解析的项目需要在配置中额外增加：
```
{
resolve: {
  alias: [{ find: /^~/, replacement: '' }],
},
}
```

为了更好地提示老浏览器用户升级，我们使用了下面的代码对 esm 做了 feature dectection。代码参考自：Github。esm 浏览器支持该特性的版本列表参考这里。

<script type="module">
window.____support_ESM = true;
</script>
<script>
// Feature detect static imports.
function supportsStaticImport() {
  const script = document.createElement('script');
  return 'noModule' in script;
}

// Feature detect dynamic import().
function supportsDynamicImport() {
  try {
    new Function('import("")');
    return true;
  } catch (err) {
    return false;
  }
}

// Usage.
if (!supportsDynamicImport() || !supportsStaticImport()) {
  const result = window.confirm('请使用大于 61 版本的 Chrome，或版本大于 11 的 Safari 访问。');
  if (result) {
    window.open('https://www.google.com/intl/zh-CN/chrome/');
  } else {
    window.close();
  }
}
</script>

为了更好地支持暗黑模式（dark mode），我们可以使用 react-css-theme-switcher （https://www.npmjs.com/package/react-css-theme-switcher）但要注意的是，引用了独立成品的 antd.min.css 后，引入 antd 组件的时候不应该继续再打包样式了（会导致重复打入），因此可以使用 [vite-plugin-importer](https://www.npmjs.com/package/vite-plugin-importer) 来实现不引入组件样式，而依赖整体的全局样式。
- 当然你可以直接构建两套 css 样式，输出 style.css 以及 style.dark.css