一、npm包分类
依照我个人的了解，在调试过程npm包能够分红两类：
1. 可用于开发的npm包：这类npm包在node_modules文件下的源码以及进口文件都没有通过特别的处理，咱们能够很方便地对其代码进行阅览，甚至修正, 具体表现如下图：
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包项目创建了一个全局的链接。
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包来说，我会建议自己用第一种办法来调试。
