vite2 經常使用插件篇（一）- 基礎插件

背景

最近團隊在開發商城管理端項目，使用Vite2 + vue3 + TS做爲技術棧，搭建項目腳手架過程當中，發現 vite2豐富的插件架構，可是同時也踩了很多坑，而後不停地填坑，所以打算總結一下 vite2 插件使用的正確姿式 ✅

咱們在學習和工做的過程當中，就是在不停地挖坑，而後填坑，but 你要有信心，只要能堅持走過填坑這段路，你的職業生涯將會愈發平坦！

1、準備

咱們在項目根目錄下建立 build/vite/plugin目錄，用來存放vite全部的插件配置，咱們的項目結構就像這樣 👇🏻

1.說明

vite plugins 官方說明傳送門

原文：

類型： (Plugin | Plugin[])[]

將要用到的插件數組。查看 插件 API 獲取 Vite 插件的更多細節。

2.配置插件

它接收一個插件對象，或者一個插件數組。因爲咱們須要配置不少插件，而每個插件的配置也不同，因此咱們能夠把插件數組封裝到一個方法中去。統一配置vite全部的插件。

2.1.建立生成插件數組方法

這個是導入全部 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;
}
複製代碼

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;
}
複製代碼

2.2.配置Vite插件

vite.config.ts：

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

  return {
    // ...
    // 考錄到項目使用的vite插件數量大，那就抽離出去單獨管理
    plugins: createVitePlugins(viteEnv, isBuild),

    // ...
  };
};
複製代碼

2、基礎的插件

接下來就是介紹幾種基礎的插件

1、@vitejs/plugin-vue

1.說明

@vitejs/plugin-vue

要編寫Vue程序，這個不用解釋了吧，在使用Vite建立應用程序的時候，這個依賴就已經默認加上了。

2.引入組件

這個是vue插件不用安裝，也不用配置，能夠直接放進去。

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;
}
複製代碼

2、 @vitejs-plugin-vue-jsx

1.說明

參考連接：

• @vitejs/plugin-vue-jsx
• Vue-JSX
• Vue- JSX 中的用法
• Vue-setup中使用JSX
• Vue-模板語法

爲何使用JSX?

• 其實JSX的效果和咱們在vue的template中寫的代碼效果是同樣的。最終都會被渲染成createElement。
• 區別是template的標籤是不可變的，咱們要實現動態標籤，只能使用v-if。而JSX的最大特色就是靈活，咱們能夠隨意組裝HTML代碼。

假如咱們要實現一個組件渲染<hn></hn>標籤，n是咱們傳入的參數。若是用template，那麼咱們要寫6個v-if。可是若是使用JSX，咱們就能夠直接將n放到標籤中去。

2.引入組件

安裝：

yarn add @vitejs/plugin-vue-jsx --dev
複製代碼

vue-jsx插件不用配置，能夠直接放到插件目錄。

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;
}
複製代碼

3、@vitejs-plugin-legacy

1.說明

@vitejs/plugin-legacy

原文描述：

注：此插件須要vite@^2.0.0-beta.12。

Vite默認的瀏覽器支持基線是原生ESM。本插件爲不支持原生ESM的傳統瀏覽器提供支持。

默認狀況下，該插件將爲最終bundle中的每一個chunk生成一個相應的legacy chunk，用@babel/reset-env進行轉換，並以SystemJS模塊的形式發佈（仍然支持代碼分割！）。

生成一個包含SystemJS運行時的polyfill chunk，以及由指定的瀏覽器目標和捆綁包中的實際使用狀況決定的任何須要的polyfills。

在生成的HTML中注入<script nomodule>標籤，以便在沒有本地ESM支持的瀏覽器中有條件地加載polyfills和legacy bundle。

注入 import.meta.env.LEGACY env 變量，該變量僅在 legacy 生產構建中爲真，而在全部其餘狀況下爲假。(須要vite@^2.0.0-beta.69)。

因此這個是一個瀏覽器兼容的插件。咱們直接安裝使用，我的感受學習的話也用不上。

2.安裝

yarn add @vitejs/plugin-legacy --dev
複製代碼

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',
        'iOS >= 10.3',
        'Firefox >= 54',
        'Edge >= 15',
      ],
  }));
  // ...
  return vitePlugins;
}
複製代碼

能夠根據項目狀況是否在正式環境才使用此插件，好比像這樣 👇🏻

VITE_LEGACY && isBuild && vitePlugins.push(legacy());
複製代碼