基於vite2的react腳手架

vite-react-boilerplate

開發編譯

• yarn start 啟動開發
• yarn build 啟動編譯

代碼質量和風格

husky/lint-staged/eslint/prettier 暫存區代碼提交自動檢查修復 , 可以自行擴展git hooks , e.g. commit-msg 代碼提交檢查等。

HMR

@vitejs/plugin-react-refresh 實現react HMR

代碼庫（樣式）按需加載

樣式按需加載 (組件不存在這個問題)，默認配置了antd 和zarm組件庫,對於其他組件庫， 參考vite-plugin-style-import 文檔

 plugins: [
      styleImport({
        libs: [
          {
            libraryName: 'antd',
            esModule: true,
            resolveStyle: (name) => {
              return `antd/es/${name}/style/index`;
            },
          },
          {
            libraryName: 'zarm',
            esModule: true,
            resolveStyle: (name) => {
              return `zarm/es/${name}/style/css`;
            },
          },
        ],
      }),
    ],

自定義

1. publicPath
2. 打包支持目標瀏覽器
3. mififier 壓縮terser/esbuild 自動切換
4. 主題色配置 （antd）

const customConfig = {
  publicPath: '/', // 打包生產環境時使用
  theme: '#004bcc', // antd 主題色
  supportLegacyBrowsers: false, //是否支持老的的瀏覽器，e.g. IE ，設置true生產打包時minify使用 terser, 否則使用更快的esbuild (包體積也稍大)
};

const modifyVars = {
  '@primary-color': customConfig.theme,
  '@link-color': customConfig.theme,
};

開發效果圖