脚手架开发流程详解（二）

一、开发流程

• 创建npm项目

• 创建脚手架入口文件，最上方添加：

  #!/user/bin/env node

  涵义是：去环境变量env中寻找node，通过node执行当前的入口文件可执行程序

• 配置package.json，添加bin属性

• 编写脚手架代码

• 将脚手架发布到npm

二、使用流程

• 安装脚手架

  npm install -g your-own-cli

• 使用脚手架

  your-own-cli

当我们按照上面的开发流程完成整个脚手架开发以后，我们的脚手架是可以正常运行的，但是很难被大面积使用，原因是还缺乏很多东西，请继续往下看

三、脚手架开发难点分析

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

• 命令注册，例如：

  • vue create --name vue-test

    vue add

    vue invoke

• 参数解析:

  vue command [options]

  vue create --name vue-test

  上面两行请一一对应

  • options全程：--version、--help

  • options简写：-V、-h

  • 带params的options：--path /users/gejian/desktop/vue-test

  • 帮助文档：

    • 示例：vue的帮助信息：

    • Usage: vue <command> [options]
      ​
      Options:
        -V, --version                              output the version number
        -h, --help                                 display help for command
      ​
      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                                      alias of "npm run serve" in the current project
        build                                      alias of "npm run build" in the current project
        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
        help [command]                             display help for command
      ​
        Run vue <command> --help for detailed usage of given command.
      

• 命令行交互

• 日志打印

• 命令行文字变色

• 网络通信：http/websocket

• 文件处理

等等......