From 2f466919bd5c01984c4570a4f8f7b1a35c39ead1 Mon Sep 17 00:00:00 2001 From: xingyuv Date: Thu, 23 Mar 2023 14:05:19 +0800 Subject: [PATCH] fix(build): vite-html --- build/vite/plugin/html.ts | 40 ++++++++++++++++++++++++ build/vite/plugin/index.ts | 4 +++ package.json | 1 + pnpm-lock.yaml | 64 +++++++++++++++++++++++++++++++++++++- 4 files changed, 108 insertions(+), 1 deletion(-) create mode 100644 build/vite/plugin/html.ts diff --git a/build/vite/plugin/html.ts b/build/vite/plugin/html.ts new file mode 100644 index 0000000..af8ee52 --- /dev/null +++ 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 +} diff --git a/build/vite/plugin/index.ts b/build/vite/plugin/index.ts index ade54f6..3879f76 100644 --- 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)) diff --git a/package.json b/package.json index 5648ee0..70e7b62 100644 --- 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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bd3a43e..3de2d99 100644 --- 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'}