记一次React源码调试安装过程中遇到的坑

站长

2022年12月26日 20:41 · 阅读数 8

最近在研究React源码方面的东西，遇到两个不大不小的坑，因为这两个坑网上解决方案较少，而且词条介绍并不详细，因此打算记录下来避免他人少踩坑；

首先我们需要下载React源码包:

git clone https://github.com/facebook/react.git

拉取成功之后进行依赖安装

yarn install

在安装过程中前面一切顺利，在最后却报了如下错误：

error E:\workspace\demo\react\node_modules\gifsicle: Command failed.
Exit code: 1
Command: node lib/install.js
Arguments:
Directory: E:\workspace\demo\react\node_modules\gifsicle:
Output:
‼ getaddrinfo ENOENT raw.githubusercontent.com
  ‼ gifsicle pre-build test failed
  i compiling from source
  × Error: Command failed: C:\WINDOWS\system32\cmd.exe /s /c "autoreconf -ivf"
'autoreconf' �����ڲ����ⲿ���Ҳ���ǿ����еĳ���

一开始我便摸不到头脑，开始在网上各种无脑百度；给到的答案基本上就两种：

在package.json中忽略这个错误使安装依赖继续执行，但是在我尝试几次之后发现并不可行；
设置镜像代理，但是我很早之前就设置了镜像代理，而且我本地也没开任何梯子因此我把这个方案否了；

然后在我反复运行了几次yarn install 操作时我发现程序每次进行到electron安装的时候就会报错，因此我猜测原因可能在electron上面，因此我设置了mirror

npm config set electron_mirror

到这里install 操作终于能往下执行了，但是在安装完之后也抛给我一连串警告，最终这安装的依赖也没法用；到这里我才想到应该对错误信息里的那个地址进行分析，在我百度了之后发现确实已经有人遇到了这个问题；

获取raw.githubusercontent.com这个地址的域名，查找域名在这里地址就能查到www.ipaddress.com
在获取地址之后打开我们windows的vhost文件，在最后一段加上

xxx.xxx.xxx.xxx(域名) raw.githubusercontent.com

然后重启计算机就好了(不重启不知道行不行，我的习惯是修改完这些配置之后都会重启一下)

至此安装依赖的问题解决了；

然后我愉快的进行打包，当我愉快的在控制台输入

yarn build react/index,react/jsx,react-dom/index,scheduler --type=NODE

之后，控制台又报错了！

-- PLUGIN_ERROR (scripts/rollup/plugins/closure-plugin) --
Error: java -jar  E:\workspace\demo\react\node_modules\google-closure-compiler-java\compiler.jar --compilation_leve
l=SIMPLE --language_in=ECMASCRIPT_2015 --language_out=ECMASCRIPT5_STRICT --env=CUSTOM --warning_level=QUIET --apply_input_sou
rce_maps=false --use_types_for_optimization=false --process_common_js_modules=false --rewrite_polyfills=false --inject_librar
ies=false --assume_function_wrapper=true --renaming=true --js=C:\Users\A\AppData\Local\Temp\tmp-20072b5z2V2DV5nlz

Process spawn error. Is java in the path?
spawn java ENOENT


    at  E:\workspace\demo\react\scripts\rollup\plugins\closure-plugin.js:16:16
    at ChildProcess.<anonymous> ( E:\workspace\demo\react\node_modules\google-closure-compiler\lib\node\closure-com
piler.js:107:9)
    at ChildProcess.emit (events.js:315:20)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
    at onErrorNT (internal/child_process.js:465:16)
    at processTicksAndRejections (internal/process/task_queues.js:80:21)

吸取上次教训之后我决定对控制台错误进行分析，大致意思是构建过程中缺少java产生的错误；然后我在想是不是需要安装一个jdk？因此我求证了大佬，得到的答案确实是需要安装jdk，在安装完jdk之后运行畅通无阻；

再然后就到了我们创建软链的阶段，这一步畅通无阻，没遇到什么情况

cd build/node_modules/react
# 申明react指向
yarn link
cd build/node_modules/react-dom
# 申明react-dom指向
yarn link

然后便可以对打包后的源码进行调试了