脚手架的开发流程

前言

这是一篇关于脚手架搭建流程的学习日志，仅供参考学习

---

一、开发流程

• 创建npm项目
• 创建脚手架入口文件，最上方添加解析注释：

#!/usr/bin/env node

• 配制package.json，添加bin属性
• 编写脚手架代码
• 将脚手架发布到npm

二、使用流程

• 安装脚手架

npm install -g your-test-cli

• 使用脚手架

your-test-cli

脚手架开发难点解析

• 分包：将复杂的系统拆分为若干个模块
• 命令注册：

vue create
vue add
vue invoke
vue serve 

• 参数解析

vue command [options] <params>

• options全称：--version、--help
• options简写：-V、-h
• 带params的options：--path /User/xxx/Desktop/vue-test
• 帮助文档
  • global help
    • Usage
    • Options
    • Commands
• 命令行交互
• 日志打印
• 命令行文字变色
• 网络同喜：HTTP/WebSocket
• 文件处理
• ······

示例：vue的帮助信息：

	$ vue -h
Usage: vue <command> [options]

Options:
  -V, --version                              output the version number
  -h, --help                                 output usage information

Commands:
  create [options] <app-name>                create a new project powered by vue-cli-service
  add [options] <plugin> [pluginOptions]     install a plugin and invoke its generator in an already created project
  invoke [options] <plugin> [pluginOptions]  invoke the generator of a plugin in an already created project
  inspect [options] [paths...]               inspect the webpack config in a project with vue-cli-service
  serve [options] [entry]                    serve a .js or .vue file in development mode with zero config
  build [options] [entry]                    build a .js or .vue file in production mode with zero config
  ui [options]                               start and open the vue-cli ui
  init [options] <template> <app-name>       generate a project from a remote template (legacy API, requires @vue/cli-init)
  config [options] [value]                   inspect and modify the config
  outdated [options]                         (experimental) check for outdated vue cli service / plugins
  upgrade [options] [plugin-name]            (experimental) upgrade vue cli service / plugins
  migrate [options] [plugin-name]            (experimental) run migrator for an already-installed cli plugin
  info                                       print debugging information about your environment

  Run vue <command> --help for detailed usage of given command.

总结

基本原理其实很简单，就是初始化一个项目，配置bin属性，然后发布到npm上，当然前提是这个命令是没有重名的，否则无法发布到npm，接着就是通过npm install -g your-cli安装你的脚手架，然后就可以使用your-cli命令了！