chore: vite-plugin-webfont-dl

2024-08-29 11:43:32 +08:00
parent 50bed5e1fe
commit 1fa39b6391
4 changed files with 69 additions and 2 deletions
--- a/package.json
+++ b/package.json
@ -34,6 +34,7 @@
    "ts-enum-util": "^4.1.0",
    "utils4u": "^2.3.0",
    "vant": "^4.9.4",
+    "vite-plugin-webfont-dl": "^3.9.5",
    "vue": "^3.4.38",
    "vue-page-stack": "^3.2.0",
    "vue-router": "^4.4.3"
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -67,6 +67,9 @@ importers:
      vant:
        specifier: ^4.9.4
        version: 4.9.4(vue@3.4.38(typescript@5.5.4))
+      vite-plugin-webfont-dl:
+        specifier: ^3.9.5
+        version: 3.9.5(vite@5.4.2(@types/node@22.5.0)(less@4.2.0))
      vue:
        specifier: ^3.4.38
        version: 3.4.38(typescript@5.5.4)
@ -1547,6 +1550,10 @@ packages:
    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==, tarball: https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz}
    engines: {node: '>= 8.10.0'}

+  clean-css@5.3.3:
+    resolution: {integrity: sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==, tarball: https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz}
+    engines: {node: '>= 10.0'}
+
  cli-cursor@5.0.0:
    resolution: {integrity: sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==, tarball: https://registry.npmjs.org/cli-cursor/-/cli-cursor-5.0.0.tgz}
    engines: {node: '>=18'}
@ -1888,6 +1895,10 @@ packages:
    resolution: {integrity: sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==, tarball: https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz}
    engines: {node: ^10.12.0 || >=12.0.0}

+  flat-cache@5.0.0:
+    resolution: {integrity: sha512-JrqFmyUl2PnPi1OvLyTVHnQvwQ0S+e6lGSwu8OkAZlSaNIZciTY2H/cOOROxsBA1m/LZNHDsqAgDZt6akWcjsQ==, tarball: https://registry.npmjs.org/flat-cache/-/flat-cache-5.0.0.tgz}
+    engines: {node: '>=18'}
+
  flatted@3.3.1:
    resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==, tarball: https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz}

@ -3099,6 +3110,11 @@ packages:
    peerDependencies:
      vite: ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0

+  vite-plugin-webfont-dl@3.9.5:
+    resolution: {integrity: sha512-PSVM7s1XurzMPYXgUHBpZOJYsuzRNq3DGIABdUyq/mNFan1n434+NbmGTK9f9+dIDVHpitXFiE3CmbAdDyDQMg==, tarball: https://registry.npmjs.org/vite-plugin-webfont-dl/-/vite-plugin-webfont-dl-3.9.5.tgz}
+    peerDependencies:
+      vite: ^2 || ^3 || ^4 || ^5
+
  vite@5.4.2:
    resolution: {integrity: sha512-dDrQTRHp5C1fTFzcSaMxjk6vdpKvT+2/mIdE07Gw2ykehT49O0z/VHS3zZ8iV/Gh8BJJKHWOe5RjaNrW5xf/GA==, tarball: https://registry.npmjs.org/vite/-/vite-5.4.2.tgz}
    engines: {node: ^18.0.0 || >=20.0.0}
@ -4851,6 +4867,10 @@ snapshots:
    optionalDependencies:
      fsevents: 2.3.3

+  clean-css@5.3.3:
+    dependencies:
+      source-map: 0.6.1
+
  cli-cursor@5.0.0:
    dependencies:
      restore-cursor: 5.1.0
@ -5230,6 +5250,11 @@ snapshots:
      keyv: 4.5.4
      rimraf: 3.0.2

+  flat-cache@5.0.0:
+    dependencies:
+      flatted: 3.3.1
+      keyv: 4.5.4
+
  flatted@3.3.1: {}

  follow-redirects@1.15.6: {}
@ -6029,8 +6054,7 @@ snapshots:

  source-map-js@1.2.0: {}

-  source-map@0.6.1:
-    optional: true
+  source-map@0.6.1: {}

  sourcemap-codec@1.4.8: {}

@ -6519,6 +6543,16 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

+  vite-plugin-webfont-dl@3.9.5(vite@5.4.2(@types/node@22.5.0)(less@4.2.0)):
+    dependencies:
+      axios: 1.7.5
+      clean-css: 5.3.3
+      flat-cache: 5.0.0
+      picocolors: 1.0.1
+      vite: 5.4.2(@types/node@22.5.0)(less@4.2.0)
+    transitivePeerDependencies:
+      - debug
+
  vite@5.4.2(@types/node@22.5.0)(less@4.2.0):
    dependencies:
      esbuild: 0.21.5
--- a/src/pages/index-page.vue
+++ b/src/pages/index-page.vue
@ -47,4 +47,26 @@ const FComponent: FunctionalComponent<{ prop: string }> = (props, context) => (
    <DefineRender />
  </div>
  <Icons />
+
+  <div :class="$style.hero" mt-8>
+    <h1><i>🔌</i> Vite Plugin Webfont DL <i>⚡</i></h1>
+    <h2>Fonts are downloaded directly from Google Fonts</h2>
+    <p>{{ JSON.stringify({ $style }) }}</p>
+  </div>
 </template>
+
+<style module>
+h1 {
+  font-family: 'Press Start 2P', cursive;
+  color: #646cff;
+}
+
+h2 {
+  font-family: 'Fira Code', monospace;
+  background-color: #42b983;
+}
+
+.hero {
+  border: 1px solid #42b983;
+}
+</style>
--- a/vite.config.ts
+++ b/vite.config.ts
@ -18,6 +18,7 @@ import { createSplitChunkOutput } from 'utils4u/rollup';
 import { defineConfig, loadEnv, PluginOption } from 'vite';
 import cdnImport from 'vite-plugin-cdn-import';
 import vueDevTools from 'vite-plugin-vue-devtools';
+import { ViteWebfontDownload } from 'vite-plugin-webfont-dl';

 // https://vitejs.dev/config/
 export default defineConfig(({ mode, command }) => {
@ -109,6 +110,15 @@ function Plugins() {

  plugins.push([vueDevTools()]);

+  plugins.push(
+    // https://github.com/feat-agency/vite-plugin-webfont-dl?tab=readme-ov-file#-usage-simple-config-method-b-
+    ViteWebfontDownload([
+      'https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap',
+      'https://fonts.googleapis.com/css2?family=Fira+Code&display=swap',
+      'https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,900',
+    ]),
+  );
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const unused = () => {
    plugins.push(
      // https://github.com/unplugin/unplugin-vue-components/issues/664$0