如何调试npm 包

背景：

1. 自己发布的npm 包，可能需要在本地调试，怎么避免来回发布包，然后在项目里安装，调试

2. 第三方的npm包，想要改里面的实现或者debug

如果第三方的npm 包在打包的时候，将源码一并放进 包里，例如 element-ui 这种，可以使用方式二

方式一

1. 在自己本地的npm 包源码里面，或者fork其他人的源码, 包的根路径 npm link

目的是将这个包注册为全局的包

下面将当前目录，注册为 全局的 v-limit-input 包

这里我只执行了 npm link ，全局包名name, 是由pacakge.json 中的name 字段决定的

2. 在项目里面 npm link 上面的包名， 进行安装

这里安装的是全局的本地包, 本地包内容发生改变， 项目里可以实时拿到最新的结果

注意： 如果项目中安装了包， 则 npm link 会失效， 需要重新 npm link xx包名

3. 项目里面正常的引入

此时npm 包寻址会找打当前项目的 node_modules, 而node_modules里面的 test-package 包会通过 软连接（快捷方式）链接到全局的 node_modules下面

import VLimitText from 'v-limit-text'

至此， npm 包本地调试已经完成，最后就直接npm publish 发布到npm 包管理市场即可

方式二： 在node_modules里调试

从 node_modules里看，我们安装的 element-ui 是附带了源码的

可以修改element-ui 引用方式，实现在 node_modules里面改内容，在项目里看效果

<script>
// 正常情况，是这样引入，或者全局注册，直接用
import {Button} from 'element-ui'
  
// 当需要调试时, 直接引用源码
import {Button} from 'element-ui/packages/button'

export defualt {
	name: 'test-npm-package',
	components: {
            Button
	}
}
</script>

正常情况，我们引入的第三方成熟包，都是打包后的内容， 例如element-ui , 从 element-ui 的packages.json的 main字段可以看到

// 文件最终指向的是 element-ui/lib/element-ui.common.js 路径
import ElementUI from 'element-ui'

修改包的引用路径，即可实现在 node_modules里调试包， 前提是 ，依赖的第三方包，在打包时，将源码也一并打成npm 包

其他

1、全局取消测试包

npm unlink test-package

---

让你明明白白学知识，有代码，有讲解，抄的走，学的会！ 点个赞吧 😁😁😁

掘金文章主题和代码高亮使用配置如下：

highlight: monokai theme: fancy