两分钟构建你自己的前端脚手架下载器

本篇文章主要来分享一下自己近期开发的一个小工具,可帮助大家2分钟部署一个属于自己简易脚手架

仓库地址:github.com/gong9/swift...

使用视频:www.bilibili.com/video/BV1Ap...

Swift-Core 是一个用于构建命令行界面(CLI)应用的工具包,可以帮助你快速搭建 CLI 脚手架下载器。要开始使用,你需要:

1. 配置你的仓库地址

  • 对于 GitHub 个人账号:打开你的仓库主页,复制地址栏中的 如:https://github.com/gong9
  • 对于 Gitee 个人账号:同理操作,复制地址栏中的 如:https://gitee.com/gong9
  • 对于 GitHub 组织账号:同样打开主页,复制地址栏中的 https://github.com/gong-cli

2. 配置你的 CLI 组件的 JSON 格式配置

如下定义你的 CLI 组件配置:

json 复制代码
[
  {
    "name": "frame",
    "label": "框架类型",
    "type": "select",
    "title": "请选择框架",
    "items": [
      {
        "label": "React",
        "value": "react"
      },
      {
        "label": "Vue",
        "value": "vue"
      },
      {
        "label": "None",
        "value": "none"
      }
    ]
  },
  {
    "name": "demo",
    "label": "demo",
    "type": "input",
    "title": "demo"
  }
]

3. 仓库模版项目名称规定

cli会找所有以template-开头的开源项目模版,然后根据你的选择进行下载

Swift-Core 将为你的 CLI 自动生成 GUI 组件。通过 GUI 进行选择时(例如,select 组件选择 "React" , input 组件中输入 "111"),它将从你指定的仓库中搜索并下载符合条件的项目(本例中为包含 "react" 和 "111" 的项目,如template-react-111)。

none 代表不选择任何项目,匹配所有项目。

安装

确保你安装了 Node.js 版本 18.0.0 或更高:

bash 复制代码
pnpm add swift-core

使用

index.js

js 复制代码
#!/usr/bin/env node

const SwiftCore = require('swift-core').default

const swiftCore = new SwiftCore({
  name: 'swift-core',
  path: 'https://github.com/gong9', //目前仅支持 gitee 和 github
  version: '0.0.1',
  description: 'CLI 工具,用于项目脚手架搭建',
});

swiftCore.setConfig({
  configData: [
    {
      name: 'frame',
      label: '框架类型',
      type: 'select',
      title: '请选择框架',
      items: [
        {
          label: 'React',
          value: 'react',
        },
        {
          label: 'Vue',
          value: 'vue',
        },
        {
          label: 'None',
          value: 'none',
        },
      ],
    },
  ],
});

swiftCore.run();

执行

node index.js

上传部署自己的脚手架

你可以 clone https://github.com/gong-cli/template-cli 此项目,修改为你的配置和package.json。 然后npm publish

当然也可以用我的脚手架: github.com/gong9/swift...

相关推荐
闭上眼让寒冷退却13 小时前
知识库发布按钮引发的查询版本发布状态(轮询?——>调用后端接口)以及api接口设计学习
java·前端·javascript
sleeppingfrog13 小时前
konva实现canvas画图基础版本
前端·javascript·css
jingling55513 小时前
Mark3D | 用 Mars3D 实现一个炫酷的三维地图
前端·javascript·3d·前端框架·html
这是个栗子13 小时前
【前端知识点总结】请求/响应拦截器的介绍
前端·拦截器
Y‍waiX‍‍‮‪‎⁠‌‫‎‌‫‬13 小时前
【npm】从零到一基于Vite+vue3制作自己的Vue3项目基础的npm包并发布npm
前端·npm·node.js
专注VB编程开发20年13 小时前
vb.net宿主程序通过统一接口直接调用,命名空间要一致
服务器·前端·.net
2503_9284115613 小时前
12.18 中后台项目-权限管理
前端·javascript·数据库
Y‍waiX‍‍‮‪‎⁠‌‫‎‌‫‬13 小时前
NRM-NPM的镜像源管理工具使用方法
前端·npm·node.js
未来之窗软件服务18 小时前
一体化系统(九)智慧社区综合报表——东方仙盟练气期
大数据·前端·仙盟创梦ide·东方仙盟·东方仙盟一体化
Lei活在当下21 小时前
【Perfetto从入门到精通】4.使用 heapprofd 工具采样追踪 Java/Native 内存分配
android·性能优化·架构