Open LuoRiWuSheng opened 1 year ago
vite@4.4.9 element-plus@^2.3.12 path-browserify@^1.0.1
vite 移除了node的垫片包, 所以 , 所以,在使用 path-browserify 一定会报错, process is not defined
process is not defined
源码中, 作者没有去处理这个问题,那么, 我们将源码中的 resolve方法 copy到项目中即可
说白了 你就是要解决 path.resolve(‘/a’, 'b') --> /a/b 这个问题
复制 normalizeStringPosix方法 和 resolve 方法 到你项目的utils 里面,作为一个工具包
normalizeStringPosix
resolve
function normalizeStringPosix(path, allowAboveRoot) { var res = ''; var lastSegmentLength = 0; var lastSlash = -1; var dots = 0; var code; for (var i = 0; i <= path.length; ++i) { if (i < path.length) code = path.charCodeAt(i); else if (code === 47 /*/*/) break; else code = 47 /*/*/; if (code === 47 /*/*/) { if (lastSlash === i - 1 || dots === 1) { // NOOP } else if (lastSlash !== i - 1 && dots === 2) { if (res.length < 2 || lastSegmentLength !== 2 || res.charCodeAt(res.length - 1) !== 46 /*.*/ || res.charCodeAt(res.length - 2) !== 46 /*.*/) { if (res.length > 2) { var lastSlashIndex = res.lastIndexOf('/'); if (lastSlashIndex !== res.length - 1) { if (lastSlashIndex === -1) { res = ''; lastSegmentLength = 0; } else { res = res.slice(0, lastSlashIndex); lastSegmentLength = res.length - 1 - res.lastIndexOf('/'); } lastSlash = i; dots = 0; continue; } } else if (res.length === 2 || res.length === 1) { res = ''; lastSegmentLength = 0; lastSlash = i; dots = 0; continue; } } if (allowAboveRoot) { if (res.length > 0) res += '/..'; else res = '..'; lastSegmentLength = 2; } } else { if (res.length > 0) res += '/' + path.slice(lastSlash + 1, i); else res = path.slice(lastSlash + 1, i); lastSegmentLength = i - lastSlash - 1; } lastSlash = i; dots = 0; } else if (code === 46 /*.*/ && dots !== -1) { ++dots; } else { dots = -1; } } return res; } /** * link 代码来源 path-browserify@1.0.1 包 * @returns */ export function resolve() { var resolvedPath = ''; var resolvedAbsolute = false; var cwd; for (var i = arguments.length - 1; i >= -1 && !resolvedAbsolute; i--) { var path; if (i >= 0) path = arguments[i]; else { if (cwd === undefined) // cwd = process.cwd(); path = ''; } // Skip empty entries if (path.length === 0) { continue; } resolvedPath = path + '/' + resolvedPath; resolvedAbsolute = path.charCodeAt(0) === 47 /*/*/; } // At this point the path should be resolved to a full absolute path, but // handle relative paths to be safe (might happen when process.cwd() fails) // Normalize the path resolvedPath = normalizeStringPosix(resolvedPath, !resolvedAbsolute); if (resolvedAbsolute) { if (resolvedPath.length > 0) return '/' + resolvedPath; else return '/'; } else if (resolvedPath.length > 0) { return resolvedPath; } else { return '.'; } }
第二步: 注释有关 process相关的,其实就一行, 然后将 path = ''
path = ''
<script setup name="SidebarItem"> import { isExternal, resolve} from '@/utils/index.js' const resolvePath = routePath => { if (isExternal(routePath)) { return routePath } if (isExternal(props.basePath)) { return props.basePath } const fullPath = resolve(props.basePath, routePath) console.log(fullPath); return fullPath } </script>
我看有评论说 , 在vite.config.js 给全局注入一个process空对象,其实这里会执行 process.cwd() , 空对象.cwd() 执行方法也会报错,除非提供完整的, 这个其实麻烦了一些。 可能还有直接引入 Node的 pollyfill 包, 也不是很好
vite.config.js
process
process.cwd()
空对象.cwd()
使用demo
console.log(`示例:resolve('/a', 'b'), 结果:`,resolve('/a', 'b')); console.log(`示例:resolve('/a', 'b', 'c') 结果:`,resolve('/a', 'b', 'c')); console.log(`示例:resolve('/a', '/b') 结果:`, resolve('/a', '/b')); console.log(`示例:resolve('a', 'b') 结果:`,resolve('a', 'b'));
输出:
示例:resolve('/a', 'b'), 结果: /a/b 示例:resolve('/a', 'b', 'c') 结果: /a/b/c 示例:resolve('/a', '/b') 结果: /b 示例:resolve('a', 'b') 结果: a/b
解决问题不易: 如果可以, 掘金给我一个小小的 star 掘金地址 ,谢谢
resolve这个函数定义的时候没有参数啊
resolve是无法固定参数的, 所以使用的 arguments 动态参数, 这个你去看看相关介绍
arguments
resolve('c1', 'c2') --> arguments 拿到了
resolve('c1', 'c2', 'c3') --> arguments 也拿到了
基础环境
vite 移除了node的垫片包, 所以 , 所以,在使用 path-browserify 一定会报错,
process is not defined
解决办法
源码中, 作者没有去处理这个问题,那么, 我们将源码中的 resolve方法 copy到项目中即可
说白了 你就是要解决 path.resolve(‘/a’, 'b') --> /a/b 这个问题
第一步
复制
normalizeStringPosix
方法 和resolve
方法 到你项目的utils 里面,作为一个工具包第二步: 注释有关 process相关的,其实就一行, 然后将
path = ''
使用
我看有评论说 , 在
vite.config.js
给全局注入一个process
空对象,其实这里会执行process.cwd()
,空对象.cwd()
执行方法也会报错,除非提供完整的, 这个其实麻烦了一些。 可能还有直接引入 Node的 pollyfill 包, 也不是很好使用demo
输出:
解决问题不易: 如果可以, 掘金给我一个小小的 star 掘金地址 ,谢谢