用WebStorm 创建第一个React项目

╰半橙微兮° 2024-02-20 11:11 25阅读 0赞

##  ##

使用WebStorm创建React项目，用M2芯片的mac 创建React项目的时候，遇到下面这种报错日志

npm ERR! node-pre-gyp ERR! install response status 404 Not Found on https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-node-v93-darwin-unknown-arm64.tar.gz 
    npm ERR! Package xproto was not found in the pkg-config search path.
    npm ERR! Perhaps you should add the directory containing `xproto.pc'
    npm ERR! to the PKG_CONFIG_PATH environment variable
    npm ERR! Package 'xproto', required by 'x11', not found
    npm ERR! Package xproto was not found in the pkg-config search path.
    npm ERR! Perhaps you should add the directory containing `xproto.pc'
    npm ERR! to the PKG_CONFIG_PATH environment variable
    npm ERR! Package 'xproto', required by 'x11', not found
    npm ERR! In file included from ../src/backend/Backend.cc:1:
    npm ERR! ../src/backend/Backend.h:3:10: fatal error: 'cairo.h' file not found

如图所示：

![image-20231031143743269][]

参考 [Install error · Issue \#1825 · Automattic/node-canvas · GitHub][Install error _ Issue _1825 _ Automattic_node-canvas _ GitHub] 这里提到的，使用下面这行命令安装

arch -arm64 brew install pkg-config cairo pango libpng jpeg giflib librsvg

然后重新新建一个React 项目

![image-20231031144019623][]

等待拉取对应的依赖包之后，可以看到下面的提示Success！

![image-20231031144652287][]

项目的结构目录如下所示：

![image-20231031144853547][]

点击这里的npm start即可启动项目

![image-20231031144951426][]

点击下面这个链接，可以在浏览器打开当前默认的项目页面

![image-20231031145030864][]

[image-20231031143743269]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/6600fa45a078438dbdbf61494064377d.png
[Install error _ Issue _1825 _ Automattic_node-canvas _ GitHub]: https://github.com/Automattic/node-canvas/issues/1825
[image-20231031144019623]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/7cec25cdf08141c5bbf2a592ab7e2c8f.png
[image-20231031144652287]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/b064d0e0fd6f4a1cb568a1aafb03248d.png
[image-20231031144853547]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/1ab3bc4cd8f8447b9b7eba3965fc1f4e.png
[image-20231031144951426]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/ed0b55f24a1647fdb9d2996f3442475b.png
[image-20231031145030864]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/387eaff09df847de913af63b572b989a.png