脚手架开发流程

脚手架开发流程详解

• 建立npm项目 npm init -y
• 建立脚手架入口文件，最上方添加：
  #!/usr/bin/env node
• 配置package.json,添加bin属性
• 编写脚手架代码

• 将脚手架发布到npm上

  使用流程

• 安装脚手架
  npm install -g your-own-cli

  脚手架开发难点解析

• 分包：将复杂的系统拆分红若干个模块

• 命令注册：

  vue vreate
   vue add
   vue invoke

• 参数解析：
  vue command [options] <params>

  • options全称：--version，--help
  • options简写： -V，-h
  • 带params的options： --path /Users/jianjun/Desktop/vue-test

  • 帮助文档

    • global help

      • Usage
      • Options
      • Commands

    • command help

      • Usage
      • Options

  其余一些难点

• 命令行进行交互
• 日志打印
• 命令行文字变色
• 网络通讯： http/websocket
• 文件处理

• 。。。。

  脚手架本地link标准流程

  连接到本地脚手架

  cd you-cli-dir
  npm link

  连接本地库文件：

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

  取消连接本地库文件

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

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