refactor: 使用code-inspector-plugin替换vite-plugin-vue-inspector

2024-11-29 17:57:37 +08:00 · 2024-11-04 12:54:20 +08:00 · 2024-11-04 12:54:20 +08:00 · 66f5d6d423
commit 66f5d6d423
parent fd9ad7eb21
3 changed files with 114 additions and 58 deletions
--- a/build/plugins.ts
+++ b/build/plugins.ts
@ -6,13 +6,13 @@ import svgLoader from "vite-svg-loader";
 import type { PluginOption } from "vite";
 import checker from "vite-plugin-checker";
 import vueJsx from "@vitejs/plugin-vue-jsx";
-import Inspector from "vite-plugin-vue-inspector";
 import { configCompressPlugin } from "./compress";
 import removeNoMatch from "vite-plugin-router-warn";
 import { visualizer } from "rollup-plugin-visualizer";
 import removeConsole from "vite-plugin-remove-console";
 import { themePreprocessorPlugin } from "@pureadmin/theme";
 import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite";
+import { codeInspectorPlugin } from "code-inspector-plugin";
 import { genScssMultipleScopeVars } from "../src/layout/theme";
 import { vitePluginFakeServer } from "vite-plugin-fake-server";

@ -38,8 +38,16 @@ export function getPluginsList(
      terminal: false,
      enableBuild: false
    }),
