脚手架开发概览

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第15天，点击查看活动详情。

TODO：

• 软链接
• /urs/bin/env node 执行文件
• which node：查找

脚手架开发流程

• 创建 npm 项目
• 创建脚手架入口文件，最上方添加 #!/usr/bin/env node
• 配置 package.json，添加 bin 属性
• 编写脚手架代码
• 将脚手架发布到npm

使用流程

• 安装脚手架

  npm install -g your-own-cli

• 使用脚手架

  your-own-cli

脚手架开发难点

• 分包： 将复杂系统拆分成若干个模块
• 命令注册，如

  vue create
  vue add
  vue invoke
  ``
  

• 参数解析

  vue command [options]

  • options全程: --version 、 --help
  • options简写： -V ， -h
  • 带params的options： --path /users/pp/Desktop/vue-test
  • 帮助文档
    • global help
      • Usage
      • Options
      • Commands
• 命令行交互
• 日志打印
• 命令行文字变色
• 网络通信：HTTP/WebSocket
• 文件处理

调试本地脚手架

• npm link
• 在本地文件夹的上级目录执行npm i -g 包名进行软链

分包

1. 先 npm link 本地调试
2. 调试通过后发布npm npm publish
3. 本地取消软链npm unlink 包名
4. npm i 包名模拟真实环境正常调试

脚手架本地link标准流程

• 链接本地脚手架

cd your-cli-dir
npm link

• 链接本地库文件

cd your-lib-dir
npm link
cd your-cli-dir
npm link your-lib

• 取消链接本地库文件

cd your-lib-dir
npm unlink
cd your-cli-dir
# link 存在
npm unlink your-lib
# link不存在
rm -rf node_modules 
npm install -S your-lib

理解npm link

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

理解 npm unlink

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

命令注册和参数

命令注册