一、npm包分类
按照我个人的理解，在调试过程npm包可以分成两类：
1. 可用于开发的npm包：这类npm包在node_modules文件下的源码以及入口文件都没有经过特殊的处理，我们可以很方便地对其代码进行阅读，甚至修改, 具体表现如下图：
2. 仅用于生产环境的npm包：这类
npm包在node_modules文件下的表现为经过特殊打包后杂乱无章的js代码，完全无法进行阅读，具体表现如下图：
下面本文将会根据以上两个分类总结不同的调试方法。
二、npm包调试方法
1. 调试：可用于开发的npm包
- 定位入口文件的位置: 在
node_modules下的每个包文件夹中，都有一个package.json文件，这个文件中会记录了这个第三方库的入口文件名，我们可以根据里面的main字段来确定：
- 直接在入口文件中打断点调试: 对于这类npm包的入口文件，我们可以看到代码都是没经过特殊压缩处理，方便阅读的。这样我们可以根据自己的理解，直接在代码里打断点调试。举个例子，我在调试第三方库
vue-infinite-scroll时，是直接在项目的node_modules下找到vue-infinite-scroll编译好的js文件，并在其中打上断点来调试的。如下图：
2. 调试：仅用于生产环境的npm包
软链接（ npm link或yarn link）：通过软链接的方式，我们可以把项目中的npm包链接到另一个项目，而使用方式也很便捷：
- 从远端仓库
clone你想要调试的npm包到机器中，进入该目录并执行yarn link或者npm link：这样就给我们想要调试的npm包项目创建了一个全局的链接。
2. 回到我们的前端项目目录中，执行
yarn link ${packageName}或者npm link ${packageName}, 这样就会直接将我们刚刚创建的本地npm模块的路径作为普通的npm包link到我们的项目里。
Tips: 注意这里的packageName一定要对应你的npm包package.json里的name字段值。
-
进入刚刚从远端仓库
clone你想要调试的npm包目录中，修改代码至自己想要的效果。然后在package.json文件中查找用于构建项目代码的指令，在命令行中执行，代码构建成功后，即可在前端项目中进行调试啦！ -
去除软链接：
- 先在使用npm包的项目的文件目录下解除特定的链接：
yarn unlink ${packageName}或者npm unlink ${packageName} - 再在从远端仓库
clone的npm包目录中，去除全局链接：yarn unlink
3. 总结
实际上，link软链接的方法对于上面提到的两种npm包的调试来说都是可用的。但是相比于第一种调试方法，link软链接的方法需要去npm包的github仓库拷贝项目到本地，并建立软链接。安全起见，在调试完毕之后还需要去除软链接。这无疑是带来了更多的工作量。因此对于那些可阅读的npm包来说，我会建议自己用第一种方法来调试。
