1.2.3 • Published 1 year ago

public-tools-cli v1.2.3

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

前端脚手架

项目初心

通过 Node Cli 命令来生成并创建新的业务模块,包含页面的基础布局模版,通用模块模版,等或者即将使用 umi 相关的模块套件,业务差异化组件需要自行添加与修改。用自动化来提升开发效率,使更多的精力花费在技术的沉淀和业务上,有节省开发时间的牛逼想法欢迎大家一起贡献来打造效率工具 🍻🍻🍻

目前已有以下命令可用,更多功能还需要定制开发。

  • init初始化项目模板
  • model创建基础业务模块,
  • template创建单页面模板,此模板需要基于现有业务定制开发
  • empty 创建空文件模块
  • update 升级组件库的版本
  • deploydist 目录里的所有文件上传到服务器
  • genconf 生成node-cli的配置文件及自定义的配置项
  • interface 基于数据结构生成 interface 接口
  • ui低代码平台来拖拽组件来生成业务组件。相关功能正在完善中

安装前置依赖

由于 npm 包是放在私有云服务器上,安装前需要设置下镜像源地址,有两种方式设置,个人推荐使用第一种,方便管理和自由切换

  1. 安装 nrm 镜像源管理工具
# 全局安装 nrm
npm install nrm -g

# 安装成功后可以查看所有的镜像源
nrm ls

# 新增自定义的镜像源地址, 公司私服地址
nrm add tools-service http://xxx.xxx.xxx.xxx:xxx/

# 使用自定义的镜像源,镜像源可自由切换
nrm use tools-service
  1. 简单粗暴的设置镜像源
 npm set registry http://xxx.xxx.xxx.xxx:xxx/

配置完镜像源后安装 Node-Cli 工具

全局安装 tools 工具

  npm install public-tools-cli -g

  # 测试是否安装成功, 能正常输出图形就证明安装成功
  tools -v

示例图

正确使用命令姿势

安装完成命令后,可在全局任意目录下执行相应命令来得到输出结果。执行部分命令是有前置条件的,基于 cmd 当前进入的目录下必须有__CUSTOMCLICONFIG__的目录,此目录涵盖了基础的自定义配置 如: 移动端页面模板 模板目录/__CUSTOMCLICONFIG__/自定义目录名/mobile pc 端页面模板 模板目录/__CUSTOMCLICONFIG__/自定义目录名/pc 当前项目下命令基础配置 文件放在 __CUSTOMCLICONFIG__/baseConfig

init

  • 参数 project string : 必填项 初始化后的项目名称 基于已经开发好的项目模板直接拿来使用(比如目前的子应用项目),此命令执行后有两组模式可以选择 系统内置方案组本地自定义方案组 ,两种模式仅为更加的通用灵活

    系统内置方案组 是公司内部需要使用到的项目,模板链接地址不可修改

    本地自定义方案组 可自定义配置第三方项目 git 地址,配置地址 ~/__CUSTOMCLICONFIG__/baseConf.js INIT属性里

model

生成出前端意义上的文件模块, 执行命令后可选择生成 移动端PC 端的模板文件

  • 参数: moduleName string : 必填项 创建的模块名称
  • 参数: path string : 选填 选择插入到指定目录

template

生成出单个模板文件,模板来自于 /__CUSTOMCLICONFIG__/自定义目录名/mobile/__CUSTOMCLICONFIG__/自定义目录名/pc内的文件

  • 参数 fileName string : 必填项 创建的文件名称

empty

创建空文件模块,一般用于开发组件时,生成空文件的一个模块。省创建文件或目录的动作, 配置文件在 __CUSTOMCLICONFIG__/baseConfig.js 里的 EMPTYMODEL属性里进行配置,类型 Array

  • 参数 moduleName string : 必填项 模块目录命名 - 生成目录或文件规则需要配置选项到配置文件里
// 对于 * 的个数,代表着不同的处理方式,命令行输入的 moduleName
// 【** 占位符 - 代表自定义的取名值】, 【当 *** 个星是代表 首字母大写】, 【**** 个星是代表 全大写】
{
  name: 'react-ui 组件模块',   // 选项的名称。自定义
  value: 'react-ui', // 必须是唯一值
  checked: true, // 选项生成时,是否默认选中
  jsonConfig: {
    folder: ['./src/components/**', './src/components/**'],  // 路径下生成目录
    files: [ // 路径下生成文件
      './src/components/**/index.md',
      './src/components/**/index.ts',
    ]
  }
}

update

无参数 更新公司内部的组件库的版本

deploy

无参数 - 需要配置选项到配置文件里 将发布 dist 目录下的所有文件部署到服务器上,采用文件覆盖的方式, exec 可配置,上传文件成功后,执行服务器的命令,多个命令时请配置执行 shell 脚本

{
  value: 'development', // 必须是唯一值
  name: '测试环境', //自定义名称, 选项名称
  visitport: '80', // 访问项目时的端口号。默认是 80 端口
  host: '10.XXX.6.XXXX', // 服务器的 ip 地址
  port: 22, // 登录服务器的端口
  username: 'root', // 登录服务器的 账号
  password: '*****', // 登录服务器的密码
  path: '/data/Plug-in-conf/html/XXX', // 【服务路径】项目静态文件存放地址
  exec: ['mdkir', "$/Test"]  // 配置文件上传后 执行的命令。比如启动 , 解压等。$/ 是必须,代表全路径的占位符
}

genconf

无参数 生成配置文件,在当前目录下生成 **CUSTOMCLICONFIG**目录,包含了如下配置文件

interface

无参数 将当前目录下的 .json 文件内容转化成 interface 接口的 .ts 文件。值得注意的是,只接受 .json 文件,其它类型的文件直接忽略

实战演练 🌰

创建模块 tools model 命令 是基于 Vue 项目进行,进入目录中

示例图

生成后的目录结构 示例图

tools interface 命令

示例图

示例图

示例图