background

Recently, the team used Vite2 + vue3 + TS as the technology stack in the development of the mall management side project. In the process of building the scaffolding of the project, we found rich plug-in architecture of Vite2, but at the same time, we also step a lot of pits, and then keep filling the pits. Therefore, we plan to summarize the correct position of using Vite2 plug-in ✅

In the process of study and work, we are constantly digging holes, and then fill holes, but you have to have confidence, as long as you can insist on the road of filling holes, your career will be more smooth!

A, preparation,

We created a build/vite/plugin directory in the root of the project to store all the vite plug-in configurations. Our project structure looks like 👇🏻

1.

Vite Plugins officially says the portal

The original:

Type: (Plugin | Plugin []) []

An array of plugins to use. See the Plug-in API for more details on the Vite plug-in.

2. Configure the plug-in

It receives either a plug-in object, or an array of plug-ins. Since we need to configure many plug-ins and each plug-in has a different configuration, we can encapsulate the array of plug-ins into a method. Configure all vite plug-ins in a unified manner.

2.1. Create the generate plug-in array method

This is the entry to import all vite

Build/vite/plugin/index. Ts:

import type { Plugin } from 'vite';
import type { ViteEnv } from '.. /.. /.. /types/global.d.ts';

export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
  const { VITE_USE_IMAGEMIN, VITE_USE_MOCK, VITE_LEGACY, VITE_BUILD_COMPRESS } = viteEnv;

  const vitePlugins: (Plugin | Plugin[])[] = [];
  return vitePlugins;
}
Copy the code

types/global.d.ts

declare interface ViteEnv {
  VITE_PORT: number;
  VITE_USE_MOCK: boolean;
  VITE_USE_PWA: boolean;
  VITE_PUBLIC_PATH: string;
  VITE_PROXY: [string, string][];
  VITE_GLOB_APP_TITLE: string;
  VITE_GLOB_APP_SHORT_NAME: string;
  VITE_USE_CDN: boolean;
  VITE_DROP_CONSOLE: boolean;
  VITE_BUILD_COMPRESS: 'gzip' | 'brotli' | 'none'; VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE: boolean; VITE_LEGACY? : boolean; VITE_USE_IMAGEMIN: boolean; VITE_GENERATE_UI: string; }Copy the code

2.2. Configure the Vite plug-in

Vite. Config. Ts:

// ...
import { createVitePlugins } from './build/vite/plugin';
// ...
export default ({ command, mode }: ConfigEnv): UserConfig= > {
  // ...

  return {
    // ...
    // If the project uses a large number of Vite plug-ins, it will be separated out and managed separately
    plugins: createVitePlugins(viteEnv, isBuild),

    // ...
  };
};
Copy the code

Second, the basic plug-in

The next step is to introduce some basic plug-ins

A,@vitejs/plugin-vue

1.

@vitejs/plugin-vue

To write a Vue application, this dependency is added by default when you create an application using Vite.

2. Import components

This is the vue plug-in does not need to install, also does not need to configure, can directly put in.

Build/vite/plugin/index. Ts:

// ...

import vue from '@vitejs/plugin-vue';
// ...

export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
  // ...
  const vitePlugins: (Plugin | Plugin[])[] = [vue(),];
  // ...
  return vitePlugins;
}
Copy the code

Second,@vitejs-plugin-vue-jsx

1.

Reference links:

  • @vitejs/plugin-vue-jsx
  • Vue-JSX
  • Use in vue-jsx
  • Use JSX in vue-setup
  • Ue – Template syntax

Why use JSX?

  • Actually,JSXThe effect is the same as we are invuethetemplateThe code written in It’s going to be rendered ascreateElement.
  • The difference is thattemplateThe tag is immutable and we want to implement dynamic tags that can only be usedv-if. The main feature of JSX is that it is flexible and can be assembled at willHTMLThe code.

If we want to implement a component rendering
tag, n is the parameter we pass in. If we use template, then we’re going to write six V-ifs. But with JSX, we can put n directly into the label.

2. Import components

Installation:

yarn add @vitejs/plugin-vue-jsx --dev
Copy the code

The Vue-jsx plug-in does not need to be configured and can be placed directly in the plug-in directory.

Build/vite/plugin/index. Ts:

// ...

import vueJsx from '@vitejs/plugin-vue-jsx';
// ...

export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
  // ...
  const vitePlugins: (Plugin | Plugin[])[] = [vue(),vueJsx()];
  // ...
  return vitePlugins;
}
Copy the code

Three,@vitejs-plugin-legacy

1.

@vitejs/plugin-legacy

Description:

Note: This plug-in requires vite@^2.0.0-beta.12.

Vite’s default browser support baseline is native ESM. This plugin provides support for traditional browsers that do not support the native ESM.

By default, the plug-in will generate one legacy Chunk for each chunk in the final bundle, convert it with @babel/ rejump-env, and publish it as a SystemJS module (still code split supported!). .

Generate a Polyfill chunk that contains the SystemJS runtime, along with any polyfills necessary based on the specified browser target and actual usage in the bundle.

Inject the

Inject the import.meta.env.LEGACY env variable, which is true only in LEGACY production builds and false in all other cases. (Requires vite@^2.0.0-beta.69).

So this is a browser-compatible plugin. We directly install use, personal feeling learning words also do not use.

2. Install

yarn add @vitejs/plugin-legacy --dev
Copy the code

Build/vite/plugin/index. Ts:

// ...
import legacyPlugin from '@vitejs/plugin-legacy';
// ...

export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
  // ...
	const { VITE_LEGACY } = viteEnv;
  // @vitejs/plugin-legacy
  VITE_LEGACY && vitePlugins.push(legacy({
    targets: [
        'Android > 39'.'Chrome >= 60'.'Safari > = 10.1'.'the iOS > = 10.3'.'Firefox >= 54'.'Edge >= 15',]}));// ...
  return vitePlugins;
}
Copy the code

Depending on the project, you can use this plug-in in a formal environment, such as 👇🏻

VITE_LEGACY && isBuild && vitePlugins.push(legacy());
Copy the code