TS+Node 构建前端一键部署工具

工具地址

「cbd-deploy-cli」:

功能概览

具体的用法指导 「README.md」 有详细的描述,这里简单地介绍一下:

安装

  • 全局安装
npm install cbd-deploy-cli -g
复制代码
  • 本地安装
npm install cbd-deploy-cli --save-dev
复制代码

初始化

cbd-deploy-cli init
复制代码

「init」 之后会根据用户输入的配置在当前目录下生成 「develop.config.js」 文件,这里要注意以下几点:

  • 部署的环境包括 「dev」(测试环境) 和 「prod」(生产环境), 是多选

  • 项目类型包括 「Web」「Hybrid App」, 这是单选。「Web」 就相当于普通的应用就好,这应该是最普遍的场景。两者生成的文件有略些差异,「Hybrid」 这里会包括「小程序」/「web」 以及 「Native App」三个平台,而且是在输入部署命令后「相继部署」,不需要再另外操作

  • Web App

  • Hybrid App

ps: 这里如果有朋友想使用这个工具,「Web App」 类型就足够了,「Hybrid」主要是针对我本人现在工作的痛点添加的功能,如果有人跟我一样的遭遇那真的是太幸运了。

配置文件

输入 「init」 命令后生成了配置文件,这里还是推荐自己手动编辑,因为如果是「Hybrid」项目类型会有很多输入。

  • Web App
// deploy.config.js
module.exports = {
  "projectName": "cbd-deploy-cli",
  // 开发环境
  "dev": {
    "name": "开发环境",  // 环境名称
    "script": "npm run build", // 打包命令
    "host": "localhost", // 服务器地址
    "port": 22, // 服务器端口号
    "username": "root", // 服务器登录用户名
    "password": "", // 服务器登录密码
    "privatekey": "xxxx/.ssh/id_rsa", // 服务器对应本地私钥
    // password | privatekey 选填一个就可以
    "distpath": "dist", // 本地打包生成目录
    "webdir": "/",  // 服务器部署路径(不可为空或'/')
    "isremoveremote": false // 是否删除远程文件(这里是目录删除,请谨慎开启,上传解压后会自动覆盖)
  },
  // 生产环境
  "prod": {
    "name": "生产环境",
    "script": "npm run build",
    "host": "localhost",
    "port": 22,
    "username": "root",
    "password": "",
    "privatekey": "xxxx/.ssh/id_rsa",
    "distpath": "dist",
    "webdir": "/",
    "isremoveremote": false
  }
}
复制代码
  • Hybrid App
module.exports = {
  "projectName": "cbd-deploy-cli",
  // 开发环境
  "dev": {
    "name": "开发环境", // 这里注意一下区别
    // 小程序
    "mini": {
      "script": "npm run build",
      "host": "localhost",
      "port": 22,
      "username": "root",
      "password": "",
      "privatekey": "xxx/.ssh/id_rsa",
      "distpath": "dist",
      "webdir": "",
      "isremoveremote": false
    },
    // web
    "web": {
      "script": "npm run build",
      "host": "localhost",
      "port": 22,
      "username": "root",
      "password": "",
      "privatekey": "xxx/.ssh/id_rsa",
      "distpath": "dist",
      "webdir": "",
      "isremoveremote": false
    },
    // 原生
    "native": {
      "script": "npm run build",
      "host": "localhost",
      "port": 22,
      "username": "root",
      "password": "",
      "privatekey": "xxx/.ssh/id_rsa",
      "distpath": "dist",
      "webdir": "",
      "isremoveremote": false
    }
  }
}
复制代码

部署

