CLI(脚手架)开发实践-0.1

水木青华
117 阅读4分钟
  • 为什么要设计脚手架
  1. 所有的项目都是通过项目脚手架来创建
  2. 通过工具实现前端自动化，是提高研发效率的主要抓手
  3. 基础架构团队专门维护
  • 必要性
  1. 提升前端研发效率（多团队，通用代码模板的初始化）
  2. git操作自动化，节约开发时间和麻烦
  3. 项目构建和发布
  • 价值
  1. 研发过程自动化
  2. 研发过程标准化
  3. 研发过程数据化，优化流程的抓手
  • 问题:自动化构建工具不能完全满足我们的要求（jenkins）
  1. 无法照顾到项目的本地开发
  2. jenkins插件是通过java语言开发
  3. 前端扩展性的功能相对简单
  • 脚手架原理
  1. 脚手架是操作系统客户端 vue : 主命令 command : create param: vue-test-app --option : 选项 -: 选项参数

终端输入 > 在环境变量中找到vue命令 > 链接到vue.js文件 > node解析vue.js > vue.js 解析command > vue.js 执行command

问题：

  1. vue-cli全局安装后添加一个命令为vue 因为在node的packge.json中绑定了路径，在bin中都为可执行命令，在vue-cli的packge.json当中绑定了vue命令和vueJs

  2. 全局安装vue-cli，发生了什么 node会将包下载到node_modules里面,解析包的bin里面解析packge.json,然后在node的bin目录配置一个软链接

  3. vue命令为什么会执行node 在执行vue命令的时候，在环境变量$PATH中找到vue命令有没有注册，链接到vue.js文件，在vue.js 文件上添加了环境变量，指定用node执行，在环境变量中去找到node命令，执行

  • 本质
  1. 脚手架是操作系统上的一个客户端 node是操作系统，通过命令行和参数执行 node编写软链接，会连接到包的js文件（可执行文件）
  • CLI(脚手架)开发最佳实践 脚手架的开发要注意以下几个问题:
  1. 分包
  2. 注册命令
  3. 参数解析
  4. 帮助文档
  5. 命令行交互
  6. 日志打印
  7. 变色
  8. 通信，文件交付
  • CLI创建
  1. 创建文件夹(项目目录，如:guokang-cli)
  2. 初始化目录 npm init
  3. 创建bin目录, 添加执行文件 index.js
  4. 执行文件首行添加环境变量 #!/usr/bin/env node
  5. 修改packge.json, 绑定"bin"命令
{
  "name": "guokang-cli",
  "version": "1.0.3",
  "description": "guokang's cli",
  "main": "index.js",
  "bin": {
    "guokang-test": "bin/index.js"// 绑定命令
  },
  "scripts": {
    "test": "test"
  },
  "keywords": [
    "cli"
  ],
  "author": "loove",
  "license": "ISC",
  "dependencies": {
  }
}
  1. 登陆npm login, 通过npm publish 发布(npm怎么创建私库)
  2. 通过npm i xxx 安装
  • CLI调试
  1. 移除脚手架（npm remove -g xxx）
  2. 在项目目录，添加npm link,实现本地调试
// 目录
// -guokang-cli
// --bin
// --package.json
// cmd cd到 guokang-cli目录下
npm link
// 效果:包输出基于本地代码的逻辑输出
  1. 分包
// 本地联调，到项目目录下，通过npm link xxx，引入本地包
npm link guokang-cli-lib
// 线上发布
npm publish
// 安装线上版本，先解除本地link
npm unlink guokang-cli-lib
npm i guokang-cli-lib
// 校验
guokang-tests
  • CLI 注册命令、解析参数
  1. process是当前 Node.js 进程的有关信息
  2. process.argv返回一个数组，这个数组包含了启动Node.js进程时的命令行参数
  3. process.argv[0]表示启动Node.js进程的可执行文件所在的绝对路径
  4. process.argv[1]——为当前执行的JavaScript文件路径
  5. 剩余的元素为其他命令行参数

*. 验证npm link的作用(unlink作用相反) 链接npm的全局node-modules,和npm i -g的作用相似。所以，在包（无论是外部和是本地）无法按预期更新时，都要到npm的node-modules里删除对应的包。

// 移除guokang-cli
npm remove -g guokang-cli
// 到项目目录，本地调试
npm link
// 显示
// windows
where.exe guokang-test
C:\Users\zero\AppData\Roaming\npm\guokang-test
// npm目录下的node-modules,出现guokang-cli的链接
  • 项目体验
// 安装
npm i guokang-cli
// 测试
guokang-test

找前端知己，一起探索 找同事，一起做国康的前端基础建设，简历请投2758570254@qq.com

avatar
文章
阅读
粉丝