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

脚手架的开发流程

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
      • 文件处理
      • ...
相关推荐
爱生活的苏苏14 分钟前
vue生成二维码图片+文字说明
前端·vue.js
拉不动的猪16 分钟前
安卓和ios小程序开发中的兼容性问题举例
前端·javascript·面试
炫彩@之星22 分钟前
Chrome书签的导出与导入:步骤图
前端·chrome
贩卖纯净水.33 分钟前
浏览器兼容-polyfill-本地服务-优化
开发语言·前端·javascript
前端百草阁39 分钟前
从npm库 Vue 组件到独立SDK:打包与 CDN 引入的最佳实践
前端·vue.js·npm
夏日米米茶40 分钟前
Windows系统下npm报错node-gyp configure got “gyp ERR“解决方法
前端·windows·npm
打码人的日常分享1 小时前
智慧城市建设方案
大数据·架构·智慧城市·制造
且白1 小时前
vsCode使用本地低版本node启动配置文件
前端·vue.js·vscode·编辑器
程序研1 小时前
一、ES6-let声明变量【解刨分析最详细】
前端·javascript·es6
siwangqishiq22 小时前
Vulkan Tutorial 教程翻译(四) 绘制三角形 2.2 呈现
前端