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`; }, }, ], }), ], 自定义publicPath
打包支持目标浏览器
mififier 压缩terser/esbuild 自动切换
主题色配置 (antd)
const customConfig = { publicPath: 'http://www.likecs.com/', // 打包生产环境时使用 theme: '#004bcc', // antd 主题色 supportLegacyBrowsers: false, //是否支持老的的浏览器,e.g. IE ,设置true生产打包时minify使用 terser, 否则使用更快的esbuild (包体积也稍大) }; const modifyVars = { '@primary-color': customConfig.theme, '@link-color': customConfig.theme, };开发效果图