-    // 按下Command(⌘)+Shift(⇧)，然后点击页面元素会自动打开本地IDE并跳转到对应的代码位置
-    Inspector(),
+    /**
+     * 在页面上按住组合键时，鼠标在页面移动即会在 DOM 上出现遮罩层并显示相关信息，点击一下将自动打开 IDE 并将光标定位到元素对应的代码位置
+     * Mac 默认组合键 Option + Shift
+     * Windows 默认组合键 Alt + Shift
+     * 更多用法看 https://inspector.fe-dev.cn/guide/start.html
+     */
+    codeInspectorPlugin({
+      bundler: "vite",
+      hideConsole: true
+    }),
    viteBuildInfo(),
    /**
     * 开发环境下移除非必要的vue-router动态路由警告No match found for location with path
--- a/package.json
+++ b/package.json
@ -133,6 +133,7 @@
    "@vitejs/plugin-vue-jsx": "^4.0.1",
    "autoprefixer": "^10.4.20",
    "boxen": "^8.0.1",
+    "code-inspector-plugin": "^0.17.7",
    "cssnano": "^7.0.6",
    "dagre": "^0.8.5",
    "eslint": "^9.12.0",
@ -166,7 +167,6 @@
    "vite-plugin-fake-server": "^2.1.2",
    "vite-plugin-remove-console": "^2.2.0",
    "vite-plugin-router-warn": "^1.0.0",
-    "vite-plugin-vue-inspector": "^5.2.0",
    "vite-svg-loader": "^5.1.0",
    "vue-eslint-parser": "^9.4.3",
    "vue-tsc": "^2.1.6"
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -261,6 +261,9 @@ importers:
      boxen:
        specifier: ^8.0.1
        version: 8.0.1
+      code-inspector-plugin:
+        specifier: ^0.17.7
+        version: 0.17.7
      cssnano:
        specifier: ^7.0.6
        version: 7.0.6(postcss@8.4.47)
@ -360,9 +363,6 @@ importers:
      vite-plugin-router-warn:
        specifier: ^1.0.0
        version: 1.0.0
-      vite-plugin-vue-inspector:
-        specifier: ^5.2.0
-        version: 5.2.0(vite@5.4.8(@types/node@20.16.11)(sass@1.79.6))
      vite-svg-loader:
        specifier: ^5.1.0
        version: 5.1.0(vue@3.5.12(typescript@5.6.3))
@ -477,12 +477,6 @@ packages:
    engines: {node: '>=6.0.0'}
    hasBin: true

-  '@babel/plugin-proposal-decorators@7.25.7':
-    resolution: {integrity: sha512-q1mqqqH0e1lhmsEQHV5U8OmdueBC2y0RFr2oUzZoFRtN3MvPmt2fsFRcNQAoGLTSNdHBFUYGnlgcRFhkBbKjPw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
  '@babel/plugin-syntax-async-generators@7.8.4':
    resolution: {integrity: sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==}
    peerDependencies:
@ -504,12 +498,6 @@ packages:
    peerDependencies:
      '@babel/core': ^7.0.0-0

-  '@babel/plugin-syntax-decorators@7.25.7':
-    resolution: {integrity: sha512-oXduHo642ZhstLVYTe2z2GSJIruU0c/W3/Ghr6A5yGMsVrvdnxO1z+3pbTcT7f3/Clnt+1z8D/w1r1f1SHaCHw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
  '@babel/plugin-syntax-import-attributes@7.25.7':
    resolution: {integrity: sha512-AqVo+dguCgmpi/3mYBdu9lkngOBlQ2w2vnNpa6gfiCxQZLzV4ZbhsXitJ2Yblkoe1VQwtHSaNmIaGll/26YWRw==}
    engines: {node: '>=6.9.0'}
@ -2003,6 +1991,9 @@ packages:
  async-validator@4.2.5:
    resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==}

+  async@2.6.4:
+    resolution: {integrity: sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==}
+
  asynckit@0.4.0:
    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}

@ -2148,6 +2139,10 @@ packages:
    resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
    engines: {node: '>=4'}

+  chalk@4.1.1:
+    resolution: {integrity: sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==}
+    engines: {node: '>=10'}
+
  chalk@4.1.2:
    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
    engines: {node: '>=10'}
@ -2211,6 +2206,12 @@ packages:
    resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==}
    engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}

+  code-inspector-core@0.17.7:
+    resolution: {integrity: sha512-hqqUB/H52DUIHMr5BEQavedT6DOzrJcNRlIHSLjuy+Z9BPGJrtp5TmTMEU+1WOc68xn2a6ywhutaqsG5kBXdkA==}
+
+  code-inspector-plugin@0.17.7:
+    resolution: {integrity: sha512-c3htX/s4NqOSN69fsQwdC20Anfgp9YvogYhYrGid08f92lta/nSKySyfFjI4jGHy7qkmoG0/IKRj0HdArGORLw==}
+
  codepage@1.15.0:
    resolution: {integrity: sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==}
    engines: {node: '>=0.8'}
@ -2523,6 +2524,14 @@ packages:
  de-indent@1.0.2:
    resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}

+  debug@3.2.7:
+    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
  debug@4.3.7:
    resolution: {integrity: sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==}
    engines: {node: '>=6.0'}
@ -2728,6 +2737,9 @@ packages:
    resolution: {integrity: sha512-U9bFFjX8tFiATgtkJ1zg25+KviIXpgRvRHS8sau3GfhVzThRQrOeksPeT0BWW2MNZs1OEWJ1DPXOQMn0KKRkvg==}
    engines: {node: '>=0.12'}

+  esbuild-code-inspector-plugin@0.17.7:
+    resolution: {integrity: sha512-SQRkb+vMfNJ+40rgxjFx6NGbopZjLbg7npITLfPJcqsf+fumMZV8r9OS2MUxMr5JfvnGlb5Bv040hF/WODS2dw==}
+
  esbuild@0.19.12:
    resolution: {integrity: sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==}
    engines: {node: '>=12'}
@ -3625,9 +3637,6 @@ packages:
  known-css-properties@0.34.0:
    resolution: {integrity: sha512-tBECoUqNFbyAY4RrbqsBQqDFpGXAEbdD5QKr8kACx3+rnArmuuR22nKQWKazvp07N9yjTyDZaw/20UIH8tL9DQ==}

-  kolorist@1.8.0:
-    resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
-
  leven@2.1.0:
    resolution: {integrity: sha512-nvVPLpIHUxCUoRLrFqTgSxXJ614d8AgQoWl7zPe/2VadE8+1dpU3LBhowRuBAcuwruWtOdD8oYC9jDNJjXDPyA==}
    engines: {node: '>=0.10.0'}
@ -3884,6 +3893,10 @@ packages:
  mitt@3.0.1:
    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}

+  mkdirp@0.5.6:
+    resolution: {integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==}
+    hasBin: true
+
  mkdirp@1.0.4:
    resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==}
    engines: {node: '>=10'}
@ -4201,6 +4214,10 @@ packages:
  popmotion@11.0.5:
    resolution: {integrity: sha512-la8gPM1WYeFznb/JqF4GiTkRRPZsfaj2+kCxqQgr2MJylMmIKUwBfWW8Wa5fml/8gmtlD5yI01MP1QCZPWmppA==}

+  portfinder@1.0.32:
+    resolution: {integrity: sha512-on2ZJVVDXRADWE6jnQaX0ioEylzgBpQk8r55NE4wjXW1ZxO+BgDlY6DXwj20i0V8eB4SenDQ00WEaxfiIQPcxg==}
+    engines: {node: '>= 0.12.0'}
+
  postcss-calc@10.0.2:
    resolution: {integrity: sha512-DT/Wwm6fCKgpYVI7ZEWuPJ4az8hiEHtCUeYjZXqU7Ou4QqYh1Df2yCQ7Ca6N7xqKPFkxN3fhf+u9KSoOCJNAjg==}
    engines: {node: ^18.12 || ^20.9 || >=22.0}
@ -5349,6 +5366,9 @@ packages:
    resolution: {integrity: sha512-sr7rKCQTRH4AXy88Nn+HZS4t/XUqpA3nPyoJ36r5ajHiRaNqSANaq1iCazBGLzkLvs617zEOlw5WSV3/FivvFg==}
    hasBin: true

+  vite-code-inspector-plugin@0.17.7:
+    resolution: {integrity: sha512-7ultwFnXZIGgIGYvhfWTzeH3kSFKLpXRyyELjY//nVVrlpUM80j6njH60nzqobeKnmDf59O91JT0WvGlDtAjAQ==}
+
  vite-plugin-cdn-import@1.0.1:
    resolution: {integrity: sha512-lgjLxgwFSKvJLbqjVBirUZ0rQo00GpUGJzRpgQu8RyBw9LA7jaqG6fUMQzBC9qWmTGabPC3iOzwCcoi7PseRAQ==}

@ -5406,11 +5426,6 @@ packages:
  vite-plugin-router-warn@1.0.0:
    resolution: {integrity: sha512-jnr7faHJPkKxukBXVpg7Ui1UDqhmxD7xU6JGidq8ivSHTsNAPqzSpPpwW8O1PBP/0+Owq4bLfNNk11drOkz4xA==}

-  vite-plugin-vue-inspector@5.2.0:
-    resolution: {integrity: sha512-wWxyb9XAtaIvV/Lr7cqB1HIzmHZFVUJsTNm3yAxkS87dgh/Ky4qr2wDEWNxF23fdhVa3jQ8MZREpr4XyiuaRqA==}
-    peerDependencies:
-      vite: ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0
-
  vite-svg-loader@5.1.0:
    resolution: {integrity: sha512-M/wqwtOEjgb956/+m5ZrYT/Iq6Hax0OakWbokj8+9PXOnB7b/4AxESHieEtnNEy7ZpjsjYW1/5nK8fATQMmRxw==}
    peerDependencies:
@ -5599,6 +5614,9 @@ packages:
    resolution: {integrity: sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==}
    engines: {node: '>=10.4'}

+  webpack-code-inspector-plugin@0.17.7:
+    resolution: {integrity: sha512-wmfS1J8b5wN873y0VWCCN7bFn+KcDS0pqAHVWH3m0TzH2BAm0uHoiHbTiSskS1m+CZw7fyuOWbkjVWFyY8QRQA==}
+
  webpack-virtual-modules@0.6.2:
    resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}

@ -5925,15 +5943,6 @@ snapshots:
    dependencies:
      '@babel/types': 7.25.8

-  '@babel/plugin-proposal-decorators@7.25.7(@babel/core@7.25.8)':
-    dependencies:
-      '@babel/core': 7.25.8
-      '@babel/helper-create-class-features-plugin': 7.25.7(@babel/core@7.25.8)
-      '@babel/helper-plugin-utils': 7.25.7
-      '@babel/plugin-syntax-decorators': 7.25.7(@babel/core@7.25.8)
-    transitivePeerDependencies:
-      - supports-color
-
  '@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.25.8)':
    dependencies:
      '@babel/core': 7.25.8
@ -5954,11 +5963,6 @@ snapshots:
      '@babel/core': 7.25.8
      '@babel/helper-plugin-utils': 7.25.7

-  '@babel/plugin-syntax-decorators@7.25.7(@babel/core@7.25.8)':
-    dependencies:
-      '@babel/core': 7.25.8
-      '@babel/helper-plugin-utils': 7.25.7
-
  '@babel/plugin-syntax-import-attributes@7.25.7(@babel/core@7.25.8)':
    dependencies:
      '@babel/core': 7.25.8
@ -7600,6 +7604,10 @@ snapshots:

  async-validator@4.2.5: {}

+  async@2.6.4:
+    dependencies:
+      lodash: 4.17.21
+
  asynckit@0.4.0: {}

  autoprefixer@10.4.20(postcss@8.4.47):
@ -7807,6 +7815,11 @@ snapshots:
      escape-string-regexp: 1.0.5
      supports-color: 5.5.0

+  chalk@4.1.1:
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+
  chalk@4.1.2:
    dependencies:
      ansi-styles: 4.3.0
@ -7877,6 +7890,24 @@ snapshots:

  co@4.6.0: {}

+  code-inspector-core@0.17.7:
+    dependencies:
+      '@vue/compiler-dom': 3.5.12
+      chalk: 4.1.2
+      portfinder: 1.0.32
+    transitivePeerDependencies:
+      - supports-color
+
+  code-inspector-plugin@0.17.7:
+    dependencies:
+      chalk: 4.1.1
+      code-inspector-core: 0.17.7
+      esbuild-code-inspector-plugin: 0.17.7
+      vite-code-inspector-plugin: 0.17.7
+      webpack-code-inspector-plugin: 0.17.7
+    transitivePeerDependencies:
+      - supports-color
+
  codepage@1.15.0: {}

  collect-v8-coverage@1.0.2: {}
@ -8229,6 +8260,10 @@ snapshots:

  de-indent@1.0.2: {}

+  debug@3.2.7:
+    dependencies:
+      ms: 2.1.3
+
  debug@4.3.7:
    dependencies:
      ms: 2.1.3
@ -8437,6 +8472,12 @@ snapshots:
      d: 1.0.2
      ext: 1.7.0

+  esbuild-code-inspector-plugin@0.17.7:
+    dependencies:
+      code-inspector-core: 0.17.7
+    transitivePeerDependencies:
+      - supports-color
+
  esbuild@0.19.12:
    optionalDependencies:
      '@esbuild/aix-ppc64': 0.19.12
@ -9642,8 +9683,6 @@ snapshots:

  known-css-properties@0.34.0: {}

-  kolorist@1.8.0: {}
-
  leven@2.1.0: {}

  leven@3.1.0: {}
@ -9874,6 +9913,10 @@ snapshots:

  mitt@3.0.1: {}

+  mkdirp@0.5.6:
+    dependencies:
+      minimist: 1.2.8
+
  mkdirp@1.0.4:
    optional: true

@ -10190,6 +10233,14 @@ snapshots:
      style-value-types: 5.1.2
      tslib: 2.4.0

+  portfinder@1.0.32:
+    dependencies:
+      async: 2.6.4
+      debug: 3.2.7
+      mkdirp: 0.5.6
+    transitivePeerDependencies:
+      - supports-color
+
  postcss-calc@10.0.2(postcss@8.4.47):
    dependencies:
      postcss: 8.4.47
@ -11372,6 +11423,12 @@ snapshots:
    transitivePeerDependencies:
      - debug

+  vite-code-inspector-plugin@0.17.7:
+    dependencies:
+      code-inspector-core: 0.17.7
+    transitivePeerDependencies:
+      - supports-color
+
  vite-plugin-cdn-import@1.0.1(rollup@4.24.0)(vite@5.4.8(@types/node@20.16.11)(sass@1.79.6)):
    dependencies:
      rollup-plugin-external-globals: 0.10.0(rollup@4.24.0)
@ -11433,21 +11490,6 @@ snapshots:

  vite-plugin-router-warn@1.0.0: {}

-  vite-plugin-vue-inspector@5.2.0(vite@5.4.8(@types/node@20.16.11)(sass@1.79.6)):
-    dependencies:
-      '@babel/core': 7.25.8
-      '@babel/plugin-proposal-decorators': 7.25.7(@babel/core@7.25.8)
-      '@babel/plugin-syntax-import-attributes': 7.25.7(@babel/core@7.25.8)
-      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.25.8)
-      '@babel/plugin-transform-typescript': 7.25.7(@babel/core@7.25.8)
-      '@vue/babel-plugin-jsx': 1.2.5(@babel/core@7.25.8)
-      '@vue/compiler-dom': 3.5.12
-      kolorist: 1.8.0
-      magic-string: 0.30.12
-      vite: 5.4.8(@types/node@20.16.11)(sass@1.79.6)
-    transitivePeerDependencies:
-      - supports-color
-
  vite-svg-loader@5.1.0(vue@3.5.12(typescript@5.6.3)):
    dependencies:
      svgo: 3.3.2
@ -11610,6 +11652,12 @@ snapshots:

  webidl-conversions@6.1.0: {}

+  webpack-code-inspector-plugin@0.17.7:
+    dependencies:
+      code-inspector-core: 0.17.7
+    transitivePeerDependencies:
+      - supports-color
+
  webpack-virtual-modules@0.6.2: {}

  whatwg-encoding@1.0.5: