本地模块调试技巧

前言

在日常应用开发中,尤其是前端的小伙伴们经常会开发一些独立模块,上传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

在package.json中编写指令

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

效果展示

wml123.gif

你可能感兴趣的:(本地模块调试技巧)