调用Parcel.js CLI的watch命令时出现URI格式错误

你遇到的这个URI malformed错误，一般是Parcel在解析HTML里的资源路径时，碰到了不符合URL编码规范的内容，或者缓存、版本问题导致的。试试下面这些排查步骤：

错误信息回顾 #

C:\Users\sjsui\Desktop\git_workshop\MoonMachineOpenSource\MoonMachine\MoonMachine2\Front\templates>parcel watch index.html
✘ C:\Users\sjsui\Desktop\git_workshop\MoonMachineOpenSource\MoonMachine\MoonMachine2\Front\templates\index.html: URI malformed
    at decodeURIComponent (<anonymous>)
    at HTMLAsset.addURLDependency (C:\Users\sjsui\AppData\Roaming\npm\node_modules\parcel-bundler\src\Asset.js:93:7)
    at HTMLAsset.processSingleDependency (C:\Users\sjsui\AppData\Roaming\npm\node_modules\parcel-bundler\src\assets\HTMLAsset.js:90:26)
    at ast.walk.node (C:\Users\sjsui\AppData\Roaming\npm\node_modules\parcel-bundler\src\assets\HTMLAsset.js:139:43)
    at traverse (C:\Users\sjsui\AppData\Roaming\npm\node_modules\parcel-bundler\node_modules\posthtml\lib\api.js:105:26)
    at traverse (C:\Users\sjsui\AppData\Roaming\npm\node_modules\parcel-bundler\node_modules\posthtml\lib\api.js:111:5)
    at traverse (C:\Users\sjsui\AppData\Roaming\npm\node_modules\parcel-bundler\node_modules\posthtml\lib\api.js:105:17)
    at traverse (C:\Users\sjsui\AppData\Roaming\npm\node_modules\parcel-bundler\node_modules\posthtml\lib\api.js:111:5)
    at traverse (C:\Users\sjsui\AppData\Roaming\npm\node_modules\parcel-bundler\node_modules\posthtml\lib\api.js:105:17)
    at Array.walk (C:\Users\sjsui\AppData\Roaming\npm\node_modules\parcel-bundler\node_modules\posthtml\lib\api.js:39:10)

解决方法 #

• 检查HTML中的资源路径：逐行查看index.html里所有引用的外部资源（CSS、JS、图片、字体等），有没有包含中文、空格、特殊符号（比如%、&未转义）。举个例子，要是路径是./我的 样式.css，改成./我的样式.css或者用%20替换空格——Parcel对非标准URL编码的路径兼容性很差。
• 清理Parcel缓存：缓存文件损坏经常会引发莫名其妙的错误。找到项目里的.parcel-cache（旧版Parcel 1是.cache）文件夹删掉，再重新运行parcel watch index.html试试。
• 升级到Parcel 2：你用的parcel-bundler是已经停止维护的Parcel 1版本，很多路径解析的bug在Parcel 2里都修复了。先卸载旧版：npm uninstall -g parcel-bundler，再安装新版：npm install -g parcel，之后再执行监听命令。
• 排查内联代码与错误路径：如果HTML里有内联JS/CSS，检查有没有用到decodeURIComponent的错误用法；另外确认所有外部资源的URL是否正确——比如有没有漏写http:///https://，或者相对路径的层级写错了（比如多写了一个../）。
• 简化测试定位问题：先把index.html改成最基础的骨架（比如只保留<html><head></head><body></body></html>），然后逐步加回之前的资源，加到哪个部分出错，就说明那个资源的路径有问题，这样能快速定位根源。

内容的提问来源于stack exchange，提问作者Doublecouponday