fix(build): vite-html

2 years ago · 2f466919bd
4 changed files with 108 additions and 1 deletions
--- a/build/vite/plugin/html.ts
+++ b/build/vite/plugin/html.ts
@ -0,0 +1,40 @@
+/**
+ * Plugin to minimize and use ejs template syntax in index.html.
+ * https://github.com/anncwb/vite-plugin-html
+ */
+import type { PluginOption } from 'vite'
+import { createHtmlPlugin } 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: PluginOption[] = createHtmlPlugin({
+    minify: isBuild,
+    inject: {
+      // Inject data into ejs template
+      data: {
+        title: VITE_GLOB_APP_TITLE
+      },
+      // Embed the generated app.config.js file
+      tags: isBuild
+        ? [
+            {
+              tag: 'script',
+              attrs: {
+                src: getAppConfigSrc()
+              }
+            }
+          ]
+        : []
+    }
+  })
+  return htmlPlugin
+}
--- a/build/vite/plugin/index.ts
+++ b/build/vite/plugin/index.ts
@ -8,6 +8,7 @@ import purgeIcons from 'vite-plugin-purge-icons'
 import VitePluginCertificate from 'vite-plugin-mkcert'
 import vueSetupExtend from 'unplugin-vue-setup-extend-plus/vite'
 import { configPwaConfig } from './pwa'
+import { configHtmlPlugin } from './html'
 import { configCompressPlugin } from './compress'
 import { configStyleImportPlugin } from './styleImport'
 import { configVisualizerConfig } from './visualizer'
