接上一篇 利用AST自动为函数增长错误上报咱们开发了一个 Babel plugin(npm 包), 本文咱们继续探讨下如何在本地开发和调试 npm 包。前端
当 npm 包还在开发阶段不可能一边发布一边调试,否则也太繁琐了。不一样场景下调试方法有不少,好比如今 npm 包中利用 node 直接运行调试,或者直接在工程的 node_modules 中将引用修改后直接修改源码调试。本文我将介绍其中一种,也是我最经常使用的一种。node
进入本地的 babel-plugin-function-try-catch 这个 npm 包 的根目录执行:webpack
npm link
上面的命令能够将当前的这个包安装在全局(mac 中的路径是 /usr/local/bin
),也就是 npm i -g
安装包的目录。git
执行后结果如图:
这样在本地的 global 下就会存在一个这样的 npm 包。github
因为这是经过软连接的方式实现的,当咱们编辑了本地的 babel-plugin-function-try-catch
模块中的代码,能够直接在安装它的工程中立刻看到更新后的效果。web
接下来,咱们(随便)找一个业务工程去安装这个 npm 包,本文默认使用这个工程能够点击去下载。
在工程根目录执行:npm
npm link babel-plugin-function-try-catch
上面这一步就是让当前工程去模拟 npm install
命令,包来源于本地 npm link
过的文件。
执行后,业务工程的 node_modules
中就会有这个包。
浏览器
眼尖的小伙伴会发现,这个 npm 包不一样于其它包,它带有一个转折箭头符号。以下图所示:bash
也就是说这是一个软连接,执行 npm link xxx
后它会在系统中作一个快捷方式映射。因此这样方便咱们不断调试本地正在开发的这个 npm 包。babel
打开当前项目的 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,错误发生时能够自动捕获和上报。
至此,完成了本地 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
再切到业务工程从新启动项目 npm start
便可生效。
当本地 npm 包调试完成后,在其根目录执行:
npm unlink babel-plugin-function-try-catch
便可解除 link。
若是要发布到 npm 公网,执行 npm publish
便可。
就到这里,再见吧。