yalc,yyds! - 技术栈

npm link

最近开发一个组件库假设叫rn-skeleton，想着组件库就该有组件库的样子，于是我想着找个宿主项目（假设叫rn-app）通过npm link的方式进行本地调试，谁知道拉了坨大的。。。

事情是这样的：众所周知，npm link的使用就很简单。在rn-skelton执行npm link，在宿主项目rn-app安装npm link rn-skeleton，到这里其实已经完事了，结果引入的时候，一直显示：找不到模块"rn-skeleton"或其相应的类型声明 ，更过分的是告诉我rn-app中找不到react-native....

于是我进行了好一会的问题解决，我寻思着node_module也是能看到rn-skeleton这个包的，怎么就找不到？先解决react-native的依赖问题，我把rn-skeleton项目中package.json的overrides字段删除：

js 复制代码

 "overrides": {
    "react": "18.3.1",
    "react-native": "0.77.2"
  }

因为宿主项目也有这玩意，但是无济于事，尝试好几次，还是无用。于是尝试：

npm install /Projects/drn-dialog --legacy-peer-deps
ln -s /Projects/rn-skeleton node_modules/rn-skeleton

还是无济于事，于是放弃了，另辟蹊径去。结果发现：

markdown 复制代码

在 React Native 项目中，npm link 和软连接（ln -s）一般无法用于组件库的本地调试，主要因为
Metro bundler（RN 打包器）默认不支持 symlink，所以常规的 npm link 方案不生效。

metroReact Native 使用的 Facebook打包器不支持符号链接，这严重阻碍了本地代码的共享。

wml

WML(Webpack Module Linker)是一款文件同步工具，基于watchman实现文件监听用于自定义metro打包器配置的实用程序，以解决其不支持符号链接的问题。

该软件包的主要用途是支持使用yarn link或开发 React Native 依赖项npm link。

js 复制代码

npm install -g wml

// 命令
wml ls  // 查看当前link
wml add <ProjectA Name> <ProjectA NameB>/node_modules/<ProjectA Package Name>
wml rm <LinkId>
wml rm all
wml start // 启动生效
wml start --verbose
wml stop

ProjectA Name需要引入的包目录
ProjectB Name需要引入包的宿主项目
ProjectA Package Name是ProjectA的package.json中的name

优点：

完全实时同步
轻量无配置：无需修改包的 package.json，仅需建立一次映射即可长期使用
支持任意文件同步：不限npm包
跨平台：支持mac/windows/linux，依赖watchman

缺点：

仅做文件同步，不处理包的依赖解析
依赖watchman

原以为简简单单，还自带热更新,没想到执行wml start一直卡着不动，也没日志输出，闹麻了，接着换～

yalc

js 复制代码

npm install -g yalc

yalc publish  // 将本地包发布到yalc本地仓库
yalc add <Package Name> // 从yalc仓库引入包到当前项目
yalc update <Package Name> // 更新当前项目的本地包到最新版本
yalc push // 将本地包的修改同步到所有引入的项目（热更新）
yalc remove <Package Name> // 从当前项目删除yalc引入的包
yalc clean // 清空yalc本地仓库缓存

执行yalc后可以看到项目中的node_modules出现该包，而且多了一个文件yalc.lock。如果不是标准的npm包项目，可能还需修改一些内容：

ProjectA

json 复制代码

// package.json
{
  "name": "rn-dialog",
  "main": "src/index.tsx", // 入口文件路径
  "types": "src/index.d.ts" // index.d.ts文件路径
  // ...
 }

ProjectB

json 复制代码

// tsconfig.json
{
  "compilerOptions": {
    "paths": {
       // 手动映射模块路径，强化 TS 解析
      "rn-dialog": ["node_modules/rn-dialog/src/index.tsx"]
    },
}

缺点：

不支持热更新，需要手动执行yalc update
会有新文件生成，记得添加到.gitignore
主要针对npm 包

优点：

绕开npm link的peerDependencies/overrides校验冲突，因为yalc是模拟安装而不是软链
支持多项目同步
轻量无侵入

至于@carimus/metro-symlinked-deps，略略略

我宣布，以后yalc是我的首选项～