开发脚手架目标 : 提升前端研发效能
价值:
自动化 : 项目重复代码拷贝 / git操作 / 发布上线操作 标准化 : 项目创建 / git flow / 发布流程 / 回滚流程 数据化 : 研发过程系统化 . 数据化( 埋点 ) 使得研发过程可量化
和自动化构建工具区别
不满足需求 Jenkins , travis等通常在git hooks中触发 需要在服务端执行 无覆盖研发人员本地的功能 语言为JAVA 对前端不太友好
脚手架本质是一个操作系统的客户端
比如:
vue create project-name
主命令 : vue
command: create
command:的param : project-name
输入 vue create demo
首先会在环境变量中 找到vue 执行的是 which vue
从应用的角度看如何开发一个脚手架
开发npm项目 , 该项目中应包含一个bin/vue.js文件 并将这个项目发布到npm 将npm项目安装到node的lib/node_modules 在node的bin目录下配置vue软连接指向指向 lib/node_modules/@vue/cli/bin/vue.js
问题:
为什么全局安装 @vue/cli后会添加的命令为vue? npm install -g @vue/cli
全局安装 @vue/cli时发生了什么?
为什么vue指向一个js文件 我们却可以直接通过vue命令去执行它?
脚手架实现原理
- 为什么全局安装@vue/cli 后会添加的命令为vue? npm install -g @vue/cli vue-cli目录 package.json "bin":{"vue":"bin/vue.js"}
- 全局安装@vue/cli时发生了什么? 依赖下载到bin目录 指定软连接
- 执行vue命令式发生了什么? 为什么vue指向一个js文件,我们可以直接通过vue命令去执行它 3.1 操作系统会通过which vue找到执行路径 在环境变量中找到vue命令是否被注册 3.2 #! /usr/bin/env node 可执行脚本
node 本质是一个客户端 Windows => node.exe Mac=>可执行文件
执行流程
终端中输入 vue create project-name 在环境变量中查找是否有vue命令 相当于 which vue 没有: 返回 报错 不是命令 Mac command not defined 有: 查询实际软连接文件 通过/usr/bin/env node执行文件
开发流程
- 创建npm项目
- 创建脚手架入口文件 #! /usr/bin/env node 可执行脚本
- 配置package.json 添加bin
- 脚手架业务
- npm publish
调试本地脚手架
npm link or npm link your-lib 取消: npm unlink npm unlink your-lib rm -rf node_modules npm install
脚手架命令注册 和 参数解析
const argv = require("process").argv
