基於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,
};

開發效果圖