如何调试本地库
本文最后更新于:2022年4月22日 上午
当我们在本地开发一些 ui 库、功能库、又或者是一些脚手架工具的时候,调试就变得极为重要了
例如脚手架工具,我们可以直接通过 node
来执行,但一般脚手架工具通常会在用户命令行所在目录下做一系列操作,例如创建项目,或者创建文件,此时就需要在想办法能把脚手架工具能够安装在全局,或者本地。这样的话,我们就需要先把脚手架发布到 npm
然后安装。
但很显然,我们在开发阶段想要调试某个功能的时候每次都要执行这样的流程,调试成本太高了,我们希望有更简化的调试方式,有没有呢,答案是有的。
我们可以使用如下两种方式
npm link
file: “../xxxxx”
npm link
记录本地使用 npm link
调试脚手架的流程
如下目录,脚手架主入口在 bin/index.js
/
└── core
├── package.json
└── bin
└── index.js
编写脚本
在bin/index.js
中键入以下内容
#! /usr/bin/env node
'use strict';
console.log('hello sunshine cli');
#! /usr/bin/env node
这行代码表示 去环境变量中找到node
来执行以下的代码
配置 bin
在 package.json
的 bin
中配置脚手架的名称已经入口
key
为脚手架在命令行的名称,这里我设置的是 sunshine-cli-dev
value
为脚手架执行时的主入口
{
"name": "@sunshine-cli-dev/core",
"version": "0.0.0",
"description": "> TODO: description",
"author": "宿愿Cc <375642570@qq.com>",
"homepage": "",
"license": "ISC",
"directories": {
"lib": "lib",
"test": "__tests__"
},
"bin": {
"sunshine-cli-dev": "bin/index.js"
},
"files": [
"lib"
],
"publishConfig": {
"registry": "https://registry.npm.taobao.org/"
},
"scripts": {
"test": "echo \"Error: run tests from root\" && exit 1"
}
}
npm link
配置完以上后在 项目根目录中执行 npm link
,会看到添加成功
> npm link
added 1 package, and audited 3 packages in 1s
found 0 vulnerabilities
测试是否生效
在任意命令行执行 sunshine-cli-dev
,可以看到我们写的 js
代码被执行了,至此使用 npm
调试的技巧就基本完成了
> sunshine-cli-dev
hello sunshine cli
注意事项
package.json
中的name
和bin
有什么区别,为什么不一致
    name
为这个脚手架的包名,用户通过 npm
安装的时候的名称
    bin
中的属性名为,安装完脚手架后在终端使用时的名称
    例如 @vuejs/cli
,安装的时候是 npm i @vuejs/cli
,使用的时候是 vue create demo
    
- 如果后续代码修改了是否会自动生效
    如果改的是 js
代码,会自动生效,无需执行其它操作,因为 npm link
其实就是配置了一个软链接,指向的就是项目的目录。
    
- 如果
package.json
的bin
配置错了,需要修改,该如何操作
    将 bin
修改完成后,执行以下两步即可让修改生效
    1. npm remove -g <package.json 的name名>
例如我这里是 @sunshine-cli-dev/core
    2. 重新执行 npm link
> npm remove -g @sunshine-cli-dev/core
removed 1 package, and audited 1 package in 612ms
found 0 vulnerabilities
> npm link
added 1 package, and audited 3 packages in 1s
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议,转载请注明出处。