chore: global loading of base dependencies

2022-06-20 15:08:17 +08:00 · 2022-06-20 15:08:17 +08:00 · 690802c52a
parent d8c14531e0
commit 690802c52a
5 changed files with 165 additions and 78 deletions
--- a/index.html
+++ b/index.html
@ -1,54 +1,58 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta content="IE=edge" http-equiv="X-UA-Compatible" />
-    <meta content="webkit" name="renderer" />
-    <meta
-      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
-      name="viewport"
-    />
-    <meta content="noindex,nofollow" name="robots" />
-    <title>Halo</title>
-    <link href="/favicon.ico" rel="icon" />
-    <style>
-      body {
-        height: 100%;
-        background-color: #f5f5f5;
-      }
+<head>
+  <meta charset="UTF-8"/>
+  <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
+  <meta content="webkit" name="renderer"/>
+  <meta
+    content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
+    name="viewport"
+  />
+  <meta content="noindex,nofollow" name="robots"/>
+  <title>Halo</title>
+  <link href="/favicon.ico" rel="icon"/>
+  <script src="./assets/vue/vue.global.js"></script>
+  <script src="./assets/vue-router/vue-router.global.js"></script>
+  <script src="./assets/admin-shared/halo-admin-shared.iife.js"></script>
+  <script src="./assets/components/halo-components.iife.js"></script>
+  <style>
+    body {
+      height: 100%;
+      background-color: #f5f5f5;
+    }

-      #loader {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        margin: auto;
-        border: solid 3px #e5e5e5;
-        border-top-color: #333;
-        border-radius: 50%;
-        width: 30px;
-        height: 30px;
-        animation: spin 0.6s linear infinite;
-      }
+    #loader {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      margin: auto;
+      border: solid 3px #e5e5e5;
+      border-top-color: #333;
+      border-radius: 50%;
+      width: 30px;
+      height: 30px;
+      animation: spin 0.6s linear infinite;
+    }

-      @keyframes spin {
-        to {
-          transform: rotate(360deg);
-        }
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
      }
-    </style>
-  </head>
-  <body class="themeable-default">
-    <noscript>
-      <strong>
-        We're sorry but halo admin client doesn't work properly without
-        JavaScript enabled. Please enable it to continue.
-      </strong>
-    </noscript>
-    <div id="app">
-      <div id="loader"></div>
-    </div>
-    <script src="/src/main.ts" type="module"></script>
-  </body>
+    }
+  </style>
+</head>
+<body class="themeable-default">
+<noscript>
+  <strong>
+    We're sorry but halo admin client doesn't work properly without
+    JavaScript enabled. Please enable it to continue.
+  </strong>
+</noscript>
+<div id="app">
+  <div id="loader"></div>
+</div>
+<script src="/src/main.ts" type="module"></script>
+</body>
 </html>
--- a/package.json
+++ b/package.json
@ -72,7 +72,9 @@
    "typescript": "~4.7.3",
    "vite": "^2.9.12",
    "vite-compression-plugin": "^0.0.4",
+    "vite-plugin-externals": "^0.5.0",
    "vite-plugin-pwa": "^0.12.0",
+    "vite-plugin-static-copy": "^0.5.1",
    "vite-plugin-vue-setup-extend": "^0.4.0",
    "vitest": "^0.15.1",
    "vue-tsc": "^0.34.17"
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -44,7 +44,9 @@ importers:
      typescript: ~4.7.3
      vite: ^2.9.12
      vite-compression-plugin: ^0.0.4
+      vite-plugin-externals: ^0.5.0
      vite-plugin-pwa: ^0.12.0
+      vite-plugin-static-copy: ^0.5.1
      vite-plugin-vue-setup-extend: ^0.4.0
      vitest: ^0.15.1
      vue: ^3.2.37
@ -100,7 +102,9 @@ importers:
      typescript: 4.7.3
      vite: 2.9.12_sass@1.52.3
      vite-compression-plugin: 0.0.4
+      vite-plugin-externals: 0.5.0_vite@2.9.12
      vite-plugin-pwa: 0.12.0_vite@2.9.12
+      vite-plugin-static-copy: 0.5.1_vite@2.9.12
      vite-plugin-vue-setup-extend: 0.4.0_vite@2.9.12
      vitest: 0.15.1_fiumxgyk2tfafw3c4rsaverrnm
      vue-tsc: 0.34.17_typescript@4.7.3
@ -3529,6 +3533,10 @@ packages:
      unbox-primitive: 1.0.2
    dev: true

+  /es-module-lexer/0.4.1:
+    resolution: {integrity: sha512-ooYciCUtfw6/d2w56UVeqHPcoCFAiJdz5XOkYpv/Txl1HMUozpXjz/2RIQgqwKdXNDPSF1W7mJCFse3G+HDyAA==}
+    dev: true
+
  /es-to-primitive/1.2.1:
    resolution: {integrity: sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==}
    engines: {node: '>= 0.4'}
@ -4219,6 +4227,15 @@ packages:
      universalify: 2.0.0
    dev: true

