如何调试本地库

当我们在本地开发一些 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