vite2 常用插件篇（四）- 进阶插件

前言

上一篇文章主要讲了vite日常开发常用的几个进阶插件，这篇文章讲下另外几个常用的进阶插件

一、vite-plugin-theme

1.说明

这个是用于动态更改界面主题色的 vite 插件

• npm：vite-plugin-theme
• git：vite-plugin-theme

2.安装

yarn add vite-plugin-theme --dev

3.配置插件

build/vite/plugin/theme.ts：

/**
 * 网站主题颜色切换的Vite插件
 * https://github.com/anncwb/vite-plugin-theme
 */
import { viteThemePlugin, mixLighten, mixDarken, tinycolor } from 'vite-plugin-theme';
import { getThemeColors, generateColors } from '../../config/themeConfig';

export function configThemePlugin() {
  const colors = generateColors({
    mixDarken,
    mixLighten,
    tinycolor,
  });

  const plugin = viteThemePlugin({
    // 生成的很多个颜色方法
    colorVariables: [...getThemeColors(), ...colors],
  });
  return plugin;
}

4.配置Vite

build/vite/plugin/index.ts：

// ...
import { configThemePlugin } from './theme';

export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, pkg: any) {
  // ...
  //vite-plugin-theme
  vitePlugins.push(configThemePlugin());

  return vitePlugins;
}

5.修改主题方法

之后要修改主题，直接调用一下这个方法即可。

src/theme/index.ts：

import { getThemeColors, ThemeMode, generateColors } from '../../build/config/themeConfig';

import { replaceStyleVariables } from 'vite-plugin-theme/es/client';
import { mixLighten, mixDarken, tinycolor } from 'vite-plugin-theme/es/colorUtils';

export async function changeTheme(color: string, theme?: ThemeMode) {
  const colors = generateColors({
    mixDarken,
    mixLighten,
    tinycolor,
    color,
  });

  return await replaceStyleVariables({
    colorVariables: [...getThemeColors(color, theme), ...colors],
  });
}

二、vite-plugin-imagemin

1.说明

vite-plugin-imagemin：一个压缩图片资源的 vite 插件。

2.配置镜像

package.json：

官方建议：用于安装imagemin的依赖关系，因为中国可能没有安装imagemin

"resolutions": {
  "bin-wrapper": "npm:bin-wrapper-china"
},

3.安装

yarn add vite-plugin-imagemin --dev

4.配置插件

build/vite/plugin/imagemin.ts：

/**
 * 用于压缩生产环境输出的图片资源
 * https://github.com/anncwb/vite-plugin-imagemin
 */

import viteImagemin from 'vite-plugin-imagemin';

export function configImageminPlugin() {
  const plugin = viteImagemin({
    gifsicle: {
      optimizationLevel: 7,
      interlaced: false,
    },
    optipng: {
      optimizationLevel: 7,
    },
    mozjpeg: {
      quality: 8,
    },
    pngquant: {
      quality: [0.8, 0.9],
      speed: 4,
    },
    svgo: {
      plugins: [
        {
          removeViewBox: false,
        },
        {
          removeEmptyAttrs: false,
        },
      ],
    },
  });
  return plugin;
}

详细的配置信息可以看 options

5.配置Vite

build/vite/plugin/index.ts：

// ...
import { configImageminPlugin } from './imagemin';

export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, pkg: any) {
  // ...
  const {
    VITE_USE_IMAGEMIN: shouldUseImagemin
  } = viteEnv;
  // 生产环境使用插件
  if (isBuild) {
    // vite-plugin-imagemin
    shouldUseImagemin && vitePlugins.push(configImageminPlugin());
  }

  return vitePlugins;
}

三、vite-plugin-pwa

1.说明

• vite-plugin-pwa：PWA一些技术集成。
• Service Worker-参考链接
• PWA-MDN说明

如果你还不清楚PWA是什么也没关系。直接配置即可。不影响应用在网页端的运行。

2.安装

yarn add vite-plugin-pwa --dev

3.配置插件

build/vite/plugin/pwa.ts：

/**
 * vite pwa 0 配置插件
 * https://github.com/antfu/vite-plugin-pwa
 */

import { VitePWA } from 'vite-plugin-pwa';

export function configPwaConfig(env: ViteEnv) {
  const { VITE_USE_PWA: shouldUsePwa, VITE_GLOB_APP_TITLE: appTitle, VITE_GLOB_APP_SHORT_NAME: shortName } = env;

  if (shouldUsePwa) {
    // vite-plugin-pwa
    const pwaPlugin = VitePWA({
      manifest: {
        name: appTitle,
        short_name: shortName,
        icons: [
          {
            src: './resource/img/pwa-192x192.png',
            sizes: '192x192',
            type: 'image/png',
          },
          {
            src: './resource/img/pwa-512x512.png',
            sizes: '512x512',
            type: 'image/png',
          },
        ],
      },
    });
    return pwaPlugin;
  }
  return [];
}

4.配置Vite

build/vite/plugin/index.ts：

// ...
import { configPwaConfig } from './pwa';

export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, pkg: any) {
  // ...
  // 生产环境使用插件
  if (isBuild) {
    // ...
    // vite-plugin-pwa
    vitePlugins.push(configPwaConfig(viteEnv));
  }

  return vitePlugins;
}