手写vue 脚手架

手写vue 脚手架

项目地址
项目模板地址

必备模块

• commander：参数解析 --help借助它
• inquirer ：交互式命令行工具 ，使用可以实现命令行选择功能
• download-git-repo：在git中下载模板
• metalsmith：读取所有文件，实现模板渲染
• consolidate：统一模板引擎

git相关知识

• 查看每次提交的信息git log、git show、git show 某个制定的commitId

• 创建tag并与commit建立连接git tag 版本名 commitid

• 查看所有标签git tag

• 将tag同步到远程服务器git push -u origin main 标签名

• 删除taggit tag -d tag名

• GitHub API调用

  1. 查看某个用户下面所有的仓库

     https://api.github.com/users/meet-you-123/repos
     

  2. 查看某个用户下面特定的仓库信息

     https://api.github.com/repos/用户名/仓库名
     

  3. 查看某个特定仓库的版本信息

     https://api.github.com/repos/用户名/仓库名/tags
     

项目开始

1.目录结构

├── bin 
│ └── www // 全局命令执行的根文件 
├── package.json 
├── src 
│ ├── constants.js // 存放常量
│ ├── create.js // create命令逻辑 
│ ├── config.js // config命令逻辑 
│ ├── main.js // 入口文件 
│ └── utils // 存放工具方法 
│── .huskyrc // git hook 
│── .eslintrc.json // 代码规范校验

2.初始化项目

yarn init -y

// package.json
"bin":{
   
    "tsc_cli":"./bin/www"
}

// ./bin/www.js
#! /usr/bin/env node //执行环境是node
require("../src/main.js")

//链接包到全局
yarn link

3.commander

yarn add commander

// ./src/main.js
const programe=require("commander")
programe.version("1.0.0").parse(process.env)

执行tsc_cli --help

4. 动态获取版本号

// ./src/constants.js
const {
   version}=require("../package.json")
module.exports={
   
    version
}
// ./src/main.js
const programe=require("commander")
const {
   version}=require("./utils/constants")
programe.version(version).parse(process.env)

5.配置指令命令

// ./src/main.js

//配置三个指令命令
const mapActions={
   
    create:{
   
        alias:"c",
        description:"create a project",
        examples:[
            "tsc_cli create <project-name>"
        ]
    },
    config:{
   
        alias:"conf",
        description:"config project variable",
        examples:[
            "tsc_cli configm set <k><v>",
            "tsc_cli config get <k>"
        ]
    },
    "*":{
   
        alias:"",
        description:"command not found",
        examples:[]
    }
}

//循环创建命令
Reflect.ownKeys(mapActions).forEach((action)=>{
   
    programe
    .command(action)//配置指令名称
    .alias(mapActions[action].alias)//命令别名
    .description(mapActions[action].description)//命令的描述
    .action(()=>{
   
        //访问不到对应的命令 就打印找不到命令
        if(action==="*"){
   
            console.log(mapActions[action].description)
        }else{
   
            console.log(action)
        }
    })
})

//监听用户的help事件
programe.on("--help",()=>{
   
    console.log("\nExamples:")
    Reflect.ownKeys(mapActions).forEach((action)=>{
   
        mapActions[action].examples.forEach((example)=>{
   
            console.log(`${
     example}`)
        })
    })
})

6.create命令

// ./src/main.js
.