基於vite2的react腳手架

記憶的森林發表於2021-04-11

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

開發效果圖

vite-react.png

相關文章