From 66f5d6d4230243823d70fc70580e7a5631dc74ed Mon Sep 17 00:00:00 2001 From: xiaoxian521 <1923740402@qq.com> Date: Mon, 4 Nov 2024 12:54:20 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BD=BF=E7=94=A8`code-inspector-p?= =?UTF-8?q?lugin`=E6=9B=BF=E6=8D=A2`vite-plugin-vue-inspector`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- build/plugins.ts | 14 ++++- package.json | 2 +- pnpm-lock.yaml | 156 +++++++++++++++++++++++++++++++---------------- 3 files changed, 114 insertions(+), 58 deletions(-) diff --git a/build/plugins.ts b/build/plugins.ts index ede613e4d..c705d004d 100644 --- 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 diff --git a/package.json b/package.json index a8804530b..48469d8da 100644 --- 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" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 793ce3350..a4b7306ff 100644 --- 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: