简介

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

一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。一套构建指令，它使用 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谢谢！

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。