首页 > 其他分享 >npm link本地开发调试组件库/模块包

npm link本地开发调试组件库/模块包

时间:2022-10-22 20:11:30浏览次数:57  
标签:npm app standard libs link fe 组件

  如果很多前端项目共用一个组件/方法,那么这个组件/方法就会被剥离出来,抽取出来的多了,就会成为组件库/模块包,这样做的好处就是,每次我们只要单独对组件库/模块包进行维护就可以达到所有项目里所引用组件/模块的更新。

  以vue项目的组件库(fe-standard-libs)为例,组件库地址会在package.json中被定义

{
  "name": "app",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "scripts": {
    "dev": "vue-cli-service serve",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --no-module",
  },
  "dependencies": {
    ...
    "fe-standard-libs": "git+https://xxxx.com/xxxx/xxxx.git#xxxxxxxx",
  },
"devDependencies": {
    ...
  }
}    

  但是每次对组件库进行维护的时候,就会出现无法,或是说很难进行调试的情况,总不能凭着感觉改,然后直接推到远程仓库更新组件库,最后在生产环境里验证吧,所以,这个时候就需要npm link来帮忙进行本地开发调试。

  首先,先进入本地组件库fe-standard-libs项目,然后执行npm link命令。即先cd fe-standard-libs,然后npm link。这个时候,这个项目会被链接到全局,windows下的路径是:{prefix}/node_modules/<package>,如果不知道prefix值的话,可以执行命令npm config get prefix获取。

   然后,你就可以在这个文件夹下找到fe-standard-libs项目的快捷方式。

   然后进入你的开发项目,叫app好了,先cd app,然后npm link fe-standard-libs。这个时候你到app/node_modules文件夹下去查看,也会发现多了一个fe-standard-libs项目的快捷方式,这个会优先于package.json下载下来在node_module的同名文件。然后npm run dev启动项目app,你就可以在项目fe-standard-libs中修改代码了,代码也会同步更新显示在app的页面中,如果app项目有开启热更新的话,你也可以看到同步看到Terminal执行热更新的过程。

  最后,如果开发调试完了,app与fe-standard-libs之间的软链接没去掉不管也没关系,但是要是有强迫症必须要去掉也行,在app项目中执行npm unlink fe-standard-libs即可断开二者的联系。

标签:npm,app,standard,libs,link,fe,组件
From: https://www.cnblogs.com/jdWu-d/p/16745160.html

相关文章

  • Vue笔记7 父子组件访问
                      ......
  • TIAV16的下载地址以及组件介绍
    几天前我在某浪法国,但一直处于审核期间,仅作者可见。思前想后,还是在这里也发一次吧,万一哪一天关闭了呢?新浪博客(sina.com.cn)昨天从西门子官网下载了TIAV16,西门子官网下......
  • 大数据Hadoop之——Apache Hudi 数据湖实战操作(Spark,Flink与Hudi整合)
    目录一、概述二、HudiCLI三、Spark与Hudi整合使用1)Spark测试2)Spark与Hudi整合使用1、启动spark-shell2、导入park及Hudi相关包3、定义变量4、模拟生成Trip乘车数......
  • STM32L4 Keil ST-Link 连接失败
    ST-LINK连接失败的问题有两种,一个是驱动问题,一个是插线问题。连接正常的情况如下图所示,SWDIO能显示你的设备信息:注意使用SW端口,JTAG端口导致无法识别设备。还有一个......
  • Flink如何使用DataStreamAPI消费Kafka
    1、到官网查询所在版本的依赖,导入pom.xml(在此用Flink1.13)官网->教程->connectors->datastream->kafka网址:https://nightlies.apache.org/flink/flink-docs-release-1.1......
  • Linux下matalb2021a和2022a无法启动simulink的解决方案之一
    提示错误类似:bin/glnxa64/MATLABWindow:symbollookuperror:somelibrary:undefinedsymbol:FT_Get_Var_Blend_Coordinatesor:bin/glnxa64/MATLABWindow:symbollo......
  • 非表单组件实现双向绑定的小技巧-- v-model 代替 .sync
    简介一般地,双向绑定多用于表单这类输入组件,但在非表单组件上使用双向绑定的需求也很常见,比如具有单选性质的菜单、标签页等组件,通过双向绑定可以更方便地获取和修改激活项......
  • Iframe - Target for a Link
    Iframe-TargetforaLink通过超链接来切换iframe里面的内容 <!DOCTYPEhtml><html><body><h2>Iframe-TargetforaLink</h2><iframesrc="demo_iframe.htm......
  • flink入门学习
    一:为什么使用flink1.jdk实现流式处理packagenet.xdclass.app;importnet.xdclass.model.VideoOrder;importjava.util.Arrays;importjava.util.List;importjav......
  • 微服务组件--限流框架Spring Cloud Hystrix分析
    Hystrix的介绍【1】Hystrix是springCloud的组件之一,Hystrix可以让我们在分布式系统中对服务间的调用进行控制加入一些调用延迟或者依赖故障的容错机制。【2】Hystrix通......