前端架构: 脚手架开发流程中的难点梳理

脚手架的开发流程

1 ）开发流程

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

2 ）使用流程

• 安装脚手架

  • npm install -g your-own-cli

• 使用脚手架

  • your-own-cli

3 ）脚手架开发难点

• 分包: 将复杂的系统拆分成若干个模块，并且合并成一个复杂系统
• 命令注册，如：
  • $ vue create
  • $ vue add
  • $ vue invoke
  • 这里需要了解，如何注册命令，以及执行命令
• 参数解析
  • 如：vue command [options] <params>
  • options全称： --version, --help
  • options简写：-V, -h
  • 带params的options: --path /Users/xxx/…/vue-test
  • 帮助文档：
    • global help 是指对主命令进行帮助
      • Usage
      • Options
      • Commands
    • vue的帮助文档示例，这个属于 global help

      $ vue
      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
        upgrade [semverLevel]                      upgrade vue cli service / plugins (default semverLevel: minor)
        info                                       print debugging information about your environment
      
        Run vue <command> --help for detailed usage of given command.
      

      • 可见，可通过 vue -V, 或 vue -h 可查看具体的信息
      • global help 只能表示主命令的用法，对于子命令，也同样需要
    • command help 子命令帮助
      • Usage
      • Options
    • 子命令的帮助信息，举例

      $ vue create
      Usage: create [options] <app-name>
      
      create a new project powered by vue-cli-service
      
      Options:
        -p, --preset <presetName>       Skip prompts and use saved or remote preset
        -d, --default                   Skip prompts and use default preset
        -i, --inlinePreset <json>       Skip prompts and use inline JSON string as preset
        -m, --packageManager <command>  Use specified npm client when installing dependencies
        -r, --registry <url>            Use specified npm registry when installing dependencies (only for npm)
        -g, --git [message]             Force git initialization with initial commit message
        -n, --no-git                    Skip git initialization
        -f, --force                     Overwrite target directory if it exists
        -c, --clone                     Use git clone when fetching remote preset
        -x, --proxy                     Use specified proxy when creating project
        -b, --bare                      Scaffold project without beginner instructions
        --skipGetStarted                Skip displaying "Get started" instructions
        -h, --help                      output usage information
      
        Missing required argument <app-name>.
      

  • 同样，还有很多，如：
    • 命令行交互: 可以选择
    • 日志打印: 标准打印
    • 命令行文字变色: 错误红色，警告黄色
    • 网络通信：HTTP/WebSocket
    • 文件处理
    • …