开发与使用一致性

Beeshell 组件库使用 npm 包的形式下载使用，下载成功后会放置在项目根目录的 node_modules 目录，然后在项目中通过引入模块的方式引入 Beeshell 的组件来使用。

那我们如何开发组件库？如何保证组件库的开发与使用的体验一致性？

首先，我们需要一个 demo 项目，这个项目是 Beeshell 组件库的开发环境，是一个 React Native 应用。然后，我们把 Beeshell 做为 demo 项目的依赖，在 demo 项目中下载安装。

现在我们的问题就变成了 node_modules 目录中的 Beeshell 如何和本地的 Beeshell 源码进行同步。

npm link

我们知道可以使用 npm link 来开发 npm 包，原理如下：

本质是就是使用 Symbol link，但是我们建立好软链接后，运行打包命令却报错了，错误信息为 Expected path '/xxx/xxx/index.js' to be relative to one of project roots

我们前端开发通常会用 Webpack 做为打包工具，而 React Native 应用使用的是 Metro，我们需要分析 Metro 来定位问题。

Webpack vs Metro

经过 Metro 的源码分析，我们发现 Metro 的打包方案与 Webpack 有较大差异，Webpack 是根据入口文件，即配置中的 entry 属性，递归解析依赖，构建依赖关系图而 Metro 是爬取特定路径下的所有文件来构建依赖关系图。

分析发现 Metro 的特定路径默认是运行打包命里的路径，以及 node_modules 下第一层目录，这样我们就定位到了问题的所在：

Metro 爬取文件的时候通过软链接找到了全局的 beeshell 但是并没有继续判断全局的 beeshell 是否有软链接，所以无法爬取 beeshell 源码部分。

直接使用软链接

通过 ln -s 命令，直接建立 demo 项目 node_modules 下 beeshell 包 与 beeshell 源码的软链接：

这种方式同时支持 Native 部分 iOS、Android 的源码开发，注意 Android 部分的需要在 setting.gradle 中调用 getCanonicalPath 方法获取建立软链接后的路径。

通过试验、发现问题、分析源码、定位问题、解决问题、方案完善这几个步骤完整的实现了 Beeshell 组件库的开发与使用的体验一致性，同时提升了组件库的开发效率。