脚手架开发流程

开发流程

• 创建npm项目

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

  #!/usr/bin/env node
  

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

• 编写脚手架代码

• 将脚手架发布到npm

使用流程

• 安装脚手架

  npm install -g your-own-cli
  

• 使用脚手架

  your-own-cli
  

脚手架使用难点解析

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

• 命令注册：

  vue create
  vue add
  vue invoke
  

• 参数解析：

  • options的全称：--version、--help
  • options简写： -V、-h
  • 带params的options：--path /Users/qzw/Document/project/vue-test

  示例：

  vue command [options] <params>
  

  • 帮助文档

    • Global help
      • Usage
      • OPtions
      • Commands

    例子🌰：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
      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.
    

  • 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
      --merge                         Merge target directory if it exists
      -c, --clone                     Use git clone when fetching remote preset
      -x, --proxy <proxyUrl>          Use specified proxy when creating project
      -b, --bare                      Scaffold project without beginner instructions
      --skipGetStarted                Skip displaying "Get started" instructions
      -h, --help                      output usage information
    

还有很多，比如：

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

等等...

脚手架本地link标准流程

链接🔗本地脚手架

cd your-cli-dir
npm link

链接🔗本地库文件

cd your-lib-dir
npm link
cd your-cli-dir
npm link your-lib

取消链接🔗本地库文件

cd your-lib-dir
npm unlink
cd your-cli-dir
# link 存在
npm unlink your-lib
# link 不存在
rm -rf node_modules
npm install -S your-lib

理解npm link:

• npm link your-lib:将当前项目中node_modules下指定的库文件链接到node全局node_modules下库文件
• npm link： 将当前文件链接到node全局node-modules中作为一个库文件，并解析bin配置创建可执行文件

理解npm unlink:

• npm unlink将当前项目从node全局node_modules中移除
• npm unlink you-lib:将当前项目中库文件以来移除