当前位置：首页 > news >正文

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

news 2025/7/15 4:38:57

脚手架的开发流程

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 informationCommands:create [options] <app-name>                create a new project powered by vue-cli-serviceadd [options] <plugin> [pluginOptions]     install a plugin and invoke its generator in an already created projectinvoke [options] <plugin> [pluginOptions]  invoke the generator of a plugin in an already created projectinspect [options] [paths...]               inspect the webpack config in a project with vue-cli-serviceserve [options] [entry]                    serve a .js or .vue file in development mode with zero configbuild [options] [entry]                    build a .js or .vue file in production mode with zero configui [options]                               start and open the vue-cli uiinit [options] <template> <app-name>       generate a project from a remote template (legacy API, requires @vue/cli-init)config [options] [value]                   inspect and modify the configupgrade [semverLevel]                      upgrade vue cli service / plugins (default semverLevel: minor)info                                       print debugging information about your environmentRun 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-serviceOptions:-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 informationMissing required argument <app-name>.