refactor(build): 移除依赖补丁脚本并优化构建配置

- 删除 scripts/patch-deps.js 文件及其相关依赖处理逻辑
- 移除 src/patches 目录下的所有补丁文件
- 更新 vite/plugins/index.js 中的插件引用方式
- 从 package.json 中移除 postinstall 脚本
- 从 vite.config.js 中移除 xe-utils 别名配置
- 保留 element-plus 表单工具补丁以抑制 NaN 警告
- 简化构建流程减少不必要的依赖修改操作
This commit is contained in:
2026-06-03 15:12:20 +08:00
parent e83175e334
commit 39593f1aaf
8 changed files with 4 additions and 303 deletions

View File

@@ -20,8 +20,7 @@
"lint": "eslint . --ext .js,.vue src/",
"test:e2e": "playwright test",
"test:e2e:ui": "playwright test --ui",
"test:e2e:report": "playwright show-report",
"postinstall": "node scripts/patch-deps.js"
"test:e2e:report": "playwright show-report"
},
"repository": {
"type": "git",

View File

@@ -1,138 +0,0 @@
/**
* patch-deps.js — 统一修补 node_modules 依赖
*
* 解决 Vue 3 + Vite 项目中依赖兼容性问题。
* 每次 npm install 后由 postinstall 自动执行,也可手动运行:
* node scripts/patch-deps.js
*
* 修补清单:
* 1. xe-utils/hasOwnProp.js — Vue 3 Proxy 兼容
* 2. element-plus form-label-wrap.mjs — NaN 防护 + 生命周期守卫
*
* 特性幂等safe to run multiple times
*/
import fs from 'fs';
import path from 'path';
import { fileURLToPath } from 'url';
const __dirname = path.dirname(fileURLToPath(import.meta.url));
const ROOT = path.resolve(__dirname, '..');
function patchFile(filePath, marker, patcher) {
if (!fs.existsSync(filePath)) {
console.log(`[patch-deps] SKIP (not found): ${path.relative(ROOT, filePath)}`);
return false;
}
const code = fs.readFileSync(filePath, 'utf-8');
if (code.includes(marker)) {
console.log(`[patch-deps] OK (already patched): ${path.relative(ROOT, filePath)}`);
return false;
}
const patched = patcher(code);
if (patched === code) {
console.log(`[patch-deps] SKIP (no change): ${path.relative(ROOT, filePath)}`);
return false;
}
fs.writeFileSync(filePath, patched, 'utf-8');
console.log(`[patch-deps] PATCHED: ${path.relative(ROOT, filePath)}`);
return true;
}
// ──────────────────────────────────────────────
// 1. xe-utils/hasOwnProp.js — Vue 3 Proxy 兼容
// ──────────────────────────────────────────────
// 根因Object.prototype.hasOwnProperty.call(proxyObj, key) 在 Vue 3 reactive
// Proxy 上会触发 reactivity 拦截,抛出 "obj.hasOwnProperty is not a function"。
// 修复try-catch + key-in fallback。
// ──────────────────────────────────────────────
patchFile(
path.join(ROOT, 'node_modules/xe-utils/hasOwnProp.js'),
'[vue3-proxy-safe]',
() => `/**
* Check if object has own property - Vue 3 Proxy safe [vue3-proxy-safe]
*
* Patched by scripts/patch-deps.js — do not edit manually.
* Re-run: node scripts/patch-deps.js
*/
function hasOwnProp (obj, key) {
if (obj == null) return false
try {
return Object.prototype.hasOwnProperty.call(obj, key)
} catch (e) {
try {
return key in Object(obj)
} catch (e2) {
return false
}
}
}
module.exports = hasOwnProp
`
);
// ──────────────────────────────────────────────
// 2. element-plus form-label-wrap.mjs — NaN + 生命周期守卫
// ──────────────────────────────────────────────
// 根因vxe-table 展开行收起时 el-form 组件已卸载,但 nextTick/onUpdated
// 回调仍尝试访问已销毁的 formContext导致 NaN width 和各种 teardown 错误。
// 修复NaN 防护 + _isMounted 生命周期守卫 + try-catch。
// ──────────────────────────────────────────────
patchFile(
path.join(ROOT, 'node_modules/element-plus/es/components/form/src/form-label-wrap.mjs'),
'_isMounted',
(code) => {
let patched = code
// NaN 防护
.replace(
'return Math.ceil(Number.parseFloat(width))',
'return Math.ceil(Number.parseFloat(width)) || 0'
)
// 添加 _isMounted 守卫变量
.replace(
'const updateLabelWidth = (action = "update") => {',
'let _isMounted = true;\n\tconst updateLabelWidth = (action = "update") => {'
)
// nextTick 回调前置守卫
.replace(
'nextTick(() => {',
'nextTick(() => {\n\t\t\t\tif (!_isMounted) return;'
)
// try-catch 包裹核心逻辑
.replace(
'if (slots.default && props.isAutoWidth) {',
'try {\n\t\t\t\tif (slots.default && props.isAutoWidth) {'
)
.replace(
'else if (action === "remove") formContext?.deregisterLabelWidth(computedWidth.value);',
'else if (action === "remove") formContext?.deregisterLabelWidth(computedWidth.value);\n\t\t\t\t}\n\t\t\t} catch (e) { /* teardown race */ }'
)
// onBeforeUnmount 设置守卫
.replace(
'onBeforeUnmount(() => {',
'onBeforeUnmount(() => {\n\t\t\t_isMounted = false;'
)
// onUpdated 守卫
.replace(
'onUpdated(() => updateLabelWidthFn())',
'onUpdated(() => { if (_isMounted) updateLabelWidthFn(); })'
)
// watch 守卫
.replace(
'if (props.updateAll) formContext?.registerLabelWidth(val, oldVal);',
'if (_isMounted && props.updateAll) formContext?.registerLabelWidth(val, oldVal);'
)
// render 函数守卫
.replace(
'return () => {',
'return () => {\n\t\t\tif (!_isMounted) return null;'
);
return patched;
}
);
// ──────────────────────────────────────────────
// 完成
// ──────────────────────────────────────────────
console.log('[patch-deps] Done.');

View File

@@ -1,39 +0,0 @@
import fs from 'fs';
import path from 'path';
// Final patch: guards ALL async paths in form-label-wrap to prevent
// errors during vxe-table expand row teardown
export default function patchElFormNan() {
return {
name: 'patch-el-form-nan',
enforce: 'pre',
buildStart() {
const target = path.resolve(
process.cwd(),
'node_modules/element-plus/es/components/form/src/form-label-wrap.mjs'
);
if (!fs.existsSync(target)) return;
const code = fs.readFileSync(target, 'utf-8');
if (code.includes('_isMounted')) return; // already patched
const patched = code
.replace('return Math.ceil(Number.parseFloat(width))', 'return Math.ceil(Number.parseFloat(width)) || 0')
.replace('const updateLabelWidth = (action = \"update\") => {',
'let _isMounted = true;\n\tconst updateLabelWidth = (action = \"update\") => {')
.replace('nextTick(() => {',
'nextTick(() => {\n\t\t\t\tif (!_isMounted) return;')
.replace('if (slots.default && props.isAutoWidth) {',
'try {\n\t\t\t\tif (slots.default && props.isAutoWidth) {')
.replace('else if (action === \"remove\") formContext?.deregisterLabelWidth(computedWidth.value);',
'else if (action === \"remove\") formContext?.deregisterLabelWidth(computedWidth.value);\n\t\t\t\t}\n\t\t\t} catch (e) { /* teardown race */ }')
.replace('onBeforeUnmount(() => {', 'onBeforeUnmount(() => {\n\t\t\t_isMounted = false;')
.replace('onUpdated(() => updateLabelWidthFn())', 'onUpdated(() => { if (_isMounted) updateLabelWidthFn(); })')
.replace('if (props.updateAll) formContext?.registerLabelWidth(val, oldVal);',
'if (_isMounted && props.updateAll) formContext?.registerLabelWidth(val, oldVal);')
.replace('return () => {', 'return () => {\n\t\t\tif (!_isMounted) return null;');
if (patched !== code) {
fs.writeFileSync(target, patched, 'utf-8');
console.log('[patch-el-form-nan] Patched form-label-wrap.mjs');
}
}
};
}

View File

@@ -1,56 +0,0 @@
import { isArray } from "../../../utils/types.mjs";
import { ensureArray } from "../../../utils/arrays.mjs";
import { computed, ref } from "vue";
// Patched: suppress NaN warnings from Element Plus during vxe-table expand row teardown
const SCOPE = "ElForm";
function useFormLabelWidth() {
const potentialLabelWidthArr = ref([]);
const autoLabelWidth = computed(() => {
if (!potentialLabelWidthArr.value.length) return "0";
const max = Math.max(...potentialLabelWidthArr.value);
return max ? `${max}px` : "";
});
function getLabelWidthIndex(width) {
// Patched: skip NaN values silently (vxe-table expand row teardown)
if (width == null || isNaN(width)) return -1;
const index = potentialLabelWidthArr.value.indexOf(width);
// Patched: removed debugWarn for unexpected width — harmless during teardown
return index;
}
function registerLabelWidth(val, oldVal) {
if (val && oldVal) {
const index = getLabelWidthIndex(oldVal);
if (index > -1) potentialLabelWidthArr.value.splice(index, 1, val);
} else if (val && !isNaN(val)) {
potentialLabelWidthArr.value.push(val);
}
}
function deregisterLabelWidth(val) {
const index = getLabelWidthIndex(val);
if (index > -1) potentialLabelWidthArr.value.splice(index, 1);
}
return {
autoLabelWidth,
registerLabelWidth,
deregisterLabelWidth
};
}
const filterFields = (fields, props) => {
const normalized = ensureArray(props).map((prop) =>
isArray(prop) ? prop.join(".") : prop
);
return normalized.length > 0
? fields.filter(
(field) => field.propString && normalized.includes(field.propString)
)
: fields;
};
export { filterFields, useFormLabelWidth };

View File

@@ -1,10 +0,0 @@
/**
* Patched hasOwnProp - compatible with Vue 3 Proxy objects
* Original: obj.hasOwnProperty(key) fails on Proxy
* Fix: Object.prototype.hasOwnProperty.call(obj, key)
*/
function hasOwnProp(obj, key) {
return obj && Object.prototype.hasOwnProperty.call(obj, key)
}
export default hasOwnProp

View File

@@ -1,50 +0,0 @@
import fs from 'fs';
import path from 'path';
/**
* Patch xe-utils hasOwnProp for Vue 3 Proxy compatibility.
*
* Root cause: Object.prototype.hasOwnProperty.call(proxyObj, key) throws
* "TypeError: obj.hasOwnProperty is not a function"
* when obj is a Vue 3 reactive Proxy, because Vue's reactivity system
* intercepts the [[Get]] trap for 'hasOwnProperty'.
*
* Fix: Use try-catch. If direct call fails, use Reflect.has or key-in check.
*/
export default function patchXeUtilsHasOwnProp() {
return {
name: 'patch-xe-utils-hasownprop',
enforce: 'pre',
buildStart() {
const targets = [
path.resolve(process.cwd(), 'node_modules/xe-utils/hasOwnProp.js'),
];
for (const target of targets) {
if (!fs.existsSync(target)) continue;
const code = fs.readFileSync(target, 'utf-8');
if (code.includes('[vue3-proxy-safe]')) continue;
const patched = `/**
* Check if object has own property - Vue 3 Proxy safe [vue3-proxy-safe]
*/
function hasOwnProp (obj, key) {
if (obj == null) return false
try {
return Object.prototype.hasOwnProperty.call(obj, key)
} catch (e) {
// Vue 3 reactive Proxy throws on hasOwnProperty; fallback
try {
return key in Object(obj)
} catch (e2) {
return false
}
}
}
module.exports = hasOwnProp
`;
fs.writeFileSync(target, patched, 'utf-8');
console.log('[patch-xe-utils-hasownprop] Patched ' + target);
}
}
};
}

View File

@@ -28,9 +28,6 @@ export default defineConfig(({ mode, command }) => {
'~': path.resolve(__dirname, './'),
// 设置别名
'@': path.resolve(__dirname, './src'),
// Patch xe-utils hasOwnProp for Vue 3 Proxy compatibility
'xe-utils/es/hasOwnProp': path.resolve(__dirname, './src/patches/hasOwnProp.js'),
'xe-utils/hasOwnProp': path.resolve(__dirname, './src/patches/hasOwnProp.js'),
// Patch Element Plus form utils to suppress NaN during vxe-table expand teardown
},
// https://cn.vitejs.dev/config/#resolve-extensions

View File

@@ -3,15 +3,13 @@
import createAutoImport from './auto-import'
import createSvgIcon from './svg-icon'
import createCompression from './compression'
import patchElFormNan from '../../src/patches/el-form-nan-plugin'
import patchXeUtilsHasOwnProp from '../../src/patches/xe-utils-hasownprop-plugin'
import patchDepsPlugin from '../../src/patches/patch-deps-plugin'
export default function createVitePlugins(viteEnv, isBuild = false) {
const vitePlugins = [vue()]
vitePlugins.push(createAutoImport())
vitePlugins.push(createSvgIcon(isBuild))
isBuild && vitePlugins.push(...createCompression(viteEnv))
vitePlugins.push(patchElFormNan())
vitePlugins.push(patchXeUtilsHasOwnProp())
isBuild && vitePlugins.push(...createCompression(viteEnv))
vitePlugins.push(patchDepsPlugin())
return vitePlugins
}