filway
脚手架的开发流程
正在加载今日诗词....
2022-04-03

脚手架开发流程详解

开发流程

  • 创建 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/sam/Desktop/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 your-lib：将当前项目中的库文件依赖移除

Copyright © 2022 @filway

  • ☀️
  • 🌑