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

脚手架本地调试标准流程

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 重新安装
• 通过这个标准流程可以顺利实现脚手架的调试与上线

link 和 unlink 的总结

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: 将当前项目中的库文件依赖移除

参考

• https://blog.csdn.net/Tyro_java/article/details/136103930