问题场景
你在公司参与开发了组件库,已经通过npm发布了出去,同事在使用过程中发现了问题,反映给你,你打开源代码,由于没有demo可以测试,所以你花时间写了一些demo来测试同事说的问题,结果根本无法复现。
由于你要测试组件库,所以你不得不加入demo来进行测试,之后还要删除,这样就浪费了很多时间,同时在修改组件库代码的过程中需要十分注意不能随意修改原来没问题的代码。另一种方法是,你修改了代码然后发包之后再在另一个项目中引入新版本去测试,这方法同样很复杂。
解决方法
使用npm link,创建一个组件库库的链接,将当前的包注册到全局下,我们可以在测试项目中通过npm link xx来链接组件库,通过这种办法直接调试本地组件库,如果有问题,我们就直接在本地组件库代码中进行修改,再进行组件库项目的打包(这一步不是必须的,这将取决于你的代码是否需要编译),然后测试项目就可以直接获取到最新的更改
好处是避免上述两个问题,既不会污染组件库,又不需要发布可能仍有问题的组件库版本
做法
- 在需要调试的组件库通过执行npm link创建链接
- 在调试的项目通过执行npm link myComponent来链入刚刚创建的包,其中我假设我们的组件库名称为myComponent,这个名称要跟package.json文件中的名称一致
- 要注意,你要调试的组件库的package.json文件必须暴露入口文件'main','module',这两个字段一个是commonjs项目的入口文件,一个是es项目的入口文件,就是说你import一个组件库的时候,肯定是引入了一个入口文件的。如果你要引入其他文件,那么你可以使用export,这个字段用来进行路径的映射,同时如果有exports字段,将会使引入方只能引入exports字段中有的路径。比如如果是.那就只能引用import myComponent from 'myComponent',见以下代码。
{
"name":"myComponent",
"type":"module",
"main":"./src/index.cjs",
"module":"./src/index.js",
"exports": {
".": "./src/index.js",
}
}
4.在调试的项目导入对应的组件库,这个组件库可以未被发布,因为执行npm link的时候已经在全局目录创建了一个链接指向组件库,而执行npm link myComponent的时候则创建一个指向已有链接且名称为xx的链接。见以下例子
cd ~/projects/node-redis # 进入需要调试的库的根路径
npm link # 创建全局链接
cd ~/projects/node-bloggy # 进入调试所用的node项目
npm link redis # 链接式安装redis包,官网这里是link-install the package