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());
复制代码