脚手架开发
脚手架开发
开发脚手架的核心目标：提升前端研发效能
内容：
- 创建项目+通用代码
- 埋点
- http 请求
- 工具方法
- 组件库
- git 操作
- 创建仓库
- 代码冲突
- 远程代码同步
- 创建版本
- 发布打 tag
- 构建和发布上线
- 依赖安装和构建
- 资源上传 cdn
- 域名绑定
- 测试/正式服务器
脚手架核心价值将研发过程：
- 自动化：项目重复代码拷贝/git 操作/发布上线操作
- 标准化：项目创建/git flow/发布流程/回滚流程
- 数据化：研发过程系统化、数据化，使得研发过程可量化
自动化构建工具：jenkins、trvis 通常需要 git hooks 触发，在服务端运行需要定制化操作，整个过程比较复杂
脚手架执行原理：
以 vue-cli 为例子
- 在终端输入 vue create xxx
- 终端解析出 vue 命令
- 终端在环境变量中找到(相当于 which vue，找不到提示 commond not found) vue 命令
- 根据 node/bin/目录下 vue 命令（软连接）连接到 node 全局依赖 lib/node_modules 包下的 vue.js
- 终端利用 node(/usr/bin/env node) 执行 vue.js
- vue.js 解析 command/options
- vue.js 执行 command
- 执行完毕，退出
疑问：
- 为什么全局安装@vue/cli 会添加 vue 命令？
答： 在 package.json 中的 {bin: {‘vue’: ‘bin/vue.js’}}配置 - 全局安装 npm install -g @vue/cli 时发生了什么？
答：首先会把@vue/cli 这个项目安装在 node 的 lib/node_modules 目录下，然后检查项目中 package 中是否存在 bin 属性，如果存在的话会在 node 的 bin 目录下创建一个对应的软连接 - 执行 vue 命令发生了什么？
答：操作系统会找到 which vue 的目录路径并执行这个路径的文件（先去环境变量中找对应命令，拿到目录执行） - 怎么直接执行一个 js 文件，不通过 node？
答：在文件顶部写 #！/usr/bin/env node,相当于告诉操作系统去环境变量中找 node 命令去执行这个文件；/usr/bin/env node xxx.js = xxx.js(顶部添加指令) = node test.js
创建软连接命令：
- ln -s /Users/foo/xxx.js vue
脚手架开发难点：
- 分包：将复杂的系统拆分成若干个模块
- 命令注册：vue create、vue add 等
- 参数解析 vue command options(全称、简称) params,帮助信息：Usage： vue <’xxx’> [‘options’]; Options: xxx
- 命令行交互（让用户选择或者输入）
- 日志打印
- 命令行文字变色
- 网络通信：http/websocket
- 文件处理
从应用角度看如何开发一个脚手架：
- 开发 npm 项目，项目中包含一个 bin/vue.js 文件，并将项目发布到 npm
- 将 npm 项目安装到 node 的 lib/node_modules 中
- 在 node 的 bin 目录下配置 vue 软连接到 lib/node_modules/@vue/cli/bin/vue.js
- 执行 vue 的命令时就可以找到 vue.js 执行