+  /fs-extra/10.1.0:
+    resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      graceful-fs: 4.2.9
+      jsonfile: 6.1.0
+      universalify: 2.0.0
+    dev: true
+
  /fs-extra/7.0.1:
    resolution: {integrity: sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==}
    engines: {node: '>=6 <7 || >=8'}
@ -6770,6 +6787,18 @@ packages:
      - supports-color
    dev: true

+  /vite-plugin-externals/0.5.0_vite@2.9.12:
+    resolution: {integrity: sha512-y7SPpHGLSk5ELCbK0SBRJrEr2OuPFxCOKIVkrFECukp9w8hZwh3teCHo2U2UmJ8UHKUP7BoOhTw2DFRbq3GJfQ==}
+    peerDependencies:
+      vite: ^2.0.0
+    dependencies:
+      acorn: 8.7.1
+      es-module-lexer: 0.4.1
+      fs-extra: 10.0.1
+      magic-string: 0.25.9
+      vite: 2.9.12_sass@1.52.3
+    dev: true
+
  /vite-plugin-pwa/0.12.0_vite@2.9.12:
    resolution: {integrity: sha512-KYD+cnS5ExLF3T28NkfzBLZ53ehHlp+qMhHGFNh0zlVGpFHrJkL2v9wd4AMi7ZkBTffgeNatIFiv8rhCsMSxBQ==}
    peerDependencies:
@ -6787,6 +6816,19 @@ packages:
      - supports-color
    dev: true

+  /vite-plugin-static-copy/0.5.1_vite@2.9.12:
+    resolution: {integrity: sha512-jRB+TzYUc93lSCRb0xKCJNAjaYb1LwHoLVPsz7cqFN2kDybwLsDpayUzPiNSn1Nb8lX5aoZ5Az/gV9zQu3t8dg==}
+    engines: {node: '>=12.2'}
+    peerDependencies:
+      vite: ^2.6.14
+    dependencies:
+      chokidar: 3.5.3
+      fast-glob: 3.2.11
+      fs-extra: 10.1.0
+      picocolors: 1.0.0
+      vite: 2.9.12_sass@1.52.3
+    dev: true
+
  /vite-plugin-vue-setup-extend/0.4.0_vite@2.9.12:
    resolution: {integrity: sha512-WMbjPCui75fboFoUTHhdbXzu4Y/bJMv5N9QT9a7do3wNMNHHqrk+Tn2jrSJU0LS5fGl/EG+FEDBYVUeWIkDqXQ==}
    peerDependencies:
--- a/src/main.ts
+++ b/src/main.ts
@ -58,16 +58,18 @@ function loadCoreModules() {
  coreModules.forEach(registerModule);
 }

-function loadPluginModules() {
+async function loadPluginModules() {
  // TODO: load plugin modules
 }

-initApp();
+(async function () {
+  await initApp();
+})();

 async function initApp() {
  try {
    loadCoreModules();
-    loadPluginModules();
+    await loadPluginModules();
  } catch (e) {
    console.error(e);
  }
--- a/vite.config.ts
+++ b/vite.config.ts
@ -1,38 +1,75 @@
 import { fileURLToPath, URL } from "url";
-
 import { defineConfig } from "vite";
 import Vue from "@vitejs/plugin-vue";
 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";

-export default defineConfig({
-  plugins: [
-    Vue(),
-    VueJsx(),
-    VueSetupExtend(),
-    Compression(),
-    VitePWA({
-      manifest: {
-        name: "Halo",
-        short_name: "Halo",
-        description: "Web Client For Halo",
-        theme_color: "#fff",
+export default ({ mode }: { mode: string }) => {
+  const isProduction = mode === "production";
+
+  return defineConfig({
+    plugins: [
+      Vue(),
+      VueJsx(),
+      VueSetupExtend(),
+      Compression(),
+      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.js",
+          },
+          {
+            src: `./node_modules/vue-router/dist/vue-router.global${
+              isProduction ? ".prod" : ""
+            }.js`,
+            dest: "assets/vue-router",
+            rename: "vue-router.global.js",
+          },
+          {
+            src: "./node_modules/@halo-dev/admin-shared/dist/halo-admin-shared.iife.js",
+            dest: "assets/admin-shared",
+          },
+          {
+            src: "./node_modules/@halo-dev/components/dist/halo-components.iife.js",
+            dest: "assets/components",
+          },
+        ],
+      }),
+      VitePWA({
+        manifest: {
+          name: "Halo",
+          short_name: "Halo",
+          description: "Web Client For Halo",
+          theme_color: "#fff",
+        },
+      }),
+    ],
+    resolve: {
+      alias: {
+        "@": fileURLToPath(new URL("./src", import.meta.url)),
      },
-    }),
-  ],
-  resolve: {
-    alias: {
-      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
-  },
-  build: {
-    chunkSizeWarningLimit: 2048,
-  },
-  test: {
-    transformMode: {
-      web: [/\.[jt]sx$/],
+    build: {
+      chunkSizeWarningLimit: 2048,
    },
-  },
-});
+    test: {
+      transformMode: {
+        web: [/\.[jt]sx$/],
+      },
+    },
+  });
+};