前言

在日常应用开发中，尤其是前端的小伙伴们经常会开发一些独立模块，上传git或者自己的私服。本文将阐述如何即快速又方便的调试本地模块。

本地模块的引用

蛋疼方式 : 发布一个beta版本

修改一次就要打包发布一次，然后重新拉取测试。

WechatIMG1629.png 20150801214044_JFKrj.gif

蛋疼方式+1：（重复）npm install 相对路径

{
  "name": "baz", 
  "dependencies": {
    "bar": "file:../foo/bar"
  }

npm会自动识别file:协议对应的path。虽然可以引用本地模块，但是无法同步两边的修改，调试过程中需要不断的重复install。

还行的方式：软链

MAC:
ln -s 源文件(即：实际所在的路径及名字) 目标文件(即：希望所在的路径及名字)

Windows:
mklink /d path1 path2


使用案例
cd   path/to/project/node_modules
ln -s  path/to/module   module   

使用软链可以同步两边的修改，但是不同的操作系统软链的指令不一样

流行方式：npm link

npm link 的官方说明就是符号链接一个package。
使用npm link简单，并且可以做到两边代码同步。

如果项目和模块不在同一目录下

先将模块link到全局
cd    path/to/module
npm  link

项目link模块
cd   path/to/project
npm  link  module

如果项目和模块在同一目录下

cd    path/to/project
npm  link  path/to/module

取消link

cd   path/to/project
npm  unlink  module

React-Native 链接本地模块

问题

当React-native项目npm link本地模块，会报unable to resolve module的错误。
产生该问题的原因是React-native packager 不支持符号链接（软链接）。

解决方案

采用wml 代替符号链接，它实际上是将已经更改的文件从源文件夹复制到目标文件夹。
同时wml是基于watchman（RN官方推荐依赖）来监听某个文件夹中的更改，然后将更改的文件复制到另一个文件夹中。

安装WML

npm install -g wml

使用WML

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

wml start

TM20191108141355.png QQ20191108-141454@2x.png

在package.json中编写指令

"link" : "wml add ../react-test-view ./node_modules/react-test-view && wml start",
"unLink": "wml rm all",

QQ20191108-151214@2x.png

效果展示

wml123.gif