前端架构: 调试本地脚手架最佳实践梳理

脚手架本地调试标准流程

1 )链接本地脚手架

  • 就是当我们这个脚手架开发好还没上线的时候
  • 可以进入到脚手架的一个目录, 通过 npm link 完成这个操作
  • $ cd your-cli-dir
  • $ npm link
  • 这个操作的含义是将当前的项目链接到node全局的 node_modules 中作为一个库文件, 并且还会解析我们的bin配置, 去配置可执行文件
  • 通过 npm link 的时候, 它就会在当前 node 全局的依赖当中创建一个脚手架可执行文件并且指向自己本地脚手架项目配置的这个文件

2 )链接本地库文件

  • 首先来到当前的库文件,下面执行 npm link, 这时候得到一个全局的库文件名称
    • 在全局node_modules中会有一个软链指向当前库文件项目目录
    • 这个软链名称就是 库文件名称
    • $ cd your-lib-dir
    • $ npm link
    • 此时,当前的库文件就可在全局找到了,但是这个库在当前cli项目中并未存在
  • 然后来到脚手架cli目录执行 npm link 库文件名称
    • $ cd your-cli-dir
    • $ npm link your-lib
  • 这时,在当前项目内的 node_modules 当中创建一个 库文件的软链 指向全局 node_modules
  • 而我们知道,全局的 库文件 也是一个软链,指向本地正在开发调试的库文件项目
  • 这时候,两者就能串联起来了,注意,不要忘记在当前cli脚手架项目的依赖中,添加当前库文件的依赖和版本
  • 这时候,两者可以随时联动起来,随时修改,随时可以同步了

3 )取消链接本地库文件

  • 当需要模拟真实环境,也就是将要上线的时候,需要把本地的软链接全部解除
  • 首先,仍然是需要来到库文件的这个目录,执行 npm unlink
    • $ cd your-lib-dir
    • $ npm unlink
  • 这时,它会将当前这个项目从node的全局 node_modules 中移除, 这时候库文件的软链就不见了
  • 不存在意味着,我们的cli脚手架将无法使用这个库,再次执行脚手架cli命令将必然会因为找不到依赖而报错
  • 进入到我们的脚手架cli项目中,对已经失效的库文件同步进行解除链接
    • $ cd your-cli-dir
    • $ npm unlink your-lib
    • 这时候,仍旧会报错,因为先把库文件的软链从全局node_modules中取消了,所以这里因为找不到而报错
    • 这个报错可以忽略,执行后虽然报错了,但是将本地cli脚手架对于库文件的软链删除了
    • 其实,如果不想要这个报错,可以先执行取消本地cli对库文件的软链,再取消本地库文件在全局的软链
    • 也即是调整下两者执行的顺序,其实这个报错是可以忽略的,是无所谓的
    • 如果先在cli项目中unlink 库文件,则会发现,在cli项目的依赖配置中, 库文件的依赖也同步会删除
    • 如果配置文件中的依赖被这样删除了,后期还需要 npm i 库文件 -S 或者手动重新配置(这个就会修改源码了)
    • 所以,仍推荐保持目前这个顺序,主动让其在 unlink 时报错,免得后期遗漏或重新安装的麻烦
  • 如果这时候库文件已经发布上线了,可以
    • 先删除脚手架cli目录中的node_modules, 即 $ rm -rf node_modules
    • 之后,执行 npm i 重新安装
  • 通过这个标准流程可以顺利实现脚手架的调试与上线

1 ) npm link

  • npm link your-lib:将当前项目中 node modules 下指定的库文件链接到 node 全局 node_modules 下的库文件
  • npm link:将当前项目链接到 node全局 node modules 中作为一个库文件,并解析 bin配置创建可执行文件

2 )npm unlink

  • npm unlink: 将当前项目从 node 全 node_modules 中移除
  • npm unlink your-lib: 将当前项目中的库文件依赖移除

参考

相关推荐
天空属于哈夫克318 小时前
企业微信二次开发:精准实现关键词自动回复
架构·企业微信
子兮曰18 小时前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
子兮曰18 小时前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
前端小万18 小时前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
爱勇宝18 小时前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
三十而立洋19 小时前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
晨米酱19 小时前
AGENTS.md:Agent 的上下文策略层
面试·架构·agent
这个DBA有点耶19 小时前
MVCC深入:Read View、版本链与快照读——InnoDB并发控制的内核
数据库·mysql·架构
卡布鲁20 小时前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
码流子21 小时前
高速公路安全监测实践:碰撞监测预警+物联网底座,从感知到处置的闭环
大数据·人工智能·物联网·算法·架构