当前位置: 首页 > 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.dtcms.com/a/292155.html

相关文章:

  • 【自动化运维神器Ansible】Ansible介绍与架构详解
  • Events
  • UE5 UI scaleBox 缩放框
  • 基于开源AI智能名片链动2+1模式与S2B2C商城小程序的淘宝新店引流与好评优化策略研究
  • 现在希望用git将本地文件crawler目录下的文件更新到远程仓库指定crawler目录下,命名相同的文件本地文件将其覆盖
  • Elastic Cloud 简化版:GCP Marketplace
  • 【LeetCode数据结构】栈和队列的应用——用队列实现栈问题、用栈实现队列问题详解
  • Leetcode力扣解题记录--第73题(矩阵置零)
  • ecflow服务的搭建,源码编译方式
  • Gerrit多仓库对应多邮箱配置办法
  • Stirling PDF本地PDF编辑器:cpolar内网穿透实验室第628个成功挑战
  • Apache Ignite 索引(Indexes)定义和使用
  • 【运维】SGLang服务器参数配置详解
  • Vue开发常用库(含npm安装命令)
  • IPv4枯竭时代:从NAT技术到IPv6的演进之路
  • C++函数 vs Go函数
  • C++ 中重载函数右值引用和左值引用匹配的优先级
  • 【机器学习】第四章 回归算法
  • 主流开源LLM架构对比与突破·
  • 控制器(Controller)模块的架构与工作流程 -OpenExo
  • Azure可靠性架构指南:构建云时代的高可用系统
  • Java函数指南:从Function到BiFunction的深度解析
  • 电商项目_秒杀_架构及核心
  • 【Linux】进程概念
  • 以Java程序员角度理解MCP
  • 项目复盘核心要点
  • SQL Server 查询优化
  • Vue 脚手架基础特性
  • 前端自动化埋点:页面模块级行为跟踪与问题定位系统​​的技术设计方案
  • 浏览器地址栏输入URL回车后白屏分析