文章目录
脚手架
脚手架的本质是一个操作系统的客户端，通过命令执行
问题
- 为什么全局安装@vue/cli会添加vue命令
- 全局安装@vue/cli发生了啥
- 执行vue命令时发生了啥？为什么vue指向一个js文件，可以通过vue命令去执行它
脚手架的核心价值
提升前端研发效能
- 自动化：项目重复代码的拷贝/git操作/发布上线操作
- 标准化：项目创建/git flow/发布流程/回滚流程
- 数据化：研发过程系统化、数据化，使得研发过程可量化
与自动化构建工具的区别
jenkins、travis等自动化工具已经比较成熟，是否需要自研脚手架
- 不满足需求：jenkins、travis通常在git hooks中触发，需要在服务端执行，无法覆盖研发人员本地的功能，如创建项目自动化、本地git操作自动化
- 定制复杂：jenkins、travis定制过程复杂，需要使用后端语言
从使用角度理解脚手架
vue create vue-test-app
# - 主命令 vue
# - command：create
# - command的参数：vue-test-app
vue create vue-test-app --force -r https://regisetry.npm.taobao.org
--force 叫做option，用来辅助脚手架确认在特定场景下用户的选择（可以理解为配置）。
-r 也叫做option，与--force的区别在于使用-，使用简写，-r也可以替换为--registry
脚手架原理解析
全局安装@vue/cli时发生了啥
- npm在进行全局安装vue-cli
- 在vue-cli的package.json中查看bin字段
- bin中如果有指令，会在node安装目录的bin文件夹中添加vue的软链接
// package.json
{
"name": "@vue/cli",
...
"bin": {
"vue": "bin/vue.js" // 终端中vue主命令从这里来的
}
}npm安装vue作为全局依赖的时候，为vue在bin目录中创建了软链接，并指向当前使用的node版本安装路径的lib/node_modules目录中vue-cli中的vue.js
执行vue命令，会查到vue-cli的js文件，但是为什么会被node执行呢
#!/usr/bin/env node
// 上面这行会让操作系统在环境变量中寻找node，nvm可以切换node，也就是修改了环境变量中的PATH
console.log("hello world~")如何在命令行创建自定义命令
# 先进入node的bin目录
cd ~/.nvm/versions/node/v16.13.1/bin
# 创建软链接
ln -s ~/attacki/source/_posts/backend/nodejs/cli/test.js attr
# 为命令添加别名，软连接是可以嵌套的
ln -s ./attr attr2
# 删除软链接
rm -rf attr attr2
脚手架之所以是客户端，因为node是客户端
脚手架的执行原理
- vue create vue-test-app
- 终端解析vue命令
- 在环境变量$PATH中查询vue的软链接
- 执行vue-cli的bin目录中的vue.js
- 终端利用node执行vue.js
- vue.js第一行声明，会让终端通过环境变量查找node客户端
- vue.js用node执行
- vue.js解析command/options
- vue.js执行command
- 执行完毕，退出
脚手架开发流程
- 创建npm项目 npm init -y
- 创建入口文件，最上方添加 #!/usr/bin/env node
- 配置package.json，添加bin属性
- 编写脚手架代码，将脚手架发布到npm
- 安装脚手架 npm install -g your-own-cli
- 使用脚手架 your-own-cli
脚手架开发难点解析
- 分包：将复杂的系统拆分成若干个模块
- 命令注册：
vue create
vue add
vue invoke- 参数解析
vue command [options] <params>- options全称：—version、—help
- options简写：-V、-h
- 带params的options：—path /Users/attacki/Desktop/vue-test
- 帮助文档：
- global help
- Usage
- Options
- Commands
- command help 例如：vue的帮助信息
- global help
- 命令行交互
- 日志打印
- 命令行文字变色
- 网络通信：Http/WebSocket
- 文件处理
node根据路径执行文件
node -e "require('../cli/index.js')"