vite-react-boilerplate

Development of compiling

  • Yarn start Starts development
  • Yarn Build Starts compilation

Code quality and style

Husky/Lint-staged /eslint/prettier temporary area code commit automatically fixed, including git hooks, such as commit- MSG code commit check, etc.

HMR

@vitejs/plugin-react-refresh implements react HMR

The code base (style) is loaded on demand

Styles are loaded on demand (components don’t have this problem). Antd and ZARM component libraries are configured by default. For other component libraries, refer to the viet-plugin-style-import documentation

 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`; },},],},Copy the code

The custom

  1. publicPath
  2. Packaging supports target browsers
  3. Mififier Compressed Terser /esbuild automatically switches
  4. Theme Color Configuration (ANTD)
const customConfig = {
  publicPath: '/'.// Package the production environment
  theme: '#004bcc'.// AntD theme color
  supportLegacyBrowsers: false.// whether to support older browsers, e.g. IE, set true to use terser for production packaging, otherwise use faster esbuild (package size is also slightly larger)
};

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

Develop renderings