likes
comments
collection
share

vite2 常用插件篇（一）- 基础插件背景 最近团队在开发商城管理端项目，使用Vite2 + vue3 + TS作为技

作者站长头像
站长
· 阅读数 40

背景

最近团队在开发商城管理端项目，使用Vite2 + vue3 + TS作为技术栈，搭建项目脚手架过程中，发现 vite2丰富的插件架构，但是同时也踩了不少坑，然后不停地填坑，因此打算总结一下 vite2 插件使用的正确姿势 ✅

我们在学习和工作的过程中，就是在不停地挖坑，然后填坑，but 你要有信心，只要能坚持走过填坑这段路，你的职业生涯将会愈发平坦！

一、准备

我们在项目根目录下创建 build/vite/plugin目录，用来存放vite所有的插件配置，我们的项目结构就像这样 👇🏻

vite2 常用插件篇（一）- 基础插件背景 最近团队在开发商城管理端项目，使用Vite2 + vue3 + TS作为技

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),

    // ...
  };
};

二、基础的插件

接下来就是介绍几种基础的插件

一、@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;
}

二、 @vitejs-plugin-vue-jsx

1.说明

参考链接：

为什么使用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;
}

三、@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());
转载自:https://juejin.cn/post/6993699163263221797
评论
请登录