refactor: external static libraries

Signed-off-by: Ryan Wang <i@ryanc.cc>

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",

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:
+  /@vueuse/router/8.9.4_u55wpvgoaskkfdnhr4v2vlugdi:
-    resolution: {integrity: sha512-N80vwh6EGFJiUIyCbfGhEDHzolNvTEPzJBLTuwy7pJU91VjNotMsSvUhwEI8l/cBpdBaIL9dUxRqXDBVrQBahA==}
+    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

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 `<script src="${baseUrl}${target.dest}/${target.rename}"></script>`;
+            })
+            .join("\n"),
+        },
+      },
+    }),
+  ];
+};

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"]

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: [
-              `<script src="${env.VITE_BASE_URL}assets/vue/vue.global.${staticSuffix}.js"></script>`,
-              `<script src="${env.VITE_BASE_URL}assets/vue-router/vue-router.global.${staticSuffix}.js"></script>`,
-              `<script src="${env.VITE_BASE_URL}assets/components/halo-components.iife.${staticSuffix}.js"></script>`,
-              `<script src="${env.VITE_BASE_URL}assets/admin-shared/halo-admin-shared.iife.${staticSuffix}.js"></script>`,
-            ].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: {