腳手架開發流程

腳手架開發流程詳解

• 建立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：將當前項目中的庫文件依賴移除