vite+react-hook+ts 小项目

vite+react-hook+ts

项目搭建:

• npm create vite
• 全局less自动注入
• antd按需加载
• 图片优化压缩
• alias配置
• 数据mock
• 项目主题色配置
• 全部配置代码:

  • vite.config.ts

    import {defineConfig, normalizePath} from 'vite'
    import react from '@vitejs/plugin-react'
    import path from 'path'
    import fs from 'fs'
    import autoprefixer from 'autoprefixer'
    import svgr from 'vite-plugin-svgr'
    import vitePluginImp from 'vite-plugin-imp'
    import {viteMockServe} from 'vite-plugin-mock'
    import lessToJS from 'less-vars-to-js'
    import aliyunTheme from '@ant-design/aliyun-theme'
    import {getThemeVariables} from 'antd/dist/theme'
    import viteImagemin from 'vite-plugin-imagemin'
    
    const themeVariables = lessToJS(fs.readFileSync(path.resolve(__dirname, 'src/style/styleConfig.less'), 'utf8'))
    const variablePath = normalizePath(path.resolve(__dirname, 'src/style/color.less'))
    export default defineConfig({
        plugins: [
            react({
                babel: {
                    plugins: ['babel-plugin-styled-components'],
                },
            }),
            // viteEslint(),
            svgr(),
            vitePluginImp({
    						//antd 按需引入
                libList: [
                    {
                        libName: 'antd',
                        style: (name) => `antd/es/${name}/style`,
                    },
                ],
            }),
    				// 数据mock 
    				// npm i mock viteMockServe -D
            viteMockServe({
                mockPath: 'mock',
                logger: true,
            }),
    				//图片压缩优化
            viteImagemin({
                optipng: {
                    optimizationLevel: 7,
                },
                pngquant: {
                    quality: [0.8, 0.9],
                },
                svgo: {
                    plugins: [
                        {
                            name: 'removeViewBox',
                        },
                        {
                            name: 'removeEmptyAttrs',
                            active: false,
                        },
                    ],
                },
            }),
        ],
        resolve: {
    				//项目路径前缀
            alias: {
                '@': path.join(__dirname, 'src'),
                '@assets': path.join(__dirname, 'src/assets'),
            },
        },
        css: {
            modules: {
                generateScopedName: '[name]__[local]___[hash:base64:5]',
            },
            preprocessorOptions: {
    						// 全局scss自动注入
                scss: {
                    additionalData: `@import "${variablePath}";`,
                },
    						// 全局less自动注入
                less: {
                    additionalData: `@import "${variablePath}";`,
                    javascriptEnabled: true,
                    modifyVars: aliyunTheme, // 阿里云主题
                    // modifyVars: getThemeVariables({
                    //     // dark: true, // 开启暗黑模式
                    //     compact: true, // 开启紧凑模式
                    // }),
                },
            },
    				//私有前缀
            postcss: {
                plugins: [
                    autoprefixer({
                        overrideBrowserslist: ['Chrome > 40', 'ff > 31', 'ie 11'],
                    }),
                ],
            },
        },
        server: {
            proxy: {
                //   // 字符串简写写法
                //   '/foo': 'http://localhost:4567',
                //   // 选项写法
                //   '/api': {
                //     target: 'http://jsonplaceholder.typicode.com',
                //     changeOrigin: true,
                //     rewrite: (path) => path.replace(/^\/api/, '')
                //   },
                //   // 正则表达式写法
                //   '^/fallback/.*': {
                //     target: 'http://jsonplaceholder.typicode.com',
                //     changeOrigin: true,
                //     rewrite: (path) => path.replace(/^\/fallback/, '')
                //   },
                // 使用 proxy 实例
                // '/api': {
                //     target: 'http://jsonplaceholder.typicode.com',
                //     changeOrigin: true,
                //     configure: (proxy, options) => {
                //         // proxy 是 'http-proxy' 的实例
                //     },
                // },
            },
        },
        optimizeDeps: {
            // entries: ['*.html'],
            include: ['react'],
        },
    })
    

  • 项目目录

    

  • 小记

    • 项目搭建默认严格模式:
      • <React.StrictMode></React.StrictMode>
      • 在严格模式下, useEffect中的函数会调用两次