注意:命令后面需要加 --mode 环境对象 (如:--mode=dev 或者 --mode dev

cbd-deploy-cli deploy --mode=dev    
复制代码

程序会自动进行如下操作:

这时候,项目已经成功发送到服务器中,全程不超过10秒,是不是省下了好多时间。而在 「Hybrid」下更是明显,三个平台「程序相继发布」,一个命令敲完之后无需再做任何操作,三个平台即可部署完毕。

实现逻辑

这里简单说下自己的实现逻辑,因为「Web」下的逻辑主要借鉴别人的,自己只是用「typescript」重新写了一下后做了一些修改而已。但「Hybrid」是我在这些基础上另外加的功能,做到了两者的兼容。

这里不贴什么代码,具体的实现可以直接在「GitHub」里看到,用流程图简单写下整个功能的逻辑:


作者:夏天Summer
链接:https://juejin.cn/post/6876330440043692046
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

原文地址:https://www.cnblogs.com/love314159/p/14133499.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


1.小程序的优缺点优点:不需下载、卸载使用方便缺点:嵌套在微信中,属于微信的子应用2.使用的技术实际上是Hybrid技术的应用HybridApp(混合模式移动应用),使用网页语言和程序语言共同开发小程序兼具了NativeApp所有优势,也兼具了WebApp使用Html5跨平台开发低成本注:微信小程序与传
端口类型-HybridHybrid端口是交换机上既可以连接用户主机,又可以连接其他交换机的端口。Hybrid端口既可以连接接入链路又可以连接干道链路。Hybrid端口允许多个VLAN的帧通过,并可以在出端口方向将某些VLAN帧的Tag剥掉。华为设备默认的端口类型是Hybrid。 Hybrid端口收发数据帧的规则
不同vlan同段IP通信LSW1vlan1vlan2vlan3interfaceEthernet0/0/1porthybriduntaggedvlan2to3interfaceEthernet0/0/2porthybridpvidvlan2porthybriduntaggedvlan2to3interfaceEthernet0/0/3porthybridpvidvlan3porthybriduntaggedvlan2to3
VLAN中access、Trunk和Hybrid三种端口区别:acesss:1、发送不带标签的报文2、一般与PC\server相连时使用3、只可以属于一个VLANTrunk:1、发送带标签的报文2、一般用于交换机级联端口传递多组VLAN信息使用3、可以属于多个VLANHybrid:1、混合端口可以同时属于多个vlan2、混合端口
这系列文章内容包括:STP、RSTP、MSTP、VLAN、LACP、SuperVLAN。以学习实验配置为主要目标;实验引用华为官方na在线视频中实验。6.3VLAN原理和配置实验截图:配置第一个交换机:修改端口类型acc、配置端口所属vlan、配置trunk端口。实验心得:有一个问题,当你配置e0/0/3为trunk以及al
实验一:交换机端口类型配置1.拓扑图如下图所示:2.实验要求:实现二层网络中工程部和市场部不能互访,但是都能与网络中心的服务器通信3.请写出你的配置思路、配置命令实验思路:将交换机SW1、SW2、SW3之间配置为trunk链路,其他接口配置为Hybrid链路;实验配置名如下:SW1sysnameSW
   这个英文材料对我一个英语一般的学生表示亚历山大啊,不过还是勉强看完了,说说自己的看法吧。   谷歌作为一家商业公司,利润是其基本的追求目标,这一点是毋庸置疑的。但是谷歌并没有被这个基本目标挡住了视野,无数公司失败的经验告诉我们,如果缺少创新,公司的一切发展
简介:VLAN10内通信,VLAN20内通信,VLAN30与VLAN10、VLAN20、VLAN30皆可通信Hybrid接口应用拓扑图:  一、配置PC机ip并测试相互能否ping通 PC名称IP子网掩码网关PC110.1.1.1255.255.255.010.1.1.254PC210.1.1.2255.255.255.010.1.1.254PC310.1.1.3
通常情况下,公司对内网的使用远远高于对外网的使用。公司的内部网络是由二层交换网络构建的,所以二层网络设计的好坏直接影响公司的正常业务。好的设计不仅使功能得到体现,还可以应对一些未知的隐患,如线路损坏、设备损坏等。下面我们主要对华为的二层设备进行了解,不过首先要了解的就
手机app代表了互联网时代的发展,促使我们的日常生活也变得越来越轻松,不管是哪个行业或者企业,在人们手机上存在最多的还是APP,手机APP逐渐的超越了网络,本身这些APP系统就是一个大型的APP系统,具体APP怎么开发呢?开发出来的手机APP,主要还是通过编程的方式设计出来的,有了变成那么就需要程
我想导出一种简单可靠的方法来自动提升正在运行的批处理,而无需使用其他线程中建议的额外的VBS文件或提升的快捷方式.通过javascript从批处理调用UAC对话框可确保简短的简单代码.在对话框中选择“是”,但错误对话框弹出时(在Cmd窗口外部)“Windows找不到’test.bat’”,下面的脚
无论如何,我可以在FORTRAN程序中使用BoostGraphLibrary(BGL)来使用图形数据结构.任何人都可以帮助我或给我一个提示.我想在我的MPI-FORTRAN代码中的几个处理器上进行并行图结构.是否可以使用BoostGraphLibrary(BGL)来达到此目的!亲切的问候,谢夫解决方法:你必须构造一个用C语
原文链接:http://www.cnblogs.com/iamzyf/p/3515889.html其实问题很简单:我的产品页面在 http://www.gdtsearch.com/products.spiderstudio.docapi.htm,这是一个静态页面;而我所有的技术博客都在博客园中.为了让访问者能够直接在产品页面中看到我最
Hybrid接口是华为特有的一种接口Hybrid接口是既可以连接普通终端的接入链路,又可以连接交换机间的干道链路。简单说就是Hybrid接口既能实现Access的功能又能实现Trunk接口的功能。实验模拟:实验拓扑:实验编址:测试连通性:查看交换机接口类型(默认情况下都是hybrid类型)displayportvlan
原生APP开发-NativeApp:需要用户下载安装使用,可访问手机的所有功能(GPS,摄像头,重力加速器),拓展性强,是专门为某种操作系统开发的(IOS,Android,黑莓等),但是开发和维护的成本都比较高 webApp:html5语言写出的app,不需要下载安装,基本上就是触屏版的网页,可以在多个设备上运行,有很大的局限性
拓扑图如下:(1)sw1的配置:<Huawei><Huawei>system-view//切换到系统视图Entersystemview,returnuserviewwithCtrl+Z.[Huawei]sysnamesw1//配置主机名Oct25201916:29:31-08:00sw1DS/4/DATASYNC_CFGCHANGE:OID1.3.6.1.4.1.2011.5.25.191
程序员常用等宽字体1SourceCodePro2CourierNew(传统)3Consolas4Monaco5中文雅黑混合版(YaHeiConsolasHybrid)
Japan'shybridmodelinventoryofhairEwhaRinkaLead:passed37thbirthdayofthepear,theeyesofeveryonestillhasaLolita-likegirltemperament,herinterpretationoftheinvolutionBOBlongghdhairstraightener hair,andevensetoffinas
1url不要用hash模式,如果涉及到外部如firebase方式直接发送给客户端动态链接,要求打开app内h5地址的时候,这个#会被截断,客户端无法解析2尽量在多页面,当客户端由不同入口进入的时候,前端尽可能做多业务拆分,避免以后所有模块在一起,一次修改要全部上线,3移动端输入框键盘要求输