随手写系列-根据vite的creat vite创建项目来如何构造一个cli--速览

116 阅读1分钟

part1:package.json里面配置bin脚手架命令--这里到安装到系统的话,会根据不同方式找到改命令位置,比如npm安装位置的node-modules下的bin里面执行对应的命令文件 当然main入口也需要配置好

--所有cli构造需要再package.json构建bin命令,可以配置多个命令

  "name": "create-vite",
  "version": "2.8.0",
  "license": "MIT",
  "author": "Evan You",
  "bin": {
    "create-vite": "index.js",
    "cva": "index.js"
  },
  "files": [
    "index.js",
    "template-*"
  ],
  "main": "index.js",
  "engines": {
    "node": ">=12.0.0"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/vitejs/vite.git",
    "directory": "packages/create-vite"
  },
  "bugs": {
    "url": "https://github.com/vitejs/vite/issues"
  },
  "homepage": "https://github.com/vitejs/vite/tree/main/packages/create-vite#readme",
  "dependencies": {
    "kolorist": "^1.5.1",
    "minimist": "^1.2.5",
    "prompts": "^2.4.2"
  }
}

part2:就是入口文件,这里vite的是index.js--大概用了minimist(解析命令行参数),prompts(读取用户输入), kolorist(带有色彩的输出)

index.js核心内容主要解析配置和检测配置找到对应的模板比如vue 模板,复制该模板的目录下内容到当前目录 --这里像create-react-app脚手架模拟从远程仓库拉seed种子项目到本地目录

const {spawn} =require('child_process')
spawn("git", ["clone", repo, path]);//从远程仓库拉seed种子项目到本地目录

--总结:cli脚手架可以通过复制seed种子项目到本地目录下,来模拟项目的创建

vite的create-vite基本结构: image.png