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
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
posted @ 2020-12-14 15:28  风吹麦浪打  阅读(678)  评论(0)  编辑  收藏  举报