当前位置: 首页 > news >正文

【node】npm包本地开发与调试

npm link

进入本地的 babel-plugin-function-try-catch 这个 npm 包的根目录执行:

npm link

上面的命令可以将当前的这个包安装在全局(mac 中的路径是 /usr/local/bin),也就是 npm i -g 安装包的目录。

执行后结果如图:
img
这样在本地的 global 下就会存在一个这样的 npm 包。

由于这是通过软链接的方式实现的,当我们编辑了本地的 babel-plugin-function-try-catch 模块中的代码,可以直接在安装它的工程中马上看到更新后的效果。

项目中安装本地 npm 包

接下来,我们(随便)找一个业务工程去安装这个 npm 包,本文默认使用这个工程可以点击去下载。
在工程根目录执行:

npm link babel-plugin-function-try-catch

上面这一步就是让当前工程去模拟 npm install 命令,包来源于本地 npm link 过的文件。
img
执行后,业务工程的 node_modules 中就会有这个包。
img

眼尖的小伙伴会发现,这个 npm 包不同于其它包,它带有一个转折箭头符号。如下图所示:

img
也就是说这是一个软链接,执行 npm link xxx 后它会在系统中做一个快捷方式映射。所以这样方便我们不断调试本地正在开发的这个 npm 包。

本地项目工程配置这个 loader

打开当前项目的 webpack 配置文件:
webpack.config.js

rules: [{test: /\.js$/,exclude: /node_modules/,use: [
+       "babel-plugin-function-try-catch","babel-loader"]},
]

执行 npm start 启动当前前端工程。可以看到原来的代码

var fn = function(){console.log(11);
}
fn();

在浏览器中自动会加上 try/catch,错误发生时可以自动捕获和上报。

img

至此,完成了本地 npm 包和本地业务工程的关联!

本地调试 npm 代码

此时我要修改 catch 中的代码,将其改为 console.log(error),这个时候你只需要修改本地 npm 工程中的代码即可:

// src/index.js- var catchStatement = template.statement(`ErrorCapture(error)`)();
+ var catchStatement = template.statement(`console.log(error)`)();

然后执行:

npm run build

img

再切到业务工程重新启动项目 npm start 即可生效。

img

当本地 npm 包调试完成后,在其根目录执行:

npm unlink babel-plugin-function-try-catch

即可解除 link。

如果要发布到 npm 公网,执行 npm publish 即可。

参考: https://segmentfault.com/a/1190000037638502

http://www.lryc.cn/news/595692.html

相关文章:

  • 深入解析Hadoop中的Region分裂与合并机制
  • 关于集合的底层数据结构
  • 【C++进阶】揭秘list迭代器:从底层实现到极致优化
  • Pulsar存储计算分离架构设计之Broker无状态
  • 飞算科技:用AI与数智科技,为产业数字化转型按下“加速键”
  • 《声音分类模型》
  • 一、Vue概述以及快速入门
  • 深度学习 --- 激活函数
  • Datawhale 202507 夏令营:让AI学会数学推理
  • Ultralytics代码详细解析(四:engine->trainer.py 训练部分代码详解)
  • 架构演进核心路线:从离线仓库到实时湖仓一体
  • EMA《2025-2028年药品监管中的数据与AI 1.3版》信息分析
  • vscode不识别vsix结尾的插件怎么解决?
  • SQL 基础案例解析
  • Oracle RAC+ADG switchover 切换演练流程
  • 景区负氧离子监测设备:守护清新,赋能旅游
  • 操作符练习
  • 倍增算法与应用(倍增优化之ST表、LCA、功能图、树上差分、贪心、二分)
  • mybatis多对一一对多的关联及拼接操作以及缓存处理
  • 主流开源LLM架构对比与突破·
  • 【Qt开发】Qt的背景介绍(四)
  • 项目复盘核心要点
  • 网络安全基础作业三
  • 图论的整合
  • JS WebAPIs DOM节点概述
  • v0+claude+cursor构建初始脚手架
  • 北京养老金计算公式网页实现案例:从需求分析到架构设计
  • 在Python中操作Word
  • 滴滴0722 总结与优化方向
  • J2EE模式---前端控制器模式