首页 > 其他分享 >npm如何引入本地依赖 --npm包开发测试

npm如何引入本地依赖 --npm包开发测试

时间:2023-02-05 00:34:08浏览次数:67  
标签:npm package -- demo link 本地 根目录 链接

今天在用一个组件时, 发现这个组件的功能有些小问题, 便想改好之后提个pr上去. 

但是! 当我把仓库clone下来, npm i ,npm run serve之后, 咔咔报错, 才发现事情并没有那么简单

 

在测试的demo中,是这样引入的.
image
正常情况下webpack会进入node_modules中查找名为simple-mind-map的目录.

关于解析的问题可以参考webpack的文档进行学习.

但是实际上这个demo的package.json中并没有相关依赖.
并且这个本地npm包并不在demo项目的目录中(web文件夹是demo的根目录)
image

也不可能每次拉下来代码后手动把包移动到node_modules中, 最起码这个组件的作者不是这样做的

经过查阅资料, 找到如下解决方案.

npm link创建软链接

  • 首先打开终端,进入npm包的根目录中
  • 在终端输入npm link,创建软链接
  • 然后控制终端进入demo项目的根目录,
  • 输入npm link [package_name], 把[package_name]替换为本地npm包的package.json文件中的name字段的值即可
    image

做完上述操作后, 就可以在demo项目的node_modules中找到相关的依赖,
image

后续和npm install的包一样使用即可,这种操作是实时的, webpack也会检测并热替换

  • demo项目根目录中输入: npm unlink [package_name] 取消关联软链接

  • npm本地包根目录中输入: npm unlink
    做完上述操作即可取消链接

  • 查看所有npm link的包: npm ls --global --depth 0
    关于软链接的作用有很多, 下一代包管理工具pnpm就是利用了软链接从而大大提高了包安装速度

相关阅读:

标签:npm,package,--,demo,link,本地,根目录,链接
From: https://www.cnblogs.com/lkx666/p/17092699.html

相关文章

  • Qwik All In One
    QwikAllInOneTheHTML-firstframework.Instantappsofanysizewith~1kbJSFrameworkreimaginedfortheedge!-Qwikhttps://qwik.builder.io/https://g......
  • 关于clearInterval后重新启动定时器的问题
    假设有这样一个定时器:letauto=setInterval(right,1000)clearInterval(auto)此时如果想重启定时器auto,应当这样写//正确写法auto=setInterval(right,1000)//......
  • 每日算法--2023.2.4
    1.回文子串classSolution{publicintcountSubstrings(Strings){intres=0,n=s.length();for(inti=0;i<n;i++){intl......
  • 如何重装Windows系统——以Windows10为例
    写在重装前重装前注意备份系统盘(一般是C盘)中的数据你需要一个U盘可以把操作系统看做成一个软件软件运行的时候无法删除软件一般情况下系统盘是C盘步骤重装系统主......
  • SpringBoot测试用例的一些小技巧~
    场景一:不想因为测试而对数据库产生脏数据@TestpublicvoidtestInsert(){ Useruser=newUser(); user.setUsername("startqbb"); user.setPassword("123456"); u......
  • 自适应可行BB类算法
    自适应可行BB类算法本文的算法来自于论文:BoJiang&Yu-HongDai(2013)FeasibleBarzilai–Borwein-likemethodsfor extremesymmetriceigenvalueproblems,Optim......
  • 析构函数和构造函数的特点(在汇编中如何识别构造和析构)
    1.构造函数1.1概念​ 常用来完成对象生成时的数据初始化工作,支持函数重载,不可定义返回值,返回值为对象首地址,即this指针拷贝构造函数:参数为对象地址,返回值为this指针1......
  • 哈希表
    哈希表(hashtable)又叫散列表,是一种关联式容器,存储的是一对值,一般是一个key对应一个value(又叫键值对)。数组、链表、栈、队列都是序列式容器,存储的都是一个元素。C++ST......
  • 怎么使用Git查看项目中代码的提交历史记录?
    怎么使用Git查看项目中代码的提交历史记录?可以在git上使用下面这段指令gitlog--pretty=format:"%ai,%an:%s">>~/Desktop/Readme.log在git上执行完之后,就可以在......
  • EF Core自动将实体映射到数据库
    protectedoverridevoidOnModelCreating(ModelBuildermodelBuilder){try{varcompilationLibrary=Dependenc......