关于前端:必看收藏从零搭建一款vitereactcil企业级脚手架

64次阅读

共计 17740 个字符，预计需要花费 45 分钟才能阅读完成。

前言

vite 是个什么玩意哈😳？都 2021 年了，别说不晓得哈？要是不晓得小心 尤大大 不让你用 vue 了。

vite是一个开发构建工具，开发过程中它利用浏览器 native ES Module 个性导入组织代码，生产中利用 rollup 作为打包工具，且尤 vue 作者 尤雨溪 组织团队开发，它有如下特点：

  • 启动快
  • 热模块更新
  • 按需编译
  • 完满兼容 rollup 生态

咱们的新我的项目曾经尝试用了一下 vite, 成果的话，的确比webpack 好点，当初我来论述一下，怎么搭建一个 企业级 的vite工程化。

根底筹备

  1. 新建文件夹config,public,src

  2. 生成 package.json，执行如下命令👇

    $ npm init
  3. 新增 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

  1. 在 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;
  2. 在 src/app.css 文件中书写如下代码
* {
  padding: 0;
  margin: 0;
}
.App{width:200px;}

  1. 在 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'),
    		);

  2. 在 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"]
    		}

  3. 在 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;
    		}

  4. 在 vite.config.ts 文件中书写如下代码

    		import {defineConfig} from 'vite';
    		import createVitePlugins from './config/plugins';
    		export default defineConfig((configEnv) => {
    		  return {plugins: createVitePlugins(),
    		  };
    		});
  5. 在 public 文件夹中寄存一个 favicon.ico 图文件.

  6. 在 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>

  7. 在 .gitignore 文件中书写如下配置

    		node_modules
    		.DS_Store
    		dist
    		coverage
    		dist-ssr
    		*.local

  8. 在 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 变量，如下👇：

  1. 在 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;
    		}

  2. 在 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 格局的，前面肯定要加 ; 否则会报错

  3. 找到 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,
  };
});

  1. 将 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

  1. 找到 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

  2. typescript环境下申明自定义的环境变量.
    在 src 文件夹下，新建 vite-env.d.ts 文件，src/vite-env.d.ts文件外面编写如下代码：

    		/// <reference types="vite/client" />
    		interface ImportMetaEnv {VITE_APP_ANT: 'dev' | 'alpha' | 'preprod' | 'prod';}
  3. 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 配置

  1. 在 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 文件，就必须要写成函数的模式

  2. 在 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;
  3. 找到 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 配置

  1. 找到 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;
  1. 在 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,
  });
}
  1. 找到 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;
}
  1. 在 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;
  1. 找到 vite.config.ts 文件，新增如下代码：
... 省略
+ import build from './config/build';
export default defineConfig((configEnv) => {
  return {
   ... 省略
    + build
  };
});

进阶

eslint

  1. 先装置如下的依赖：

    $ 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 这几个依赖绝对其它的来说，重要一些，倡议装置.

  2. 新建 .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/*
  3. 找到 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 的插件吗？当然有.

  1. 装置如下依赖：

    $ npm install vite-plugin-checker -D
  2. 找到 config/index.ts 文件，新增如下代码：
/**
 * @description 是否在开发模式下，启动 eslint
 */
+ export const VITE_APP_ESLINT = true;
  1. 找到 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 这个插件，这个插件在检测谬误时，会阻止热更新.

  1. 找到 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

  1. 装置如下依赖：

    $ npm install @testing-library/jest-dom @types/jest jest ts-jest identity-obj-proxy -D

  2. 新增 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 官网

  3. 在 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 插件，具体实现如下：

  1. 装置依赖

    $ npm install vite-plugin-svg-icons -D
  2. 在 src 文件夹下，新建 icons 文件夹，且在 icons 文件夹中，增加一个 logon.svg 文件.

  3. 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]',
    		 });
    		}
  4. 在 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';
... 省略
  1. 应用，在 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具体操作如下：

  1. 装置依赖

    $ npm install vite-plugin-style-import -D
    $ npm install antd -S

  2. 在 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`;
    		     },
    		   },
    		 ],
    		  });
    		}
  3. 在 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 插件，一起配合的应用.

  1. 新增 .prettierignore,.prettierrc 这两个文件，更 src 同级目录

.prettierrc编写如下代码：

{
  "singleQuote": true,
  "trailingComma": "all",
  "prettier.tabWidth": 2,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[typescript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},
  "": {"editor.defaultFormatter":"esbenp.prettier-vscode"},"": {"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

  1. 在 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.

  1. vscode编辑器装置插件 EditorConfig for VS Code, 当然，其它的编辑器也是能够的，只是要下对应的editorconfig 插件，我这里就以 vscode 为主.

  2. 新建 .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,angular 3 大框架的中台解决方案，3.0 版已全副用 vite 重构。

  • JoL-player 是一款功能强大的 react 播放器，typescript开发，bate3.0版用 vite 重构

    激励

    这篇文章，是笔者在 10.1 其间写的，尽管不是很高大尚的文章，但也是用心写了的，还心愿各位小伙伴们，激励一下👍，这样笔者我将更加的有能源了💪。

正文完
前端
发表至： 前端
2021-10-08
 0
关于前端:CSS全局关键字
关于前端:微前端架构的几种技术选型
关于前端:Taro-如何开始微信小程序的开发
关于前端:VUE中的指的是什么