React-Native开发前的见面礼--误入依赖坑

对前端开发的同学来说,react native开发肯定是让人兴奋,用javaScript来开发app应用,想想就激动。

正好,有这么个机会,要用rn开发个功能,代码已由同事开发了部分。

所以,我从git上更新最新的代码后就想把代码跑起来,而想代码跑起来要做的第一件事便是安装依赖。

谁会想到,就装个依赖而已,而我却掉进了这坑里,这个千万分之一的概率都不知道有没有的坑。

装个依赖而已

我想,很多的同学,都是用npm做依赖包管理的吧。

npm的访问速度实在太慢了,慢得感觉不到有数据过来,怎么可以忍受我们 宝贵的时间就这么白白的被浪费了。

于是乎,我们万能的淘宝出了个淘宝镜像,通过这镜像去安装依赖包,这速度,真是飞一般的感觉。

大厂就是大厂,对大厂就有一种莫名的信任感,据说用的人还挺多。

随便贴下怎么用着镜像吧

1
npm install cnpm -g --registry=https://registry.npm.taobao.org

然后就可以使用cnpm安装各种依赖包了,用法跟使用npm一样。

聪明的我,也是这么做的。

掉坑里了

那么,问题来了,我通过cnpm i用了眨了下眼睛的时间安装完了依赖后。

直接执行了如下命令:

1
react-native run-ios

本来的反应应该是,经过一系列的编译,启动模拟器,同时启动本地服务用来热更新代码

可就在启动本地服务时却报了如下的错,本地服务直接终止了。

image

而查了下src中的javaScript代码,并没有使用到on啊。

顿时感觉不好了,一头雾水,这是啥情况呢, 之后就不断的做各种的猜测与尝试

是不是node版本不对呢,问题之前开发的同事用的node版本,发现不同,立马装上同版本的node,可还是不行

是不是xcode的版本问题呢,因为执行react-native run-ios会调用xcode进行build,报着试试看的心态,升级了xcode,发现还是不对

是不是依赖没装好呢,于是清了./node_modules目录,再安装了一遍,结果依然不行。

在网上找了一大圈也没找到个原因,这TM是什么情况。。。

正当要绝望之时,突然想到之前装的react native的官方demo, 进入目录运行react-native run-ios,神奇般的没有任何报错的起来了,我的天呐~

这时,我已经可以很明确的知道,肯定不是node的问题,也不是xcode的问题,那么是不是依赖的问题呢,

于是删了官方例子中./node_modules的文件,用cnpm i又安装一遍,再次执行react-native run-ios,居然也不行了,报了同样的错。

好吧, 到这里,已经非常的明显了,就是安装的依赖包引起的。

于是向同事讨要了其他的镜像地址http://r.cnpmjs.org,我再使用如下命令在项目中尝试安装了下依赖包

1
npm i  --registry http://r.cnpmjs.org/

果不其然,再次执行react-native run-ios,很顺利的跑起来了。

原来都是cnpm惹的祸,妄我这么的信任你。

当然了,也是不说通过cnpm安装的依赖就一定会报错了,我只是中了这千万分之一的概率。

还没完

写到这应该是好结束了,因为问题已经解决了。

可是,到底是加载了哪个依赖包出的问题呢,为什么用cnpm安装就会有问题呢,我们还是不知道。

贯彻我一向的刨根问底的精神,我又经过了我多次的尝试,发现问题就出在react-native这个最主要的包上。这就尴尬了,总不能不装这个包吧。

那么,react-native包为什么就不行呢,通过查看以cnpmnpm i --registry http://r.cnpmjs.org/两种方式生成的node-modules中的文件发现,cnpm生成的目录都是个symlink符号链接,真正的文件夹是平级目录下的隐藏文件夹,以版本号开头命名;而通过另一种方式生成的就是正常的文件夹了。

cnpm到底干了啥呢,阅读了下在github上的说明,里面有这么一段:

image

原来上面说的符号链接就是这么来的,而且还告诉我们可以切换成用npm来安装,于是,再次删除./node_modules,执行cnpm i --by=npm , 发现node_modules中不再是符号链接了,再执行react-native run-ios后,程序顺利的执行了,当然,当改成了npm方式安装,就体验不到cnpm带给你的飞一般的安装速度了。

所以,出错的原因应该是使用了npminstall来安装依赖,通过上面一刨,可以知道,cnpm还是可以用的。只要改下它使用的默认安装方法。

对于npminstall安装为什么会导致依赖出错,就不再做深入的研究了。感兴趣的同学可以继续研究。

最后

写下此篇,望能帮助到同样中了这千万分之一概率的同学们,及时发现问题所在。