前端脚手架

怎么搭建脚手架

怎么搭建脚手架

• 那尤雨溪是怎么发布 Vue.js 的 (opens new window)

• 脚手架的一些工具包：

  • https://juejin.cn/post/7124112069355372581
    • 截图 (opens new window)

• 对于Commander.js的认识 (opens new window)

  • 文章截图 (opens new window)

• 搭建一个脚手架

  • https://juejin.cn/post/7077717940941881358?searchId=202604091853537402D0ED88555FC2B2DE

    • 文章截图 (opens new window)
    • 这是一个系列：https://juejin.cn/column/7074954144817086472

  • // json里需要注意的点
    {
      "name": "my-scaffold",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "keywords": [],
      "author": "",
      "_comment": "在package.json文件中,我们想要写注释。标准无侵入写法：用 _ 开头的自定义字段存注释,npm完全不会处理，不影响任何功能，就是纯粹存注释，100%兼容所有工具.之后再 npm link 就可以在cmd里使用命令了。",
      "bin": {
        "_comment_command_name": "下面的key值必须和name字段名称一致，这是当前脚手架的命令名称，必须和name字段名称一致",
        "my-scaffold": "bin/enter.js"
      },
      "license": "ISC",
      "_comment_": "pnpm对package.json的字段解析比npm严格，不要把自定义注释字段放在dependencies/devDependencies里面",
      "_comment_chalk": "命令行美化工具。chalk 可以美化我们在命令行中输出内容的样式，例如实现多种颜色，花里胡哨的命令行提示等。",
      "_comment_inquirer": "命令行交互工具。inquirer 支持 Confirm 确认，List 单选，Checkbox 多选等多种交互方式。",
      "_comment_terminal-link": "这个包的作用就是实现终端链接的点击跳转功能",
      "_comment_ora": "命令行 loading 效果",
      "_comment_fs-extra": "fs-extra 模块是系统 fs 模块的扩展，提供了更多便利的 API，并继承了 fs 模块的 API。比 fs 使用起来更加友好",
      "_comment_download-git-repo": "download-git-repo 可以从 git 中下载并提取一个 git repository",
      "_comment_figlet": "生成基于 ASCII 的艺术字.figlet 模块可以将 text 文本转化成生成基于 ASCII 的艺术字。",
      "_comment_cross-spawn": "可以在这个的基础上再加一个第三方的依赖——cross-spawn ，下载完毕后，执行安装依赖的操作",
      "_comment_execa":"简单说就是执行命令的，类似我们自己在终端输入命令",
      "_comment_progress":"progress包用于命令行显示进度条，参考：https://juejin.cn/post/7103165205483356168",
      "_comment_rd":"列出（遍历）目录下的所有文件，包括子目录（支持 TypeScript）",
      "dependencies": {
        "chalk": "^5.6.2",
        "commander": "^14.0.3",
        "download-git-repo": "^3.0.2",
        "figlet": "^1.11.0",
        "fs-extra": "^11.3.4",
        "inquirer": "^13.4.1",
        "ora": "^9.3.0",
        "terminal-link": "^5.0.0"
      }
    }
    

  • bin目录下的enter文件，部分内容注释

    • #! /usr/bin/env node
      
      const { program } = require("commander");
      // 配置 create 命令
      program
        .command("create <project-name>") // 增加创建指令
        .description("create a new project") // 添加描述信息
        .option("-f, --force", "overwrite target directory if it exists") // 强制覆盖
        // projectName 指 <project-name>
        .action((projectName, options) => {
          // 处理用户输入create 指令附加的参数
          console.log(projectName, options);
        });
      
      // 配置 config 命令
      program
        // 定义一个名为 config 的命令，[value] 表示该命令可以接受一个可选的参数
        .command("config [value]")
        // 为 config 命令添加描述信息，帮助用户了解该命令的用途
        .description("inspect and modify the config")
        // 定义 -g 或 --get 选项，用于通过键获取配置值，<key> 表示该选项需要一个参数
        .option("-g, --get <key>", "get value by key")
        // 定义 -s 或 --set 选项，用于设置配置项的值，<key> <value> 表示该选项需要两个参数
        // 注意：这样去调用命令：my-scaffold config  -d key inputValue // 输出：inputValue { delete: 'key' }
        .option("-s, --set <key> <value>", "set option[key] is value")
        // 定义 -d 或 --delete 选项，用于通过键删除配置项，<key> 表示该选项需要一个参数
        .option("-d, --delete <key>", "delete option by key")
        // 定义命令执行时的回调函数，value 是 [value] 传入的值，options 是命令行参数对象
        .action((value, options) => {
          // 打印 value 和 keys，方便调试查看传入的值
          console.log(value, options);
          // const cwd = process.cwd(); // 获取当前工作目录 // E:\just_test\scaffoldingPractice
        });
      
      program.parse(process.argv);
      
      // https://api.github.com/orgs/组织名称/repos  // 获取某个组织在github上的所有仓库
      // https://api.github.com/users/用户名/repos  // 获取某个用户在github上的所有仓库
      

​