diff --git a/package.json b/package.json index ea46409d..6e9b7c89 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,8 @@ "@tiptap/extension-character-count": "2.0.0-beta.31", "@vueuse/components": "^8.9.4", "@vueuse/core": "^8.9.4", - "@vueuse/router": "^9.2.0", + "@vueuse/router": "^8.9.4", + "@vueuse/shared": "^8.9.4", "axios": "^0.27.2", "colorjs.io": "^0.4.0", "dayjs": "^1.11.5", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ea69e814..0bdaee75 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -40,7 +40,8 @@ importers: '@vue/tsconfig': ^0.1.3 '@vueuse/components': ^8.9.4 '@vueuse/core': ^8.9.4 - '@vueuse/router': ^9.2.0 + '@vueuse/router': ^8.9.4 + '@vueuse/shared': ^8.9.4 autoprefixer: ^10.4.12 axios: ^0.27.2 c8: ^7.12.0 @@ -106,7 +107,8 @@ importers: '@tiptap/extension-character-count': 2.0.0-beta.31 '@vueuse/components': 8.9.4_vue@3.2.39 '@vueuse/core': 8.9.4_vue@3.2.39 - '@vueuse/router': 9.2.0_u55wpvgoaskkfdnhr4v2vlugdi + '@vueuse/router': 8.9.4_u55wpvgoaskkfdnhr4v2vlugdi + '@vueuse/shared': 8.9.4_vue@3.2.39 axios: 0.27.2 colorjs.io: 0.4.0 dayjs: 1.11.5 @@ -3481,12 +3483,12 @@ packages: resolution: {integrity: sha512-IwSfzH80bnJMzqhaapqJl9JRIiyQU0zsRGEgnxN6jhq7992cPUJIRfV+JHRIZXjYqbwt07E1gTEp0R0zPJ1aqw==} dev: false - /@vueuse/router/9.2.0_u55wpvgoaskkfdnhr4v2vlugdi: - resolution: {integrity: sha512-N80vwh6EGFJiUIyCbfGhEDHzolNvTEPzJBLTuwy7pJU91VjNotMsSvUhwEI8l/cBpdBaIL9dUxRqXDBVrQBahA==} + /@vueuse/router/8.9.4_u55wpvgoaskkfdnhr4v2vlugdi: + resolution: {integrity: sha512-+tYxFAa6U+nd61tteJykizMWNuPY+lcxXj79FWlvd2sui0BgXUiacusX9ZNDL/mAnUktazuLXgLKJSdrJeHhkA==} peerDependencies: vue-router: '>=4.0.0-rc.1' dependencies: - '@vueuse/shared': 9.2.0_vue@3.2.39 + '@vueuse/shared': 8.9.4_vue@3.2.39 vue-demi: 0.12.1_vue@3.2.39 vue-router: 4.1.5_vue@3.2.39 transitivePeerDependencies: @@ -3509,15 +3511,6 @@ packages: vue-demi: 0.12.1_vue@3.2.39 dev: false - /@vueuse/shared/9.2.0_vue@3.2.39: - resolution: {integrity: sha512-NnRp/noSWuXW0dKhZK5D0YLrDi0nmZ18UeEgwXQq7Ul5TTP93lcNnKjrHtd68j2xFB/l59yPGFlCryL692bnrA==} - dependencies: - vue-demi: 0.12.1_vue@3.2.39 - transitivePeerDependencies: - - '@vue/composition-api' - - vue - dev: false - /abab/2.0.6: resolution: {integrity: sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==} dev: true diff --git a/src/build/library-external.ts b/src/build/library-external.ts new file mode 100644 index 00000000..e702d638 --- /dev/null +++ b/src/build/library-external.ts @@ -0,0 +1,98 @@ +import { viteExternalsPlugin as ViteExternals } from "vite-plugin-externals"; +import { + viteStaticCopy as ViteStaticCopy, + type Target, +} from "vite-plugin-static-copy"; +import { createHtmlPlugin as VitePluginHtml } from "vite-plugin-html"; +import randomstring from "randomstring"; + +/** + * It copies the external libraries to the `assets` folder, and injects the script tags into the HTML + * + * @param {boolean} isProduction - boolean + * @param {string} baseUrl - The base url of the application. + * @returns An array of plugins + */ +export const setupLibraryExternal = ( + isProduction: boolean, + baseUrl: string +) => { + const staticSuffix = randomstring.generate({ + length: 8, + charset: "hex", + }); + + const staticTargets: Target[] = [ + { + src: `./node_modules/vue/dist/vue.global${ + isProduction ? ".prod" : "" + }.js`, + dest: "assets/vue", + rename: `vue.global.${staticSuffix}.js`, + }, + { + src: `./node_modules/vue-router/dist/vue-router.global${ + isProduction ? ".prod" : "" + }.js`, + dest: "assets/vue-router", + rename: `vue-router.global.${staticSuffix}.js`, + }, + { + src: "./node_modules/@vueuse/shared/index.iife.min.js", + dest: "assets/vueuse", + rename: `vueuse.shared.iife.${staticSuffix}.js`, + }, + { + src: "./node_modules/@vueuse/core/index.iife.min.js", + dest: "assets/vueuse", + rename: `vueuse.core.iife.${staticSuffix}.js`, + }, + { + src: "./node_modules/@vueuse/components/index.iife.min.js", + dest: "assets/vueuse", + rename: `vueuse.components.iife.${staticSuffix}.js`, + }, + { + src: "./node_modules/@vueuse/router/index.iife.min.js", + dest: "assets/vueuse", + rename: `vueuse.router.iife.${staticSuffix}.js`, + }, + { + src: "./node_modules/@halo-dev/components/dist/halo-components.iife.js", + dest: "assets/components", + rename: `halo-components.iife.${staticSuffix}.js`, + }, + { + src: "./node_modules/@halo-dev/admin-shared/dist/halo-admin-shared.iife.js", + dest: "assets/admin-shared", + rename: `halo-admin-shared.iife.${staticSuffix}.js`, + }, + ]; + + return [ + ViteExternals({ + vue: "Vue", + "vue-router": "VueRouter", + "@halo-dev/shared": "HaloAdminShared", + "@halo-dev/components": "HaloComponents", + "@vueuse/core": "VueUse", + "@vueuse/components": "VueUse", + "@vueuse/router": "VueUse", + }), + ViteStaticCopy({ + targets: staticTargets, + }), + VitePluginHtml({ + minify: false, + inject: { + data: { + injectScript: staticTargets + .map((target) => { + return ``; + }) + .join("\n"), + }, + }, + }), + ]; +}; diff --git a/tsconfig.vite-config.json b/tsconfig.vite-config.json index d20d8726..35e13c21 100644 --- a/tsconfig.vite-config.json +++ b/tsconfig.vite-config.json @@ -1,6 +1,6 @@ { "extends": "@vue/tsconfig/tsconfig.node.json", - "include": ["vite.config.*"], + "include": ["vite.config.*","./src/build/*.ts"], "compilerOptions": { "composite": true, "types": ["node", "vitest"] diff --git a/vite.config.ts b/vite.config.ts index 15f728a0..fabd4f56 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -5,21 +5,13 @@ import VueJsx from "@vitejs/plugin-vue-jsx"; import VueSetupExtend from "vite-plugin-vue-setup-extend"; import Compression from "vite-compression-plugin"; import { VitePWA } from "vite-plugin-pwa"; -import { viteExternalsPlugin as ViteExternals } from "vite-plugin-externals"; -import { viteStaticCopy as ViteStaticCopy } from "vite-plugin-static-copy"; -import { createHtmlPlugin as VitePluginHtml } from "vite-plugin-html"; import Icons from "unplugin-icons/vite"; -import randomstring from "randomstring"; +import { setupLibraryExternal } from "./src/build/library-external"; export default ({ mode }: { mode: string }) => { const env = loadEnv(mode, process.cwd(), ""); const isProduction = mode === "production"; - const staticSuffix = randomstring.generate({ - length: 8, - charset: "hex", - }); - return defineConfig({ base: env.VITE_BASE_URL, plugins: [ @@ -28,53 +20,6 @@ export default ({ mode }: { mode: string }) => { VueSetupExtend(), Compression(), Icons({ compiler: "vue3" }), - ViteExternals({ - vue: "Vue", - "vue-router": "VueRouter", - "@halo-dev/shared": "HaloAdminShared", - "@halo-dev/components": "HaloComponents", - }), - ViteStaticCopy({ - targets: [ - { - src: `./node_modules/vue/dist/vue.global${ - isProduction ? ".prod" : "" - }.js`, - dest: "assets/vue", - rename: `vue.global.${staticSuffix}.js`, - }, - { - src: `./node_modules/vue-router/dist/vue-router.global${ - isProduction ? ".prod" : "" - }.js`, - dest: "assets/vue-router", - rename: `vue-router.global.${staticSuffix}.js`, - }, - { - src: "./node_modules/@halo-dev/admin-shared/dist/halo-admin-shared.iife.js", - dest: "assets/admin-shared", - rename: `halo-admin-shared.iife.${staticSuffix}.js`, - }, - { - src: "./node_modules/@halo-dev/components/dist/halo-components.iife.js", - dest: "assets/components", - rename: `halo-components.iife.${staticSuffix}.js`, - }, - ], - }), - VitePluginHtml({ - minify: false, - inject: { - data: { - injectScript: [ - ``, - ``, - ``, - ``, - ].join("\n"), - }, - }, - }), VitePWA({ manifest: { name: "Halo", @@ -84,6 +29,7 @@ export default ({ mode }: { mode: string }) => { }, disable: true, }), + ...setupLibraryExternal(isProduction, env.VITE_BASE_URL), ], resolve: { alias: {