有关 npm 包的本地开发和调试

前言

接上一篇 利用AST自动为函数增加错误上报我们开发了一个 Babel plugin（npm 包）， 本文我们继续探讨下如何在本地开发和调试 npm 包。

当 npm 包还在开发阶段不可能一边发布一边调试，不然也太繁琐了。不同场景下调试方法有很多，比如现在 npm 包中利用 node 直接运行调试，或者直接在工程的 node_modules 中将引用修改后直接修改源码调试。本文我将介绍其中一种，也是我最常用的一种。

npm link

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

npm link

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

执行后结果如图：

这样在本地的 global 下就会存在一个这样的 npm 包。

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

项目中安装本地 npm 包

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

npm link babel-plugin-function-try-catch

上面这一步就是让当前工程去模拟 npm install 命令，包来源于本地 npm link 过的文件。

执行后，业务工程的 node_modules 中就会有这个包。

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

也就是说这是一个软链接，执行 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，错误发生时可以自动捕获和上报。

至此，完成了本地 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

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

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

npm unlink babel-plugin-function-try-catch

即可解除 link。

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

就到这里，再见吧。