npx create-react-app执行失败 报GTK dll缺失、canvas编译及资源锁错误

核心错误分为两类：node-canvas包编译依赖缺失、安装失败后清理目录时文件被占用锁定

第一步：处理文件锁定问题 #

• 关闭所有可能占用目标目录的程序：包括打开该路径的资源管理器窗口、VSCode等代码编辑器、暂时关闭杀毒软件实时扫描功能
• 打开任务管理器，结束所有node.exe进程
• 手动删除之前创建失败的C:\Users\ASUS\Desktop\desk\react1\my-app整个目录

第二步：解决node-canvas编译失败问题 #

默认官方create-react-app模板不会依赖node-canvas包，优先使用最新版官方标准模板创建即可规避该问题：

• 清理npm缓存：

npm cache clean --force

• 切换国内npm源提升安装速度同时避免源依赖异常：

npm config set registry https://registry.npmmirror.com/

• 执行官方标准创建命令：

npx create-react-app@latest my-app

如果你的项目确实需要依赖node-canvas包，需要先安装Windows下的编译前置依赖：

1. 下载GTK2运行时包，解压到C:\GTK目录，确保日志中提示的所有dll文件都存在于C:\GTK\bin路径下
2. 管理员权限打开PowerShell，执行命令安装编译工具：

npm install -g windows-build-tools

3. 将C:\GTK\bin路径添加到系统PATH环境变量中，重启命令行工具生效

第三步：其他兼容性排查 #

• 建议将Node.js版本升级到18.x LTS版本，当前使用的Node.js 16.6.1版本较旧，和新版react-scripts兼容性较差
• 创建项目时不要使用管理员权限运行命令行，普通权限即可避免权限异常

内容的提问来源于stack exchange，提问作者林文浩