前端脚手架本地调试方法

306 阅读2分钟

脚手架本地调试(全局安装了cli脚手架)

文件目录举例说明:study/test-cli

study为本地文件夹,test-cli为脚手架项目名称; 保证本地脚手架项目和NPM的项目以一致

安装脚手架 test-cli

执行安装命令:npm i -g test-cli

打开全局npm安装目录:cd /Users/amor/.nvm/versions/node/v14.17.0/bin

执行:ll 查看当前目录下文件权限,指向地址相关信息,举例如下:

lrwxr-xr-x 1 amor staff 46 3 11 16:35 test-cli@ -> ../lib/node_modules/test-cli/bin/index.js

可以看出全局test-cli 命令指向地址是lib/node_modules/test-cli/bin/index.js下的文件。终端运行test-cli命令运行时,执行的是lib/node_modules/test-cli/bin/index.js的方法

方法一

  1. 终端打开脚手架项目父级目录 cd study
  2. 执行命令:npm i -g test-cli
  3. 执行命令:ll /Users/amor/.nvm/versions/node/v14.17.0/lib/node_modules 查看lrwxr-xr-x 1 amor staff 37 3 11 16:54 test-cli@ -> ../../../../../../study/test-cli 可以看出test-cli指向了本地路径study/test-cli
  4. 修改本地脚手架项目study/test-cli,执行test-cli会发生改变

方法二

  1. 终端打开本地脚手架目录:cd study/test-cli
  2. 执行:npm link
  3. 修改 study/test-cli 文件内容,执行 test-cli会发生改变

脚手架分包调试

主程序:study/test-cli,副文件:study/test-lib

  1. 终端执行:cd study/test-lib
  2. 终端执行:npm link,控制台输出/Users/amor/.nvm/versions/node/v14.17.0/lib/node_modules/test-lib -> /Users/amor/study/test-lib。test-lib会直接在本地全局node包里存在 3.ll /Users/amor/.nvm/versions/node/v14.17.0/lib/node_modules查看全局库里node包
  3. 输出lrwxr-xr-x 1 amor staff 33 3 11 17:22 test-lib@ -> /Users/amor/study/test-lib
  4. cd study/test-cli
  5. npm link test-lib