refactor: external static libraries

Signed-off-by: Ryan Wang <i@ryanc.cc>
2 years ago · 33c9399d0e
parent 3a5db4178a
commit 33c9399d0e
5 changed files with 110 additions and 72 deletions
--- 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",
--- 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
--- a/src/build/library-external.ts
+++ 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 `<script src="${baseUrl}${target.dest}/${target.rename}"></script>`;
+            })
+            .join("\n"),
+        },
+      },
+    }),
+  ];
+};
--- 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"]
--- 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: [
-              `<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: {