今天在用一个组件时, 发现这个组件的功能有些小问题, 便想改好之后提个pr上去.
但是! 当我把仓库clone下来, npm i ,npm run serve之后, 咔咔报错, 才发现事情并没有那么简单
在测试的demo中,是这样引入的.
正常情况下webpack会进入node_modules中查找名为simple-mind-map的目录.
关于解析的问题可以参考webpack的文档进行学习.
但是实际上这个demo的package.json中并没有相关依赖.
并且这个本地npm包并不在demo项目的目录中(web文件夹是demo的根目录)
也不可能每次拉下来代码后手动把包移动到node_modules中, 最起码这个组件的作者不是这样做的
经过查阅资料, 找到如下解决方案.
npm link创建软链接
- 首先打开终端,进入npm包的根目录中
- 在终端输入
npm link,创建软链接 - 然后控制终端进入demo项目的根目录,
- 输入
npm link [package_name], 把[package_name]替换为本地npm包的package.json文件中的name字段的值即可
做完上述操作后, 就可以在demo项目的node_modules中找到相关的依赖,
后续和npm install的包一样使用即可,这种操作是实时的, webpack也会检测并热替换
npm unlink 删除软链接
-
demo项目根目录中输入:
npm unlink [package_name]取消关联软链接 -
npm本地包根目录中输入:
npm unlink
做完上述操作即可取消链接 -
查看所有npm link的包:
npm ls --global --depth 0
关于软链接的作用有很多, 下一代包管理工具pnpm就是利用了软链接从而大大提高了包安装速度