前言
vite是个什么玩意哈？都2021年了，别说不晓得哈？要是不晓得小心尤大大不让你用vue了。
vite是一个开发构建工具，开发过程中它利用浏览器native ES Module个性导入组织代码，生产中利用rollup作为打包工具，且尤vue作者尤雨溪组织团队开发，它有如下特点：
- 启动快
- 热模块更新
- 按需编译
- 完满兼容
rollup生态
咱们的新我的项目曾经尝试用了一下vite,成果的话，的确比webpack好点，当初我来论述一下，怎么搭建一个企业级的vite工程化。
根底筹备
- 新建文件夹
config,public,src 生成
package.json，执行如下命令$ npm init- 新增
index.html,tsconfig.json,vite.config.ts,.gitignore文件
我的项目根底构造如下：
├── config # 我的项目脚手架的配置文件├── public # 动态文件├── src # 源代码├── index.html # root├── .gitignore # git漠视文件├── vite.config.ts # 我的项目全局vite配置文件├── tsconfig.json # 我的项目全局ts配置文件└── package.json # package.json开始
装置必须依赖
开发
$ npm install vite typescript @vitejs/plugin-react-refresh -D生产
$ npm install react react-dom -S编写配置
在src文件夹下新建main.tsx,App.tsx,app.css
在
src/App.tsx文件中书写如下代码import React, { FC, useEffect } from 'react';import './app.css';const App: FC = () => { useEffect(() => { console.log(`vite-react-cil`); }, []); return ( <div> <h2>Welcome to vite-react-cil</h2> </div> );};export default App;- 在
src/app.css文件中书写如下代码
* { padding: 0; margin: 0;}.App{ width:200px;}在
src/main.tsx文件中书写如下代码import React from 'react';import ReactDOM from 'react-dom';import App from './App';ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root'),);在
tsconfig.json文件中书写如下代码{ "compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["src/*"] }, "types": ["vite/client"], "target": "ESNext", "useDefineForClassFields": true, "lib": ["DOM", "DOM.Iterable", "ESNext"], "allowJs": false, "skipLibCheck": false, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "module": "ESNext", "moduleResolution": "Node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react" }, "include": ["./src"], "exclude": ["node_modules"]}在
config文件夹中新建plugins文件夹，该文件件专门用来解决vite第三方插件，而后在config/plugins文件夹中新建index.ts文件，且在index.ts文件中编写如下代码：import { Plugin } from 'vite';import reactRefresh from '@vitejs/plugin-react-refresh';export default function createVitePlugins() { const vitePlugins: (Plugin | Plugin[])[] = [ reactRefresh(), ]; return vitePlugins;}在
vite.config.ts文件中书写如下代码import { defineConfig } from 'vite';import createVitePlugins from './config/plugins';export default defineConfig((configEnv) => { return { plugins: createVitePlugins(), };});- 在
public文件夹中寄存一个favicon.ico图文件. 在
index.html文件中书写如下代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>vite-react-cil</title> </head> <body> <div id="root"></div> <script type="module" src="/src/main.tsx"></script> </body></html>在
.gitignore文件中书写如下配置node_modules.DS_Storedistcoveragedist-ssr*.local在
package.json文件中增加如下代码{ "scripts": { "dev": "vite" },}运行该我的项目
咱们能够通过如下命令运行该我的项目：
$ npm run dev呈现如上图片说明我的项目启动胜利，至此，一个简易版的脚手架已实现。
延长
css-module/less/scss
vite默认是反对module的，只需将文件名称加一个module即可，如：xx.module.css,这样就变成了module了，更create-react-app一样的写法。
对scss/less的反对，装置依赖，如下:
$ npm install less sass -Dcss/less的module模式同css一样，如：xx.module.scss,xx.module.less
增加全局less/scss变量，如下：
在
src文件夹下新增assets文件夹，且在新增scss文件夹，在scss文件夹中新增varible.scss文件，且在src/assets/scss/varible.scss中编写如下代码：$bg: #f0f0f0;@mixin flexContainer($jc) { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: $jc;}@mixin style($size, $color, $bold: normal) { font-size: $size; color: $color; font-weight: $bold;}在
config文件夹下，新增style文件夹，且在style文件夹下新增index.ts，config/style/index.ts中编写如下代码：import { CSSOptions } from 'vite';const cssOption: CSSOptions = { preprocessorOptions: { less: { javascriptEnabled: true, }, scss: { additionalData: '@import "./src/assets/scss/varible.scss";', }, },};export default cssOption;留神点:additionalData中如果援用@import格局的，前面肯定要加;否则会报错- 找到
vite.config.ts文件，并新增如下代码：
import { defineConfig } from 'vite';import createVitePlugins from './config/plugins';+ import cssOption from './config/style';export default defineConfig((configEnv) => { return { plugins: createVitePlugins(), + css: cssOption, };});将
src/app.css中的app.css换成app.module.scss,如：app.css->app.module.scss，
更改src/App.tsx文件中的代码：import React, { FC, useEffect } from 'react'; - import './app.css'; + import styles from './app.module.scss';const App: FC = () => { useEffect(() => { console.log(`vite-react-cil`); }, []); return ( <div className={styles.App}> <h2>Welcome to vite-react-cil</h2> </div> );};环境变量
在
vue-cil,create-react-app中，设置环境变量，能够通过cross-env+.env文件设置自定义环境变量，通过process.env这个来获取自定义的环境变量，然而在vite中有点区别。
vite中设置环境变量- 新增
.env，.env.alpha，.env.preprod，.env.prod四个文件，更src同级目录.
.env文件编写如下代码：
NODE_ENV=developmentVITE_APP_ANT=dev.env.alpha文件编写如下代码：
NODE_ENV=productionVITE_APP_ANT=alpha.env.preprod文件编写如下代码：
NODE_ENV=productionVITE_APP_ANT=preprod.env.prod文件编写如下代码：
NODE_ENV=productionVITE_APP_ANT=prod别离代表开发，测试，预发，生产四个环境变量，如果想要扩大其它的变量，以此类推.
留神点:自定义环境变量肯定要是
VITE为前缀的变量才会裸露给vite,如：VITE_APP_SOME
找到
package.json文件，减少如下代码：{ "scripts": {- "dev": "vite",+ "dev": "vite --mode dev",+ "build:alpha": "vite build --mode alpha",+ "build:preprod": "vite build --mode preprod",+ "build:prod": "vite build --mode prod" },}提醒:之所以要在
package.json中的命令加--mode，是为了笼罩命令应用的默认模式production,developmenttypescript环境下申明自定义的环境变量.
在src文件夹下，新建vite-env.d.ts文件，src/vite-env.d.ts文件外面编写如下代码：/// <reference types="vite/client" />interface ImportMetaEnv { VITE_APP_ANT: 'dev' | 'alpha' | 'preprod' | 'prod';}vite中获取环境变量
在vite中获取环境变量通过：import.meta.env来获取的，并不是process.env，如果要在代码中，每次通过import.meta.env来获取，写的切实繁琐，不如封装一个办法.
在src文件夹下，新建utils文件夹，utils文件夹中新建index.ts,在src/utils/index.ts中编写如下代码：
export const environmentVariable = () => { const env = import.meta.env.VITE_APP_ANT; let parps = null; switch (env) { case 'dev': parps = 'dev'; break; case 'alpha': parps = 'alpha'; break; case 'preprod': parps = 'preprod'; break; case 'prod': parps = 'prod'; break; default: parps = 'dev'; break; } return parps;};这样，咱们不论在那个中央要用环境变量，只需调用这个environmentVariable办法即可。
base/server配置
在
config文件夹中新建index.ts，在config/index.ts中编写如下代码：/** * @description 开发端口 */export const VITE_APP_PORT = 3000;/** * @description 公共根底门路 */export const VITE_APP_BASE = '/';/** * @description 是否主动在浏览器中关上应用程序 */export const VITE_APP_OPEN = true;留神:config所有文件中不能通过，import.meta.env来获取环境变量，会报错，要想在config文件中用环境变量，只能通过vite-config-ts传入进来，通过configEnv传入给config文件，那么config文件，就必须要写成函数的模式在
config文件夹中新建setupProxy.ts文件，用来做自定义代理，config/setupProxy.ts中编写如下代码：import { ProxyOptions } from 'vite';const proxy: Record<string, string | ProxyOptions> = { // 字符串简写写法 '/foo': 'http://localhost:4567', // 选项写法 '/api': { target: 'http://jsonplaceholder.typicode.com', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, ''), // 更多请参看：https://cn.vitejs.dev/config/#server-proxy },};export default proxy;- 找到
vite.config.ts文件，并新增如下代码：
import { defineConfig } from 'vite';import createVitePlugins from './config/plugins';import cssOption from './config/style';+ import { VITE_APP_BASE, VITE_APP_PORT, VITE_APP_OPEN } from './config';+ import proxy from './config/setupProxy';export default defineConfig((configEnv) => { return { + base: VITE_APP_BASE, plugins: createVitePlugins(), css: cssOption, + server: { host: true, port: VITE_APP_PORT, open: VITE_APP_OPEN, proxy, }, };});别名配置
找到vite.config.ts文件，并新增如下代码：
先装置path.
$ npm install path -D... 省略+ import path from 'path';export default defineConfig((configEnv) => { return { ... 省略 + resolve: { alias: { '@': path.resolve(__dirname, 'src'), }, }, };});build配置
- 找到
config/index.ts文件，新增如下代码：
...省略/** * @description 是否在打包环境下，开启打包的剖析可视化图 */+ export const VITE_APP_VISUALIZER = false;/** * @description 是否在打包环境下，去除console.log */+ export const VITE_APP_CONSOLE = true;/** * @description 打包环境下，删除debugger */+ export const VITE_APP_DEBUGGER = true;/** * @description 打包环境下是否生成source map 文件 */+ export const VITE_APP_SOURCEMAP = false;- 在
config/plugins文件夹中，新建visualizer.ts文件
装置rollup-plugin-visualizer
$ npm install rollup-plugin-visualizer -D在config/plugins/visualizer.ts文件中，编写如下代码：
import visualizer from 'rollup-plugin-visualizer';export default function configVisualizerConfig() { return visualizer({ // 将打包的依赖剖析可视化页面，写到node_modules中，这样不占地位 filename: './node_modules/.cache/visualizer/stats.html', open: true, gzipSize: true, brotliSize: true, });}- 找到
config/plugins/index.ts文件，新增如下代码：
import { Plugin } from 'vite';import reactRefresh from '@vitejs/plugin-react-refresh';+ import { VITE_APP_VISUALIZER } from '../index';+ import configVisualizerConfig from './visualizer';export default function createVitePlugins() { const vitePlugins: (Plugin | Plugin[])[] = [ reactRefresh(), ]; + VITE_APP_VISUALIZER && vitePlugins.push(configVisualizerConfig()); return vitePlugins;}- 在
config文件夹下，新建build.ts文件，且编写如下代码：
import { BuildOptions } from 'vite';import { VITE_APP_CONSOLE, VITE_APP_DEBUGGER, VITE_APP_SOURCEMAP } from '../config';const build: BuildOptions = { terserOptions: { compress: { keep_infinity: true, drop_console: VITE_APP_CONSOLE, drop_debugger: VITE_APP_DEBUGGER, }, }, outDir: 'dist', // 指定输入门路目录 assetsDir: 'assets', // 指定打包生成动态资源的寄存门路目录 sourcemap: VITE_APP_SOURCEMAP, // 构建后是否生成 source map文件};export default build;- 找到
vite.config.ts文件，新增如下代码：
... 省略+ import build from './config/build';export default defineConfig((configEnv) => { return { ... 省略 + build };});进阶
eslint
先装置如下的依赖：
$ npm install @typescript-eslint/eslint-plugin eslint eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier @typescript-eslint/parser eslint-config-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-simple-import-sort -D提醒:如上这些依赖，更具自已的状况装置，我这里就全副装置了，其中
@typescript-eslint/eslint-plugin，eslint-plugin-react,eslint-plugin-react-hooks这几个依赖绝对其它的来说，重要一些，倡议装置.新建
.eslintrc.js，.eslintignore两个文件，更src同级目录..eslintrc.js文件写下如下代码：module.exports = { root: true, parser: '@typescript-eslint/parser', parserOptions: { ecmaVersion: 2020, sourceType: 'module', ecmaFeatures: { jsx: true, }, }, settings: { react: { version: 'detect', }, }, env: { browser: true, amd: true, node: true, }, extends: [ 'eslint:recommended', 'plugin:react/recommended', 'plugin:react-hooks/recommended', 'plugin:jsx-a11y/recommended', 'plugin:prettier/recommended', ], plugins: ['simple-import-sort', 'prettier'], rules: { 'prettier/prettier': ['error', {}, { usePrettierrc: true }], 'react/react-in-jsx-scope': 'off', 'jsx-a11y/accessible-emoji': 'off', 'react/prop-types': 'off', '@typescript-eslint/explicit-function-return-type': 'off', 'simple-import-sort/imports': 'off', 'simple-import-sort/exports': 'error', 'jsx-a11y/anchor-is-valid': [ 'error', { components: ['Link'], specialLink: ['hrefLeft', 'hrefRight'], aspects: ['invalidHref', 'preferButton'], }, ], 'no-debugger': 0, eqeqeq: 2, 'default-case': 1, 'no-empty-function': 1, 'no-multi-spaces': 1, 'spaced-comment': ['error', 'always'], 'no-multiple-empty-lines': ['error', { max: 3 }], },};提醒:如上的
eslint配置，大家能够没必要更我的一样，能够更具自已的理论状况，进行对应的eslint配置，配置参照eslint官网..eslintignore文件写下如下代码：node_modules.DS_Storedistcoveragesrc/__tests____tests__dist-ssr*.localnode_modules/*- 找到
package.json文件，新增如下代码：
... 省略+ "lint": "eslint ./src --ext .jsx,.js,.ts,.tsx",+ "lint:fix": "eslint ./src --ext .jsx,.js,.ts,.tsx --fix",npm run lint命令，能够检测src文件外面所有不标准的代码.
npm run lint:fix命令，能够主动修复src文件外面所有不标准的代码.
，当初咱们的确能够检测代码标准了，然而有一个问题，这些检测的代码必须要我敲命令，而且不是在开发模式下主动检测的，这个行为很不敌对，像webpack中咱们能够用eslint-loader在开发模式下自动检测，那么vite也有相似eslint-loader的插件吗？当然有.
装置如下依赖：
$ npm install vite-plugin-checker -D- 找到
config/index.ts文件，新增如下代码：
/** * @description 是否在开发模式下，启动eslint */+ export const VITE_APP_ESLINT = true;- 找到
config/plugins文件夹，新建eslint.ts文件，且在config/plugins/eslint.ts文件中编写如下代码：
import checker from 'vite-plugin-checker';export default function configEslint() { return [ checker({ typescript: true, eslint: { files: ['./src'], extensions: ['.ts', '.tsx', '.jsx'], }, }), ];}
提醒:这里我不举荐大家用
vite-plugin-eslint这个插件，这个插件在检测谬误时，会阻止热更新.
- 找到
config/plugins/index.ts文件,新增如下代码：
import { Plugin } from 'vite';import reactRefresh from '@vitejs/plugin-react-refresh';+ import { VITE_APP_VISUALIZER,VITE_APP_ESLINT } from '../index';import configVisualizerConfig from './visualizer';+ import configEslint from './eslint';export default function createVitePlugins() { const vitePlugins: (Plugin | Plugin[])[] = [ reactRefresh(), ]; VITE_APP_VISUALIZER && vitePlugins.push(configVisualizerConfig()); + VITE_APP_ESLINT && vitePlugins.push(...configEslint()); return vitePlugins;}到这里，咱们就配置好了一个开发环境下，自动检测的配置。
jest
装置如下依赖：
$ npm install @testing-library/jest-dom @types/jest jest ts-jest identity-obj-proxy -D新增
jest.config.js文件，同src同级，且编写如下代码：module.exports = { preset: 'ts-jest', roots: ['<rootDir>/src'], moduleDirectories: ['node_modules', 'src'], transform: { '^.+\\.tsx$': 'ts-jest', '^.+\\.ts$': 'ts-jest', }, testRegex: '(/__tests__/.*.(test|spec)).(jsx?|tsx?)$', moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], collectCoverage: true, collectCoverageFrom: ['<rootDir>/src/**/*.{ts,tsx,js,jsx}'], coverageDirectory: '<rootDir>/coverage/', verbose: true, testTimeout: 30000, testEnvironment: 'jsdom', coveragePathIgnorePatterns: ['<rootDir>/node_modules/', '(.*).d.ts$'], moduleNameMapper: { '^.+\\.module\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2|svg)$': 'identity-obj-proxy', },};提醒:每个公司对
jest的配置是不一样的，所以不肯定依照我的配置来，jest的配置能够参照jest官网在
src文件夹下，新增__tests__文件夹，且在__tests__文件夹中在新增App.test.tsx文件，并编写如下代码：import React from 'react';import { render, cleanup, getByTestId } from '@testing-library/react';import '@testing-library/jest-dom';import App from '../App';afterEach(cleanup);describe('<App />', () => { it('renders without errors', () => { const { container } = render(<App />); // a标签含有data-testid='aNoDisabled',进行查看 expect(getByTestId(container, 'aNoDisabled')).not.toBeDisabled(); });});提醒:每个人的测试格调不一样，大家能够更具自已的测试格调来测试，能够依照,
组件,模块,办法等形式来编写不同的test,我这里就介绍一个繁难的
4 . 找到package.json文件，新增如下代码：
... 省略+ "test": "jest --colors --passWithNoTests",+ "test:watch": "jest --watchAll"
提醒:如果感觉自已配置
jest比较复杂的话，能够举荐大家用vite-plugin-test
svg按名导入
如果咱们要引入多个svg文件的话，通常的做法是import xx from 'xx.svg这样，写多个import,要么在js中通过require数组列表来引入多个，还有的是间接通过操作获取文件夹下，所有的svg，而后遍历等办法，这些计划大多太繁琐了。
webpack中能够通过svg-sprite-loader这个插件来缩小咱们的操作，间接写入svg的名字就能够间接引入了，十分的不便.
vite中也是能够做到的，通过vite-plugin-svg-icons插件，具体实现如下：
装置依赖
$ npm install vite-plugin-svg-icons -D- 在
src文件夹下，新建icons文件夹，且在icons文件夹中，增加一个logon.svg文件. plugins文件夹下，新建svgIcons.ts文件，编写如下代码：import viteSvgIcons from 'vite-plugin-svg-icons';import path from 'path';export default function configSvgIcons() { return viteSvgIcons({iconDirs: [path.resolve(process.cwd(), 'src/icons')],symbolId: 'icon-[dir]-[name]', });}- 在
config/plugins/index.ts中，增加如下代码：
+ import configSvgIcons from './svgIcons';import { Plugin } from 'vite';import reactRefresh from '@vitejs/plugin-react-refresh';export default function createVitePlugins() { const vitePlugins: (Plugin | Plugin[])[] = [ reactRefresh(), + configSvgIcons() ]; ...省略 return vitePlugins;}5 在src文件夹下，新建components文件夹，在components文件夹中新建文件夹svgIcon文件夹，最初在src/components/svgIcon文件夹下，新建index.tsx,且编写如下代码：
import React, { memo, useMemo } from 'react';export type svgProps = { iconClass: string; fill?: string; fontSize?: string; className?: string; style?: React.CSSProperties; onClick?: React.MouseEventHandler<SVGSVGElement>;};const SvgIcon: React.FC<svgProps> = memo(function SvgIcon({ iconClass, fill, fontSize = '18px', className, onClick, style,}) { const iconName = useMemo(() => '#icon-' + iconClass, [iconClass]); return ( <svg fontSize={fontSize!} style={{ ...svgStyle, fontSize, ...style }} aria-hidden="true" className={className!} onClick={onClick} > <use xlinkHref={iconName} fill={fill!} /> </svg> );});const svgStyle = { width: '1em', height: '1em', verticalAlign: '-0.15em', overflow: 'hidden', fill: 'currentColor', fontSize: '1.1em',};export default SvgIcon;6 在src/main.tsx文件中,增加如下的代码：
+ import 'virtual:svg-icons-register';... 省略- 应用，在
src/App.tsx文件中，增加如下代码：
...省略+ import SvgComponent from './components/svgIcon';const App: FC = () => { return ( <div className={styles.App}> <h2>Welcome to vite-react-cil</h2> + <SvgComponent iconClass="logon" fontSize="30px" /> </div> );};export default App;第三方ui组件，按需导入
我的项目中，可能会用到antd,element等ui组件，咱们个别都是按需引入进来的，不会全副引入，这样会造成打包的时候，包很大，vite具体操作如下：
装置依赖
$ npm install vite-plugin-style-import -D$ npm install antd -S在
config/plugins文件夹下，新建styleImport.ts文件,编写如下代码：import styleImport from 'vite-plugin-style-import';export default function configStyleImport() { return styleImport({ libs: [ { libraryName: 'antd', esModule: true, resolveStyle: (name) => { return `antd/es/${name}/style/index`; }, }, ], });}- 在
config/plugins/index.ts中，增加如下的代码：
+ import configStyleImport from './styleImport';import { Plugin } from 'vite';import reactRefresh from '@vitejs/plugin-react-refresh';export default function createVitePlugins() { const vitePlugins: (Plugin | Plugin[])[] = [ reactRefresh(), ...省略 + configStyleImport() ]; ...省略 return vitePlugins;}prettierrc格式化代码
装置如下依赖：
$ npm install prettier -Dvscode编辑器装置Prettier - Code formatter插件，一起配合的应用.
- 新增
.prettierignore,.prettierrc这两个文件，更src同级目录
.prettierrc编写如下代码：
{ "singleQuote": true, "trailingComma": "all", "prettier.tabWidth": 2, "editor.defaultFormatter": "esbenp.prettier-vscode", "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[scss]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "overrides": [ { "files": ".prettierrc", "options": { "parser": "json" } } ]}
提醒:
prettierrc的配置文件也能够是一个js文件，prettierrc的具体配置用法，能够参看官网.prettierignore编写如下代码：
**/*.md**/*.svg**/*.ejs**/*.htmlpackage.json在
package.json中新增如下的代码：{ "scripts": { "format": "prettier --loglevel warn --write \"./**/*.{js,jsx,ts,tsx,css,md,json}\"", }}输出
npm run format即可格式化代码
mock
mock我这边用的较少，根本都是自已写serve接口，举荐大家用vite-plugin-mock插件，配置的话，更我后面介绍的插件配置大同小异,在config/plugins中新建configMock.ts,在新建一个mock文件夹，用来寄存模仿异步的接口,mock文件夹更src目录同级.
editorconfig
团队代码格调对立配置，这里举荐大家用editorconfig.
vscode编辑器装置插件EditorConfig for VS Code,当然，其它的编辑器也是能够的，只是要下对应的editorconfig插件，我这里就以vscode为主.新建
.editorconfig文件，同src同级目录，编写如下代码：[*.{js,jsx,ts,tsx,vue}]charset = utf-8indent_style = spaceindent_size = 2end_of_line = lftrim_trailing_whitespace = trueinsert_final_newline = truemax_line_length = 100提醒:每个团队的代码格调配置是不统一的，这个须要依据自已团队的理论状况来配置
部署
每个公司的部署都不雷同，有的用jenkins,gh-pages,docker等，所以部署这块，大家能够去看看其它的文章，我这里就不论述了.
总结
通过后面的一步一步的搭建，最终的我的项目整体构造如下：
├── config │ ├── plugins │ ├── style │ ├── build.ts │ ├── index.ts│ ├── setupProxy.ts ├── public ├── mock ├── src│ ├── __tests__ │ ├── assets │ ├── components │ ├── icons│ ├── utils │ ├── app.module.scss │ ├── App.tsx │ ├── main.tsx │ ├── vite-env.d.ts ├── .editorconfig ├── .env ├── .env.alpha├── .env.preprod ├── .env.prod ├── .eslintignore ├── .eslintrc.js├── .gitignore ├── .prettierignore ├── .prettierrc├── jest.config.js ├── index.html ├── tsconfig.json├── vite.config.ts└── package.json 论断：
vite尽管是新起之秀，但毛病也是很显著的，生态还没有齐全的遍及开来，当初仍旧是webpack主宰者，构建方面的劣势。vite在性能方面的确要比webpack好，而且因为vite的起因，当初有很多人晓得了rollup,不论怎么样，vite都是值得去学习和理解的.咱们也不能自觉的随风逐流，看到人家公司用
vite,自已也想将公司的我的项目重形成vite,因更具理论状况而来决定。我的项目地址/案例实战
我的项目地址vite-react-cil.
案例实战：
- ant-simple-pro是一款反对
vue3,react,angular3大框架的中台解决方案，3.0版已全副用vite重构。 JoL-player是一款功能强大的
react播放器，typescript开发，bate3.0版用vite重构激励
这篇文章，是笔者在10.1其间写的，尽管不是很高大尚的文章，但也是用心写了的，还心愿各位小伙伴们，激励一下，这样笔者我将更加的有能源了。