@ -38,6 +39,9 @@ export function createVitePlugins(mode: string, viteEnv: ViteEnv, isBuild: boole
  // @vitejs/plugin-legacy
  VITE_LEGACY && isBuild && vitePlugins.push(legacy())

+  // vite-plugin-html
+  vitePlugins.push(configHtmlPlugin(viteEnv, isBuild))
+
  // vite-plugin-svg-icons
  vitePlugins.push(configSvgIconsPlugin(isBuild))

--- a/package.json
+++ b/package.json
@ -122,6 +122,7 @@
    "unplugin-vue-setup-extend-plus": "^0.4.9",
    "vite": "^4.2.1",
    "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-html": "^3.2.0",
    "vite-plugin-mkcert": "^1.13.3",
    "vite-plugin-progress": "^0.0.6",
    "vite-plugin-purge-icons": "^0.9.2",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -83,6 +83,7 @@ specifiers:
  vditor: ^3.9.1
  vite: ^4.2.1
  vite-plugin-compression: ^0.5.1
+  vite-plugin-html: ^3.2.0
  vite-plugin-mkcert: ^1.13.3
  vite-plugin-progress: ^0.0.6
  vite-plugin-purge-icons: ^0.9.2
@ -190,6 +191,7 @@ devDependencies:
  unplugin-vue-setup-extend-plus: 0.4.9
  vite: 4.2.1_vegyvzqowfnzsveoljeroqfyum
  vite-plugin-compression: 0.5.1_vite@4.2.1
+  vite-plugin-html: 3.2.0_vite@4.2.1
  vite-plugin-mkcert: 1.13.3_vite@4.2.1
  vite-plugin-progress: 0.0.6_vite@4.2.1
  vite-plugin-purge-icons: 0.9.2_vite@4.2.1
@ -3586,6 +3588,11 @@ packages:
    engines: {node: '>= 10'}
    dev: true

+  /commander/8.3.0:
+    resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
+    engines: {node: '>= 12'}
+    dev: true
+
  /common-tags/1.8.2:
    resolution: {integrity: sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==}
    engines: {node: '>=4.0.0'}
@ -3610,9 +3617,13 @@ packages:
    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
    dev: true

+  /connect-history-api-fallback/1.6.0:
+    resolution: {integrity: sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==}
+    engines: {node: '>=0.8'}
+    dev: true
+
  /consola/2.15.3:
    resolution: {integrity: sha512-9vAdYbHj6x2fLKC4+oPH0kFzY/orMZyG2Aj+kNylHxKGJ/Ed4dpNyAQYwJOdqO4zdM7XpVHmyejQDcQHrnuXbw==}
-    dev: false

  /console/0.7.2:
    resolution: {integrity: sha512-+JSDwGunA4MTEgAV/4VBKwUHonP8CzJ/6GIuwPi6acKFqFfHUdSGCm89ZxZ5FfGWdZfkdgAroy5bJ5FSeN/t4g==}
@ -4224,6 +4235,11 @@ packages:
      is-obj: 2.0.0
    dev: true

+  /dotenv-expand/8.0.3:
+    resolution: {integrity: sha512-SErOMvge0ZUyWd5B0NXMQlDkN+8r+HhVUsxgOO7IoPDOdDRD2JjExpN6y3KnFR66jsJMwSn1pqIivhU5rcJiNg==}
+    engines: {node: '>=12'}
+    dev: true
+
  /dotenv/16.0.3:
    resolution: {integrity: sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==}
    engines: {node: '>=12'}
@ -5445,6 +5461,20 @@ packages:
      lru-cache: 6.0.0
    dev: true

+  /html-minifier-terser/6.1.0:
+    resolution: {integrity: sha512-YXxSlJBZTP7RS3tWnQw74ooKa6L9b9i9QYXY21eUEvhZ3u9XLfv6OnFsQq6RxkhHygsaUMvYsZRV5rU/OVNZxw==}
+    engines: {node: '>=12'}
+    hasBin: true
+    dependencies:
+      camel-case: 4.1.2
+      clean-css: 5.3.2
+      commander: 8.3.0
+      he: 1.2.0
+      param-case: 3.0.4
+      relateurl: 0.2.7
+      terser: 5.16.6
+    dev: true
+
  /html-tags/3.2.0:
    resolution: {integrity: sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg==}
    engines: {node: '>=8'}
@ -6646,6 +6676,13 @@ packages:
      whatwg-url: 5.0.0
    dev: true

+  /node-html-parser/5.4.2:
+    resolution: {integrity: sha512-RaBPP3+51hPne/OolXxcz89iYvQvKOydaqoePpOgXcrOKZhjVIzmpKZz+Hd/RBO2/zN2q6CNJhQzucVz+u3Jyw==}
+    dependencies:
+      css-select: 4.3.0
+      he: 1.2.0
+    dev: true
+
  /node-releases/2.0.10:
    resolution: {integrity: sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==}
    dev: true
@ -7391,6 +7428,11 @@ packages:
      jsesc: 0.5.0
    dev: true

+  /relateurl/0.2.7:
+    resolution: {integrity: sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==}
+    engines: {node: '>= 0.10'}
+    dev: true
+
  /repeat-element/1.1.4:
    resolution: {integrity: sha512-LFiNfRcSu7KK3evMyYOuCzv3L10TW7yC1G2/+StMjK8Y6Vqd2MG7r/Qjw4ghtuCOjFvlnms/iMmLqpvW/ES/WQ==}
    engines: {node: '>=0.10.0'}
@ -8632,6 +8674,26 @@ packages:
      - supports-color
    dev: true

+  /vite-plugin-html/3.2.0_vite@4.2.1:
+    resolution: {integrity: sha512-2VLCeDiHmV/BqqNn5h2V+4280KRgQzCFN47cst3WiNK848klESPQnzuC3okH5XHtgwHH/6s1Ho/YV6yIO0pgoQ==}
+    peerDependencies:
+      vite: '>=2.0.0'
+    dependencies:
+      '@rollup/pluginutils': 4.2.1
+      colorette: 2.0.19
+      connect-history-api-fallback: 1.6.0
+      consola: 2.15.3
+      dotenv: 16.0.3
+      dotenv-expand: 8.0.3
+      ejs: 3.1.8
+      fast-glob: 3.2.12
+      fs-extra: 10.1.0
+      html-minifier-terser: 6.1.0
+      node-html-parser: 5.4.2
+      pathe: 0.2.0
+      vite: 4.2.1_vegyvzqowfnzsveoljeroqfyum
+    dev: true
+
  /vite-plugin-mkcert/1.13.3_vite@4.2.1:
    resolution: {integrity: sha512-cuAbOb6bHyTMhha9YimL6ZB/WoCcFy8d3uaf5n5Ovgybix1yvEu3pxARy2HjC5LJIS1qq6fFXG0+oj6/XMUapA==}
    engines: {node: '>=v16.7.0'}