前端架构 —— 脚手架的开发流程

一、脚手架开发流程详解

开发流程

• 创建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 /User/name/Desktop/vue-test
• 帮助文档：

• global help
  • Usage
  • Options
  • Commands

 示例：vue 的帮助信息

Usage: vue [options]

Options: 

 -v, --version

 -h, --help
......

• command help
  • Usage
  • Options

vue create 的帮助信息：

Usage: create [options]

create a new project powered by vue-cli-service

Options:

-p, --project

-d, --default

-i, --inlinePreset

......

还有很多，比如：

• 命令行交互
• 日志打印
• 命令行文字变色
• 网络通信：HTTP/WebSocket
• 文件处理

......