简介

Vite（法语意为 “快速的”，发音 /vit/，发音同 “veet”）是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

1. 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
2. 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

Vite 意在提供开箱即用的配置，同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持。

创建项目

npm init vite@latest vite-react-app -- --template react

安装依赖

npm i react-router react-router-dom antd redux redux-react @reduxjs/toolkit -S

vite配置

import { ConfigEnv, defineConfig, loadEnv, UserConfig } from 'vite'
import react from '@vitejs/plugin-react'
import checker from 'vite-plugin-checker'
import legacy from '@vitejs/plugin-legacy'
import eslintPlugin from 'vite-plugin-eslint'
import { viteMockServe } from 'vite-plugin-mock'
import { createHtmlPlugin } from 'vite-plugin-html'
import { createStyleImportPlugin, AntdResolve } from 'vite-plugin-style-import'
import * as path from 'path'
import { wrapperEnv } from './src/kits/util/getEnv'

// https://vitejs.dev/config/
export default defineConfig( (mode: ConfigEnv): UserConfig => {
  const localEnabled = (process.env.useMock as unknown as boolean) || false
  const env = loadEnv(process.env.appEnv!, process.cwd(), 'APP_');
  const viteEnv = wrapperEnv(env)

  return  {
    plugins: [
      react(),
      legacy({
        targets: ['defaults', 'not IE 11']
      }),
      checker({
        typescript: true
      }),
      createHtmlPlugin({
        entry: './src/index.tsx',
        inject: {
          data: {
            title: viteEnv.APP_DOCUMENT_TITLE
          }
        }
      }),
      eslintPlugin(),
      createStyleImportPlugin({
        resolves: [AntdResolve()]
      }),
      viteMockServe({
        mockPath: 'mock',
        localEnabled,
        prodEnabled: false,
        watchFiles: true
      })
    ],
    resolve: {
      alias: {
        '~antd': path.resolve(__dirname, './node_modules/antd'),
        '@pages': path.resolve(__dirname, './src/pages'),
        '@comps': path.resolve(__dirname, './src/components'),
        '@http': path.resolve(__dirname, './src/http/fetch'),
        '@img': path.resolve(__dirname, './src/assets/images'),
        '@kits': path.resolve(__dirname, './src/kits'),
        '@store': path.resolve(__dirname, './src/store')
      }
    },
    css: {
      preprocessorOptions: {
        less: {
          javascriptEnabled: true,
          modifyVars: {
            '@primary-color': '#4377FE',//设置antd主题色
          }
        }
      }
    },
    envPrefix: 'APP_',
    server: {
      port: 3000,
      open: 'http://127.0.0.1:3000/#/user/list',
      cors: true
    },
    build: {
      outDir: "dist",
      rollupOptions: {
        output: {
          chunkFileNames: "assets/js/[name]-[hash].js",
          entryFileNames: "assets/js/[name]-[hash].js",
          assetFileNames: "assets/[ext]/[name]-[hash].[ext]"
        }
      }
    }
  }
})

注意：这里虽然用createStyleImportPlugin配置了AntdResolve， 但是antd依然样式有问题

解决办法：

'~antd': path.resolve(__dirname, './node_modules/antd')

husky + lint-staged + prettier 配置

1、npx husky install

2、npx husky add .husky/pre-commit "yarn lint-staged --allow-empty"

3、package.json

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "src/**/*.{js,jsx,ts,tsx}": [
    "eslint --fix",
    "prettier --write --loglevel warn"
  ],
  "src/**/*.{less,postcss,css,scss}": [
    "stylelint --fix --custom-syntax postcss-less --cache --cache-location node_modules/.cache/stylelint/"
  ]
}

效果

打包

npm i vite-plugin-progress picocolors -D

增加配置

progress({
 format:  `${colors.green(colors.bold('Building'))} ${colors.cyan('[:bar]')} :percent`
})

效果

总结

Vite是一个由原生 ES Module 驱动的 Web 开发前端构建工具。

• 在开发环境（Development） 下基于浏览器原生 ES Module 开发，完全跳过了打包这个概念
• 在生产环境（Production） 下基于 Rollup 打包来构建代码

源码地址

https://github.com/GuoguoDad/react-app-template

结束语

• 👀 目前专注于前端
• ⚙️ 在react、react-native开发方面有丰富的经验
• 🔭 最近在学习安卓，有自己的开源安卓项目，集成react-native热更新功能
• 我❤️ 思考、学习、编码和健身
• 如果文章对您有帮助，三连支持一下～O(∩_∩)O谢谢！