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中的函数会调用两次