@pluve/version-output-cli

关于

通用型版本构建命令行工具，在原始构建输出目录下，输出以下文件：

• version.json 或 version.js - 记录最新版本号
• 对外入口文件（默认为 main.html）- 当访问入口文件时，从 version.json 或 version.js 获取最新版本号, 匹配一定的规则跳转到对应的版本号文件路径
• {version} - 版本文件夹，内容为原始输出文件

安装

yarn add @pluve/version-output-cli -D

使用

在打包命令执行完成后执行version-output命令

// package.json
{
  "name": "demo",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "build:testing": "xxx && version-output --output dist --main-file-name index.html --vconsole",
    "build:product": "xxx && version-output --output dist --main-file-name index.html",
  }
}

配置参考

version-output -h

转发规则

入口文件转发规则如下：

[path]/[mainHtml]#/t/[m] -> [path]/[version]/[n]

• path - url基础路径
• mainHtml - 入口文件，如 main.html
• t - 固定值
• m - 转发后的路径，使用 先encodeURIComponent再base64(window.btoa) 编码
• version - 构建的版本号
• n - 解码m得到的路径

示例

假设存在项目构建后结构如下，存在订单号为1的订单详情页，访问地址为 https://example.com/html/rest/order.html?orderCode=1

├── html							
│   ├── rest				      
│   │   ├── order.html
│   │   └── orders.html
└── 

现在，我们将此项目使用 @pluve/version-output-cli 并在项目构建完成后执行 version-output --output dist --main-file-name index.html, 则最终的输出结构变更为（假设执行版本构建时间为 2024/03/14 09:50）：

├── 202403140950							
│   ├── html				      
│   │   ├── rest
│   │   │   ├── order.html   
│   │   │   └── orders.html
├── version.json
└── index.html

现在，我们对外提供的订单号为1的订单详情页则调整为 https://example.com/index.html#/t/aHRtbCUyRnJlc3QlMkZvcmRlci5odG1sJTNGb3JkZXJDb2RlJTNEMQ==, 最终转发到 https://example.com/index.html#/t/aHRtbCUyRnJlc3QlMkZvcmRlci5odG1sJTNGb3JkZXJDb2RlJTNEMQ==

注1: aHRtbCUyRnJlc3QlMkZvcmRlci5odG1sJTNGb3JkZXJDb2RlJTNEMQ== 为 window.btoa(encodeURIComponent('html/rest/order.html?orderCode=1')) 的结果 https://example.com/202403140950/html/rest/order.html?orderCode=1