zoukankan      html  css  js  c++  java
  • 基于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,
    };
    

    开发效果图

    vite-react.png

  • 相关阅读:
    SVN服务的配置与管理
    SVN配置多仓库与权限控制
    SVN使用详解
    这个问题他又来了,如何学编程!
    乘风破浪的程序员们
    Java 学习路线(史上最全 2020 版 ~ 持续更新中)
    P4782 【模板】2-SAT 问题
    HDU
    2020.8.3
    Interesting Computer Game
  • 原文地址:https://www.cnblogs.com/leonwang/p/14643000.html
Copyright © 2011-2022 走看看