做过ReactNative（简称RN）开发的小伙伴，往往被RN的热重载功能所打动。

当你修改完代码保存文件后，无论是手机还是模拟器上对应的界面都能立刻刷新，而不需要重新加载页面。

但是如果你想开发一个可复用的组件，往往不能如愿使用热重载。

经过长期的搜寻和摸索，我总结了一套高效开发组件的方法。

现在分享出来，希望能帮助小伙伴们节约探索的时间。

着急的小伙伴可以直接跳到标题3.2

1 热重载是高效开发的必备神器

当你调试一个页面的时候，每次改动无需重新安装应用，无需重新一层层的打开页面。

这无疑给开发者节约了大量时间。我们真的很需要热重载。

热重载是基于 Hot Module Replacement(简称HMR)的。

原理是RN中使用watchman监听项目文件变更，当发现文件被修改后，以补丁的形式更新bundle文件。

我们平时写当js代码都会打包到这个bundle文件中，最终被框架执行。

当开发可复用的组件时，我们需要将组件代码写到单独的组件工程里面，发布到npm上以便于复用。

我们可以想一些办法在本地调试，而不是改完代码就发布一版npm，安装后再看效果。

2 组件代码放在什么地方合适？

2.1 组件代码放在node_modules目录中：容易被不小心清理掉

有时我们不得不清空node_modules 做过RN开发的小伙伴通常对这个错误很熟悉：“Module xxx does not exist in the Haste module map”。

一旦你忘了备份正在开发的node_modules下的组件代码。

又按照提示执行到第二步:

rm -rf node_modules。

这时候，你就能更好的理解这些成语：欲哭无泪、痛不欲生、从头再来。

2.2 组件代码放在App工程内node_modules外：git不好管理

懒癌发作，如不清楚，可在评论区留言，我将展开讨论

2.3 组件代码放在App工程目录外：无法热重载

懒癌发作，如不清楚，可在评论区留言，我将展开讨论

3 解决方案

尝试使用yarn link 未果

在调用工程根目录执行:

yarn link "@zhike-private/rn-protocal-view"

输出：

yarn link v1.17.3
success Using linked package for "@zhike-private/rn-protocal-view".
✨ Done in 0.08s.

本质上这个操作相当于 将组件工程目录链接到 调用工程node_modules 目录下面。

这适用于js，但是对于RN，

呵呵，不能工作。

3.1 初步解决方案

做十倍程序员，需要全身心投入，不应该提心吊胆时不时的备份项目。

做十倍程序员，离不开git，想提交就提交，想回退就回退。

做十倍程序员，需要热重载，避免将时间消耗在不断的安装和打开页面上。

因此，要做十倍程序员，必须解决前面的问题。

上面3个问题中，貌似第三个是最容易解决的问题。

我们可以把代码放在项目外，需要的时候将代码拷贝到App工程的node_module目录下。

为了便于拷贝，还可以专门写个拷贝的脚本。貌似完美了。

然而，这样你就满足了吗？

想象这样调试的场景：

改代码，考代码，看结果
改代码，考代码，看结果
改代码，考代码，看结果
...
改代码，考代码，看结果

这个考代码的动作好碍眼啊。

3.2 终极解决方案：wml

最后在这里找到了解决方案：RN中使用同步链接的包， 不过这里面说的有点啰嗦。

简单总结如下：

3.2.1 wml的作用

使用wml，你可以监控一个目录下的文件变化，自动将该目录同步到另一个目录。

3.2.2 如何使用wml之安装

yarn global add wml

3.2.3 如何使用wml之配置

wml add ~/my-package ~/main-project/node_modules/my-package

3.2.4 如何使用wml之开启

wml start

进阶

如果你感兴趣可以研究一下wml start后生成的.watchmanconfig文件。

这里面记录了一些可以忽略的目录比如.git目录 组件自己的node_modules目录。

当然你可以添加新的，比如说你组件的例子的目录。