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基本结构: