第四十七章-Vite插件-vite-plugin-html

1.说明

vite-plugin-html的npm首页

原文：

一个为index.html提供minify和基于EJS模板功能的Vite插件。

minify：压缩index.html代码。
EJS：给index.html提供访问变量的能力。

详情看配置和使用。

2.安装

yarn add vite-plugin-html --dev

3.创建配置文件

build\vite\plugin\html.ts

/**
 * Plugin to minimize and use ejs template syntax in index.html.
 * https://github.com/anncwb/vite-plugin-html
 */
import type { Plugin } from 'vite';
import type { ViteEnv } from '../../utils';

import html from 'vite-plugin-html';

import pkg from '../../../package.json';
import { GLOB_CONFIG_FILE_NAME } from '../../constant';

export function configHtmlPlugin(env: ViteEnv, isBuild: boolean) {
  const { VITE_GLOB_APP_TITLE, VITE_PUBLIC_PATH } = env;

  // ↓这里后续章动态配置讲解
  // const path = VITE_PUBLIC_PATH.endsWith('/') ? VITE_PUBLIC_PATH : `${VITE_PUBLIC_PATH}/`;
  // const getAppConfigSrc = () => {
  //   return `${path || '/'}${GLOB_CONFIG_FILE_NAME}?v=${pkg.version}-${new Date().getTime()}`;
  // };

  const htmlPlugin: Plugin[] = html({
    minify: isBuild,
    inject: {
      // Inject data into ejs template
      injectData: {
        title: VITE_GLOB_APP_TITLE,
      },
      // ↓这里后续章动态配置讲解
      // tags: isBuild
      //   ? [
      //       {
      //         tag: 'script',
      //         attrs: {
      //           src: getAppConfigSrc(),
      //         },
      //       },
      //     ]
      //   : [],
    },
  });
  return htmlPlugin;
}

4.配置Vite插件

build\vite\plugin\index.ts

// ...
import { configHtmlPlugin } from './html';

export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
  // ...
  // vite-plugin-html
  vitePlugins.push(configHtmlPlugin(viteEnv, isBuild));
  // ...
}

5.补充

做完本章操作之后，我突然发现项目不能编译了。

总是报package.json找不到。我看了一下代码，主要就是build\vite\plugin\html.ts中的导入无法找到。

我反复对比了一下VbenAdmin的源码。也没有发现有什么不同的地方。

然后我又试了一下，当执行vite命令的时候，build文件夹下始终不能访问package.json。但是src和vite.config.ts中都可以导入访问。

那么这里有两种讲解方案。

5.1.去掉导入

这里的导入只是我们在使用_app.config.js的时候加上一个版本信息。可以让我们知道，这个项目是多久打包的，打包的时候版本是多少。所以去掉也无妨，_app.config.js还是一样可以访问的。

5.2.从vite.config.ts中传参下去

我使用了这个方案，因为万一build文件夹其他地方要用package.json呢。不过用的地方应该也很少吧。

修改vite.config.ts：

// ...

import pkg from './package.json';

// ...

export default ({ command, mode }: ConfigEnv): UserConfig => {
  // ...

  return {
   	// ...

    // The vite plugin used by the project. The quantity is large, so it is separately extracted and managed
    plugins: createVitePlugins(viteEnv, isBuild, pkg),
	// ...
  };
};

修改build\vite\plugin\index.ts：

// ...

export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, pkg: any) {
  // ...
  vitePlugins.push(configHtmlPlugin(viteEnv, isBuild, pkg));

  return vitePlugins;
}

修改build\vite\plugin\html.ts：

// ...

import html from 'vite-plugin-html';

export function configHtmlPlugin(env: ViteEnv, isBuild: boolean, pkg: any) {
  // ...
  const getAppConfigSrc = () => {
    return `${path || '/'}${GLOB_CONFIG_FILE_NAME}?v=${pkg.version}-${new Date().getTime()}`;
  };
  // ...
  return htmlPlugin;
}