前言
这是一篇关于脚手架搭建流程的学习日志,仅供参考学习
一、开发流程
- 创建npm项目
- 创建脚手架入口文件,最上方添加解析注释:
#!/usr/bin/env node
- 配制
package.json
,添加bin
属性 - 编写脚手架代码
- 将脚手架发布到
npm
二、使用流程
- 安装脚手架
npm install -g your-test-cli
- 使用脚手架
your-test-cli
脚手架开发难点解析
- 分包:将复杂的系统拆分为若干个模块
- 命令注册:
vue create
vue add
vue invoke
vue serve
- 参数解析
vue command [options] <params>
- options全称:
--version
、--help
- options简写:
-V
、-h
- 带params的options:
--path /User/xxx/Desktop/vue-test
- 帮助文档
- global help
- Usage
- Options
- Commands
- global help
- 命令行交互
- 日志打印
- 命令行文字变色
- 网络同喜:HTTP/WebSocket
- 文件处理
- ······
示例:vue
的帮助信息:
$ vue -h
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.
总结
基本原理其实很简单,就是初始化一个项目,配置bin
属性,然后发布到npm
上,当然前提是这个命令是没有重名的,否则无法发布到npm
,接着就是通过npm install -g your-cli
安装你的脚手架,然后就可以使用your-cli
命令了!