必看+收藏，从零搭建一款vite-react-cil企业级脚手架从零搭建一款vite-react-cil企业级脚手架，保

前言

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_Store
dist
coverage
dist-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 -D

css/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=development
VITE_APP_ANT=dev

.env.alpha文件编写如下代码：

NODE_ENV=production
VITE_APP_ANT=alpha

.env.preprod文件编写如下代码：

NODE_ENV=production
VITE_APP_ANT=preprod

.env.prod文件编写如下代码：

NODE_ENV=production
VITE_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,development

typescript环境下申明自定义的环境变量. 在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_Store
dist
coverage
src/__tests__
__tests__
dist-ssr
*.local
node_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 -D

vscode编辑器安装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
**/*.html
package.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-8
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true
max_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其间写的，虽然不是很高大尚的文章，但也是用心写了的，还希望各位小伙伴们，鼓励一下👍，这样笔者我将更加的有动力了💪。